多个响应式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>

这段代码适用于一个视频,但我怎么做多个ids ??? 正如你在我的开发站点中看到的那样,我只是将上面的脚本复制了三次(每个都有不同的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>