我需要一个使用引导程序开发的响应式布局网站的视频播放器。这意味着当我重新调整屏幕大小或以不同大小的屏幕查看页面时,播放器应该自动适应屏幕。
我曾尝试使用 jwplayer 和 flowplayer,但没有成功。
注意:播放器应该能够播放 youtube 视频....
无论如何让 jwplayer/flowplayer 响应?
我需要一个使用引导程序开发的响应式布局网站的视频播放器。这意味着当我重新调整屏幕大小或以不同大小的屏幕查看页面时,播放器应该自动适应屏幕。
我曾尝试使用 jwplayer 和 flowplayer,但没有成功。
注意:播放器应该能够播放 youtube 视频....
无论如何让 jwplayer/flowplayer 响应?
卢卡答案的更好版本:
$(window).resize(function() {
var $width = $("#holder").width();
var $height = $width/1.5;
jwplayer().resize($width,$height);
});
使用 JW Player API 中的resize函数:
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>
您可以通过简单的 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%;
}
我正在使用 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"
});
});
希望能帮助到你!
试试 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 时,您可能还需要将宽度设置为 100%:
jwplayer("myElement").setup({
width: 100%
});
最简单的方法是使用 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)。
这对我来说很好用 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
});
您可以在您的网站中使用 YouTube 视频,并使用FitVid.Js插件使其具有响应性。