responsive-design - 响应式视频播放器

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

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>