2

我正在使用此解决方案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 ？？？正如您在我的开发站点中看到的那样，我只是将上面的脚本复制了 3 次（每次都有不同的 id），这只会导致最后一个视频变得流畅。

4

5 回答 5

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>
于 2014-03-25T22:21:57.840 回答
2

以下作品。它确实涉及一些重复，我认为如果您使用 jQuery 的延迟对象之类的东西来等待所有视频播放器触发事件​​，我认为您可能可以避免这种情况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>
于 2013-01-22T13:13:44.280 回答
2

您每次都覆盖 window.onresize() ，因此只使用最后一个。代替

window.onresize = resizeVideoJS

和 ：

 window.addEventListener("resize", resizeVideoJS, false); // all browsers except IE before version 9
于 2013-01-21T18:25:22.390 回答
1 
// 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;
于 2014-01-16T06:36:57.747 回答
0

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

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

于 2013-06-04T21:07:56.840 回答