Question

如何在滑出（或显示）时启动视频并在滑出（或隐藏）时停止播放，并且当幻灯片继续循环时重复该过程？

我基本上有以下幻灯片：

    <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden;">
        <div data-p="112.50" style="display: none;">
            <img data-u="image" src="img/02.jpg" />
        </div>
        <div data-p="112.50" style="display: none;">
            <img data-u="image" src="img/04.jpg" />
        </div>
        <div data-p="112.50" style="display: none;">
            <img data-u="image" src="img/05.jpg" />
        </div>
        <div data-p="112.50" style="display: none;">
            <img data-u="image" src="img/09.jpg" />
        </div>
       <div data-p="112.50" idle='10000' style="display: none;">
            <video id='video1' width="600" height="300" autoplay>
                <source src="img/video1.mp4" type="video/mp4">                                
            </video>             
        </div>
    </div>

即使在滑出时，视频也会继续播放并显示另一张图像。

我希望基本上做的是当幻灯片移动到幻灯片中的下一个索引时停止播放视频，并在视频再次显示时从头开始。

我也尝试过这样的事情：

function OnSlidePark(slideIndex, fromIndex) {
    var myVideo = document.getElementById("video1"); 
    if (slideIndex == 4)
    {
        setTimeout(function()
        {
        console.log('Playing');
        myVideo.play();            
        },2000); //to make sure the video is fully displayed
    }
    else if (fromIndex == 4)
    {
       console.log('Paused');   //but what I really want is "Stop" or reset from the beginning of the video but at a pause until play() is called or the video is shown again.
       myVideo1.pause();

}
}

console.log播放和暂停显示并正确触发，开始和暂停都不起作用。

让我澄清一下＆＃34;开始＆＃34;要求。它似乎有点开始，但它只是保持不动或显示黑屏，但这可能是因为视频以黑屏开始，它可能只是暂停？如果我通过显示控件手动启动视频，它实际上播放，它只是暂停＆＃34;暂停＆＃34;方法被称为。

我还在幻灯片容器外添加了一个视频，当$ JssorSlider $。$ EVT_PARK被调用时，视频正常启动和暂停。

无论如何，当视频从循环幻灯片再次轮到时，我需要停止视频并暂停播放。

提前致谢。

Answer 1

我最终使用了这个活动：

$ $ JssorSlider。$ EVT_STATE_CHANGE

for when：

if（progress == idleBegin）播放视频。

然而，暂停，我无法解决这个问题：

if（progress == idleEnd）

相反，在progress == idlBegin条件中，我必须设置一个超时，以便在空闲完成之前运行pause（）命令。

JSSOR - 如何自动播放和停止视频

1 个答案: