javascript - VideoJS响应两个视频

Question

我在一个页面上有两个视频，使用 VideoJS 实现。我想让它们响应并找到以下关于此主题的文章:Making Video.js Fluid for RWD

但不幸的是，我无法让它与两个视频一起工作，无论我尝试过什么，它总是只与其中一个视频一起工作。你知道我必须如何更改 javascript 代码才能使其与两个视频一起工作吗？我什至尝试创建两个函数并重命名所有变量。

这是我的示例 html:

<div class="videoWrapper">
    <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto"  poster="<?php echo get_bloginfo('template_url'); ?>/assets/videos/video1/spot_01_still.jpg" data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'>
        <source src="<?php echo get_bloginfo('template_url'); ?>/assets/videos/video1/spot_01.flv" type='video/flv'>
        <source src="<?php echo get_bloginfo('template_url'); ?>/assets/videos/video1/spot_01.mp4" type='video/mp4'>
    </video>
    <video id="my_video_2" class="video-js vjs-default-skin" controls preload="auto" poster="<?php echo get_bloginfo('template_url'); ?>/assets/videos/video2/spot_02_still.jpg" data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'>
        <source src="<?php echo get_bloginfo('template_url'); ?>/assets/videos/video2/spot_02.flv" type='video/flv'>
        <source src="<?php echo get_bloginfo('template_url'); ?>/assets/videos/video2/spot_02.mp4" type='video/mp4'>
    </video>
</div>

CSS:

.videoWrapper video {
max-width: 100% !important;
height: auto !important;
}

#my_video_1, 
#my_video_2 {
    width:100% ;
    height:auto ;
}

和 js:

 _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
});

Answer 1

我一直在编写一个脚本，该脚本使用视频 js 处理多个视频播放器 - 这也是响应式的。你可以在这里找到我的文章(也显示了一个例子)= http://www.andy-howard.com/videojsmultipleresponsivevideos/index.html

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