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

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

VideoJS响应两个视频

1 个答案: