响应式视频播放器

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 的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>

Answer 2

您可以在您的网站中使用 YouTube 视频，并使用FitVid.Js插件来使其响应。