响应式视频播放器

时间:2012-09-14 11:52:11

标签: responsive-design jwplayer flowplayer

我需要一个用于响应式布局网站的视频播放器,它是使用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响应?

7 个答案:

答案 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插件即可使其响应。