VideoJS отзыв 2 видео

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

Это также включает предоставленную функцию обратного вызова, если она вам нужна.