我需要一个用于响应式布局网站的视频播放器,它是使用bootstrap开发的。这意味着当我重新调整屏幕大小或在不同大小的屏幕上查看页面时,播放器应自动适应屏幕。
我曾尝试使用jwplayer和flowplayer,但它没有用。
注意:播放器应该可以播放YouTube视频....
有没有让jwplayer / flowplayer响应?
答案 0 :(得分:6)
Luka答案的更好版本:
$(window).resize(function() {
var $width = $("#holder").width();
var $height = $width/1.5;
jwplayer().resize($width,$height);
});
使用JW Player API中的调整大小功能:
http://www.longtailvideo.com/support/jw-player/29411/resizing-the-player
另一种解决方案:
查看他们的响应式设计支持文档:http://www.longtailvideo.com/support/jw-player/32427/responsive-design-support
<div id="myElement"></div>
<script>
jwplayer("myElement").setup({
file: "/uploads/myVideo.mp4",
image: "/uploads/myPoster.jpg",
width: "100%",
aspectratio: "12:5" // Set your image ratio here
});
</script>
答案 1 :(得分:2)
您可以通过简单的CSS样式进行更改
/* Video small screen */
.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
答案 2 :(得分:1)
我正在使用jQuery进行大小调整。 #holder
是电影所在的div(#videocontainer
)
结构:
<div id="holder">
<div id="videocontainer"></div>
</div>
大小需要#holder
并将其提交给#videocontainer
。它适用于ie9,ie8,......
$(window).resize(function() {
var $width = $("#holder").width();
var $height = $width/1.5;
jwplayer("videocontainer").setup({
flashplayer: "jwplayer/player.swf",
file: "###.mp4",
width: $width,
height: $height,
image: "###.jpg"
});
});
希望它有所帮助!
答案 3 :(得分:0)
尝试FitVids:http://fitvidsjs.com/
如果您想让jwPlayer响应,请尝试将其添加到您的CSS文件中:
#video-jwplayer_wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 format */
padding-top: 30px;
height: 0;
overflow: hidden;
}
#video-jwplayer_wrapper iframe, #video-jwplayer_wrapper object, #video-jwplayer_wrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
来源:http://webdesignerwall.com/tutorials/css-elastic-videos
调用jwplayer时,您可能还需要将width设置为100%:
jwplayer("myElement").setup({
width: 100%
});
答案 4 :(得分:0)
最简单的方法是使用javascript
function sizing() {
$('#player').css('width', $('#container').outerWidth());
$('#player').css('height',$('#player').outerWidth() / 1.33);
}
$(document).ready(sizing);
$(window).resize(sizing);
不要忘记包含jquery库并更改宽高比(1.33适用于4:3,1,77适用于16:9)。
答案 5 :(得分:0)
这对我来说很好 JW Player来到这里
<script type="text/javascript">
if($( window ).width() <= 400){
pl_width = 300;
pl_heith = 150;
}else if($( window ).width() <= 600){
pl_width = 500;
pl_heith = 250;
}else{
pl_width = 700;
pl_heith = 350;
}
//alert(pl_width);
jwplayer("video_top").setup({
flashplayer: "<?php echo $player_path; ?>",
file: "<?php echo $your_file; ?>",
controlbar: "bottom",
height:pl_heith,
width:pl_width
});
答案 6 :(得分:-2)
您只需在自己的网站中使用YouTube视频,然后使用FitVid.Js插件即可使其响应。