多个响应式 video.js 播放器 [英] Multiple responsive video.js players

问题描述

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

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

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

此代码适用于一个视频，但我该如何处理多个 ID????正如您在我的开发站点中看到的，我只是将上面的脚本复制了 3 次(每次都有不同的 id)，这只会导致最后一个视频变得流畅.

解决方案

你可以使用 css 而不是 javascript :

.wrapper {宽度:100%；}.video-js {填充顶部:55.25%；}<div class="wrapper"><video id="video-player" width="auto" height="auto" class="video-js vjs-default-skin vjs-big-play-centric" data-setup="{}"></视频>

I'm using this solution, http://daverupert.com/2012/05/making-video-js-fluid-for-rwd/, to make the videojs player fluid. My problem is when I have multiple videos (each with a unique id), I'm not sure how to make this work.

Here is my dev site I have 3 videos on, http://tweedee.e-mediaresources.info/

Here is the code I have for the player (from Dave Rupert's solution above):

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

This code works fine for one video, but how do I do multiple ids??? As you can see in my dev site, I just replicated the script above three times (each with a different id) and that only causes the last video to be fluid.

解决方案

you can use css rather than 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>

这篇关于多个响应式 video.js 播放器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！