0

flexslider を使用して、クライアントの Web ページでスライドショーを再生しています。スライドの 1 つを、スライドが変わると停止するビデオにしたいと考えています。私は 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.");
        }       
    }
});



});

そのページでは複数のビデオが含まれていますが、ビデオや画像では機能しないことに注意してください。

ビデオと画像を同時に使用してスライドが変更されたときにビデオを停止させる方法はありますか?

4

1 に答える 1

2

私はすでに問題を修正しました。次のスライドが表示される前にビデオを実際に停止する関数を作成するために必要です。

コードは次のとおりです。

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/

于 2013-08-09T16:16:18.143 に答える