Question

我正在使用flexslider在客户端的网页上播放幻灯片。我想其中一张幻灯片是一个视频，当幻灯片改变时应停止播放。我是JS和JQuery的新手。我尝试了几件事，但要么是视频继续播放而不是焦点或幻灯片停止工作。

中的来源制作了这个小提琴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/

使用Videojs和Flexslider进行视频和图像的幻灯片放映

1 个答案: