多響應的Video.js球員

Question

我使用這個解決方案，http://daverupert.com/2012/05/making-video-js-fluid-for-rwd/，使videojs玩家流體。我的問題是當我有多個視頻（每個都有一個唯一的ID），我不知道如何使這項工作。

這是我開發的網站我有3個視頻，http://tweedee.e-mediaresources.info/

這裏是我的代碼有玩家（從上面戴夫·魯珀特的解決方案）：

<script type="text/javascript"> 
    // Once the video is ready 
    _V_('#my_video_1').ready(function(){ 

     var myPlayer = this; // Store the video object 
     var aspectRatio = 9/16; // Make up an aspect ratio 

     function resizeVideoJS(){ 
      // Get the parent element's actual width 
      var width = document.getElementById(myPlayer.id).parentElement.offsetWidth; 
      // Set width to fill parent element, Set height 
      myPlayer.width(width).height(width * aspectRatio); 
     } 

     resizeVideoJS(); // Initialize the function 
     window.onresize = resizeVideoJS; // Call the function on resize 
    }); 
    </script> 

此代碼工作正常的一個視頻，但我怎麼做多個ID？正如你可以在我的開發網站看到的，我只是複製了三次以上的腳本（每個都有一個不同的ID），並且只會導致最後一個視頻變得流暢。

Answer 1

您覆蓋window.onresize（）每一次，所以只使用最後一個。 更換

window.onresize = resizeVideoJS 

有：

window.addEventListener("resize", resizeVideoJS, false); // all browsers except IE before version 9 

Answer 2

以下的作品。它確實涉及有點重複，我認爲，如果你使用像jQuery的deferred object等到ready事件被解僱所有的視頻播放器，你也許能夠避免的，但它是一個很大整潔不是複製大小調整方法目前工作：

<script type="text/javascript"> 

    var players = ['my_video_1', 'my_video_2', 'my_video_3']; 
    var aspectRatio = 9/16; 

    // Catch each of the player's ready events and resize them individually 
    // jQuery deferred might be a neater way to wait for ready on all components to load and avoid a bit of repetition 
    for (var i = 0; i < players.length; i ++) { 
     _V_('#' + players[i]).ready(function() { 
      resizeVideoJS(this); 
     }); 
    } 

    // Loop through all the players and resize them 
    function resizeVideos() { 
     for (var i = 0; i < players.length; i ++) { 
      var player = _V_('#' + players[i]); 
      resizeVideoJS(player); 
     }   
    } 

    // Resize a single player 
    function resizeVideoJS(player){ 
     // Get the parent element's actual width 
     var width = document.getElementById(player.id).parentElement.offsetWidth; 
     // Set width to fill parent element, Set height 
     player.width(width).height(width * aspectRatio); 
    } 

    window.onresize = resizeVideos; 

</script> 

Answer 3

我稍微修改net.uk.sweet的非常有用的答案以上至正常工作的腳本，它使用視頻JS多個視頻播放器的價格 - 這也是有求必應。你可以找到我的文章（這也說明了一個例子）這裏= http://www.andy-howard.com/videojsmultipleresponsivevideos/index.html

這也包括所提供的回調函數，如果你需要它。

Answer 4

// jQuery deferred might be a neater way to wait for ready 
// on all components to load and avoid a bit of repetition 
for (var i = 0; i < players.length; i ++) { 
    _V_('#' + players[i]).ready(function() { 
     resizeVideoJS(this); 
    }); 
} 

// Loop through all the players and resize them 
function resizeVideos() { 
    for (var i = 0; i < players.length; i ++) { 
     var player = _V_('#' + players[i]); 
     resizeVideoJS(player); 
    }   
} 

// Resize a single player 
function resizeVideoJS(player){ 
    // Get the parent element's actual width 
    var width = document.getElementById(player.id).parentElement.offsetWidth; 
    // Set width to fill parent element, Set height 
    player.width(width).height(width * aspectRatio); 
} 

window.onresize = resizeVideos; 

Answer 5

您可以使用CSS而不是JavaScript：

.wrapper { 
    width: 100%; 
} 

.video-js { 
    padding-top: 55.25%; 
} 

    <div class="wrapper">         
     <video id="video-player" width="auto" height="auto" class="video-js vjs-default-skin vjs-big-play-centered" data-setup="{}">           
     </video>         
    </div>