多个响应式video.js播放器

Question

我正在使用这个解决方案，http://daverupert.com/2012/05/making-video-js-fluid-for-rwd/，来使videojs播放器流畅。我的问题是，当我有多个视频(每个视频都有一个唯一的id)时，我不确定如何工作。

这是我的开发网站，上面有3个视频，http://tweedee.e-mediaresources.info/

下面是我为该播放器编写的代码(来自上面Dave Rupert的解决方案)：

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

这段代码可以很好地处理一个视频，但我如何做多个I？正如你在我的dev站点上所看到的，我只是将上面的脚本复制了三次(每次都有一个不同的id)，这只会导致最后一个视频变得流畅。

Answer 1

您可以使用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>

Answer 2

您每次都会重写window.onresize()，因此只使用最后一个。替换

window.onresize = resizeVideoJS 

通过以下方式：

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

Answer 3

以下是有效的方法。它确实涉及到一些重复，我认为如果你使用像jQuery的deferred object这样的东西来等待所有视频播放器的ready事件被触发，那么你可能能够避免重复，但它比你现在正在做的复制resize方法要整洁得多：

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