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>

此代码适用于一个视频，但我如何做多个ID ???正如您在我的开发站点中看到的，我只是将上面的脚本复制了三次（每个都有不同的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

with：

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

Answer 3

以下作品。它确实涉及一些重复，我认为你可以避免使用像jQuery＆＃39; 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 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

我已经将net.uk.sweet上面非常有用的答案修改为一个工作脚本，该脚本处理使用视频js的多个视频播放器 - 这也是响应式的。你可以在这里找到我的文章（也展示了一个例子）= http://www.andy-howard.com/videojsmultipleresponsivevideos/index.html

如果需要，还包括提供的回调函数。

多个响应式video.js播放器

5 个答案: