我正在尝试使用 jwplayer 实现这样的目标:
http://demosthenes.info/samples/polina.html
这是我到目前为止得到的:
http://johnkimwell.com/videobg/
如您所见，视频很容易填满整个屏幕，但如果您调整屏幕大小。视频也会调整大小。希望有人能帮我解决这个问题。顺便说一下，这是我的代码片段:
aspectratio: "1:1",
width: "100%",
stretching: "exactfit",
autostart: true,
repeat: true
刚了解到最新版的jwplayer不支持100%的高度值。
谢谢
最佳答案
这是我整理的演示 - http://www.pluginsbyethan.com/github/
页面源代码为:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
overflow-x: hidden; overflow-y: hidden;
}
</style>
<script>
document.ontouchstart = function(e){
e.preventDefault();
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<script type="text/javascript">
if (navigator.userAgent.match(/iPhone/i) != null){
document.write('<meta name="viewport" content="width=device-width;initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />');
} else
if (navigator.userAgent.match(/iPad/i) != null){
document.write('<meta name="viewport" content="width=device-width;initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />');
} else {
document.write('<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,target-densityDpi=310" />');
}
</script>
<script type="text/javascript">
function hideURLbar() {
if (window.location.hash.indexOf('#') == -1) {
window.scrollTo(0, 1);
}
}
if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('Android') != -1 || navigator.userAgent.indexOf('iPad') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}
</script>
<title>Hi!</title>
<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="video.css" rel="stylesheet" type="text/css" />
<!-- html5shiv -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://p.jwpcdn.com/6/7/jwplayer.js"></script>
</head>
<body>
<div id="video_bck">
<div id="video"></div>
<script type="text/javascript">
$(document).ready(function($) {
var w_height = $(window).height();
var w_width = $(window).width();
if (navigator.userAgent.match(/iPad/i) != null || navigator.userAgent.match(/iPhone/i) != null || navigator.userAgent.match(/android/i) != null){
jwplayer("video").setup({
height: w_height,
width: w_width,
file: "cat.mp4",
stretching: "fill",
autostart: true,
repeat: "true",
skin: "six.xml",
events:{
onPause: function(event) {
jwplayer('video').play();
}
}
});
} else {
jwplayer("video").setup({
height: w_height,
width: w_width,
file: "cat.mp4",
controls: "false",
stretching: "fill",
autostart: true,
repeat: "true",
events:{
onPause: function(event) {
jwplayer('video').play();
}
}
});
}
$(window).resize(function(e) {
var new_w_height = $(window).height();
var new_w_width = $(window).width();
jwplayer("video").resize(new_w_width, new_w_height);
});
});
</script>
</div>
<div id="box">
<br />
<br />
Hello GitHub!
</div>
</body>
</html>
希望对您有所帮助!
关于video - 无论屏幕分辨率如何，JWPlayer 都可以填满整个屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21177121/