Javascript 多个响应视频.js播放器

我正在使用这个解决方案，使videojs播放器流畅。我的问题是，当我有多个视频（每个视频都有一个唯一的id）时，我不知道如何才能做到这一点

这是我的开发网站，我有3个视频

以下是我为播放器编写的代码（来自上面Dave Rupert的解决方案）：

//一旦视频准备好
_V_（“#我的视频_1”）.ready（函数（）{
var myPlayer=this；//存储视频对象
var aspectRatio=9/16；//组成纵横比
函数resizeVideoJS（）{
//获取父元素的实际宽度
var width=document.getElementById（myPlayer.id）.parentElement.offsetWidth；
//设置填充父元素的宽度，设置高度
myPlayer.宽度（宽度）.高度（宽度*纵横比）；
}
resizeVideoJS（）；//初始化函数
window.onresize=resizeVideoJS；//在resize时调用函数
});

---

这段代码适用于一个视频，但如何处理多个ID？？？正如您在我的开发站点中看到的，我只是复制了上述脚本三次（每个脚本都有不同的id），这只会导致最后一个视频流畅。

每次都覆盖window.onresize（），因此只使用最后一个。 替换

与：

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

---

下面的工作。它确实涉及到一些重复，我认为如果您使用类似jQuery的方法等待所有视频播放器触发

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>

var players=['my_video_1'、'my_video_2'、'my_video_3']；
var aspectRatio=9/16；
//捕捉每个玩家的就绪事件并分别调整它们的大小
//jquerydeferred可能是一种更简洁的方法，可以等待所有组件上的ready加载，并避免一些重复
对于（变量i=0；i

我稍微修改了net.uk.sweet上面非常有用的答案，使之成为一个工作脚本，它可以处理使用video js的多个视频播放器，这些播放器同样具有响应能力。您可以在此处找到我的文章（其中还显示了一个示例）=

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

//jQuery deferred可能是等待ready的一种更简洁的方法
// 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;

//在所有组件上加载，避免重复
对于（变量i=0；i

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

.wrapper{
宽度：100%；
}  
.video js{
垫面：55.25%；
}

是的……这确实有助于调整所有三个玩家的大小。有没有想过如何整合js，使它不是重复3次的同一个脚本（它可以工作，但很难看&效率不高）？此链接将帮助您该链接现在提供404。

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

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