【问题标题】:JSSOR - how to autoplay and stop a videoJSSOR - 如何自动播放和停止视频
【发布时间】:2016-05-07 21:21:54
【问题描述】:

如何在滑到(或显示)时开始视频,在滑出(或隐藏)时停止视频,当幻灯片继续循环播放时如何重复该过程?

我基本上有以下幻灯片:

    <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 Playing 和 Paused 正确显示和触发,start 和 pause 不起作用。

让我澄清一下“开始”的说法。看起来它有点开始但它只是保持静止或显示黑屏但这可能是因为视频以黑屏开始并且它可能只是暂停?如果我通过显示控件手动启动视频,它实际上会播放,只是在调用“暂停”方法时不会暂停。

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

无论如何,当视频从循环幻灯片再次轮到时,我需要停止视频而不是暂停并从头开始播放。

提前致谢。

【问题讨论】:

    标签: javascript slider jssor


    【解决方案1】:

    我最终使用了这个活动:

    $JssorSlider$.$EVT_STATE_CHANGE

    什么时候:

    if(progress == idleBegin) 播放视频。

    然而,暂停一下,我无法触发这个:

    如果(进度 == idleEnd)

    相反,在 progress==idlBegin 条件中,我必须设置一个超时时间才能在空闲结束之前运行 pause() 命令。

    【讨论】:

    • 嗯..我说得太早了。上述解决方案仅适用于 Firefox 和 IE。它不适用于 Chrome。
    • 你找到解决办法了吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-07-18
    • 2015-03-04
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多