响应式视频播放器

Question

我需要一个响应式布局网站的视频播放器，这是用bootstrap开发的。这意味着当我重新调整屏幕大小或在不同大小的屏幕上查看页面时，播放器应该自动适应屏幕。

我尝试过jwplayer和flowplayer，但都不起作用。

http://www.longtailvideo.com/support/forums/jw-player/setup-issues-and-embedding/24635/responsive-video-internet-explorer-100-widthheight

注意:播放器应该能够播放youtube视频....

有什么方法可以让jwplayer/flowplayer响应吗？

Answer 1

更好的版本卢卡的答案

$(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>

Answer 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%;
}

Answer 3

我使用jQuery来调整大小。div是电影所在的#holder (#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"
    });
});

希望它能帮上忙！