0

我正在使用 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.");
        }       
    }
});



});

请注意，它适用于包含多个视频的页面，但不适用于视频和图像。

当幻灯片同时使用视频和图像更改时，有没有办法让视频停止？

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 回答