響應式視頻播放器

我需要使用引導程序開發的響應式佈局網站的視頻播放器。這意味着當我重新調整屏幕大小或在不同大小的屏幕上查看頁面時，播放器應該自動適合屏幕。響應式視頻播放器

我曾嘗試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

響應式視頻播放器

回答

相關問題