响应式视频播放器

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

我曾尝试jwplayer和流水游戏，但它没有奏效。

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

注：球员应该能够播放YouTube的视频....

反正有做jwplayer /响应的Flowplayer？

来源

2012-09-14 LoganPHP

-2

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

来源

2012-09-17 14:17:13 justinavery

Ⅰ号要定义视频播放器，这只是我的问题 – LoganPHP

相同的答案，无论去您想要使用哪种视频播放器。您只需要更新选项以包含您的特定视频播放器名称。 – justinavery

我正在使用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" 
    }); 
});

希望它有帮助！

来源

2012-10-02 22:40:42 Luka

你可以通过简单的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%; 
}

来源

2012-12-22 05:21:39

尝试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时，y OU可能还需要宽度设置为100％：

jwplayer("myElement").setup({ 
    width: 100% 
});

来源

2013-04-04 16:47:19

最简单的方法是使用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,177为16：9）。

来源

2013-05-29 12:57:43 Daniel

更好的版本卢卡的回答的：

$(window).resize(function() { 
    var $width = $("#holder").width(); 
    var $height = $width/1.5; 
    jwplayer().resize($width,$height); 
});

用户从JW播放器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>

来源

2013-10-26 11:31:59

这对我的工作以及 JW球员到这里

<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 


          });

来源

2017-09-19 11:06:48

响应式视频播放器

回答

相关问题