Слайд-шоу с видео и изображениями с помощью Videojs и Flexslider

Question

Я использую flexslider для воспроизведения слайд-шоу на веб-странице для клиента. Я хотел бы, чтобы один из слайдов был видео, которое должно прекратиться при изменении слайда. Я новичок в JS и JQuery. Я пробовал несколько вещей, но это либо видео продолжает играть, пока не находится в фокусе, либо слайд-шоу перестает работать.

Я сделал эту скрипку http://jsfiddle.net/RaulMv/d4Xvb/, используя источник с этой страницы http://www.briancribb.com/demo/flexslider_demos/test04.html

Это сценарий: «использовать строгий»;

var myPlayer; 
var currentVidID; 
var myVids = new Array(); 

$(document).ready(function() { 

$('.slides > li > video').each(function(i) { 
    currentVidID = $(this).attr('id'); 
    console.log('ready(): currentVidID = ' + currentVidID); 
    if (i==0) { 
     videojs(currentVidID).ready(function(){ 
      console.log("VideoJS is ready. First player."); 
      myPlayer = this; // Initialized to the first player. 
     }); 
    } else { 
     videojs(currentVidID).ready(function(){ 
      console.log("VideoJS is ready. Next player."); 
     }); 
    } 
}); 


$('#testSlider04').flexslider({ 
    animation: "slide",    //String: Select your animation type, "fade" or "slide" 
    animationLoop: true,   //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end 
    slideshow: false,    //Boolean: Animate slider automatically 
    slideshowSpeed: 7000,   //Integer: Set the speed of the slideshow cycling, in milliseconds 
    animationSpeed: 600,   //Integer: Set the speed of animations, in milliseconds 
    initDelay: 0,     //{NEW} Integer: Set an initialization delay, in milliseconds 
    randomize: false,    //Boolean: Randomize slide order 
    before: function(){    //Callback: function(slider) - Fires asynchronously with each slider animation 
     currentVidID = $('.flex-active-slide > .video-js').first().attr('id'); 
     myPlayer = videojs(currentVidID); // Setting to the currently viewed player. We might not be on the first video when this is called. 
     if(!myPlayer.paused()) { 
      myPlayer.pause(); 
      console.log(currentVidID + " is supposed to pause now."); 
     }  
    } 
}); 



}); 

Обратите внимание, что он работает на этой странице с несколькими видео, но не с видео и изображениями.

Есть ли способ сделать видео останавливается, когда слайд изменяется с использованием видео и изображений в одно и то же время?

Answer 1

Я уже исправил проблему. Мне нужно создать функцию, которая фактически останавливает видео до появления следующего слайда.

Вот код:

var myPlayer = videojs("example_video_1"); 

$(document).ready(function() { 


$('#testSlider04').flexslider({ 
    animation: "slide",    //String: Select your animation type, "fade" or "slide" 
    animationLoop: true,   //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end 
    slideshow: false,    //Boolean: Animate slider automatically 
    slideshowSpeed: 7000,   //Integer: Set the speed of the slideshow cycling, in milliseconds 
    animationSpeed: 600,   //Integer: Set the speed of animations, in milliseconds 
    initDelay: 0,     //{NEW} Integer: Set an initialization delay, in milliseconds 
    randomize: false,    //Boolean: Randomize slide order 
    before: function(){    //Callback: function(slider) - Fires asynchronously with each slider animation 
     videojs("example_video_1").ready(function(){ 
     // EXAMPLE: Pause the video. 
     myPlayer.pause(); 
     }); 
    } 
}); 
}); 

Вот рабочая скрипку http://jsfiddle.net/RaulMv/4KtkL/