Videojs 및 Flexslider를 사용한 비디오 및 이미지 슬라이드 쇼

Question

저는 flexslider를 사용하여 클라이언트의 웹 페이지에서 슬라이드 쇼를 재생하고 있습니다. 슬라이드 중 하나가 슬라이드가 변경 될 때 중지되어야하는 비디오가되고 싶습니다. 나는 JS와 JQuery에 대해 상당히 새로운 것이다. 여러 가지 시도를했지만 초점이 맞지 않거나 슬라이드 쇼가 작동하지 않는 동안 동영상이 계속 재생됩니다.

나는이 스크립트입니다 http://www.briancribb.com/demo/flexslider_demos/test04.html

이 페이지에서 소스를 사용하여이 바이올린 http://jsfiddle.net/RaulMv/d4Xvb/ 만든

: 는 "엄격한 사용을";

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/