1

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

但不幸的是，我无法让它与两个视频一起使用，无论我尝试过什么，它总是只适用于其中一个。你知道我必须如何更改 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
});
4

1 回答 1

1

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

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

于 2013-06-04T21:04:44.233 回答