javascript - 在 DIV 上停止/播放显示/隐藏 HTML5 视频

Question

你们在过去都对我帮助很大，我希望我们也能解决下一个问题。

我正在使用视频而不是图像作为背景制作各种幻灯片。一切都运行良好，除了视频的时间是关闭的，因为即使我的 div 被隐藏，视频也在同时播放。

因此，我需要一个 JS/jQuery 解决方案来停止(而不是暂停)并在隐藏/显示 div 时播放视频。到目前为止，这是我的代码:

jsfiddle:http://jsfiddle.net/Z2Nq8/1/

JS:

$(function () {

var counter = 0,
    divs = $('#video1, #video2, #video3');

function showDiv () {
    divs.hide() 
        .filter(function (index) { return index == counter % 3; }) // figure out correct div to show
        .show(); 

    counter++;
}; 

showDiv();     

setInterval(function () {
    showDiv(); 
}, 7 * 1000);     
});

HTML:

`<div id="videocont">
    <div id="video1" class="display">
        <video autoplay loop poster="PHI.png" id="bgvid">
        <source src="URL/video.mp4" type="video/mp4">
        </video>
             <div id="title">Headline text.
        </div>
    </div>
    <div id="video2" class="display">
        <video autoplay loop poster="PHI.png" id="bgvid">
        <source src="URL/video.mp4" type="video/mp4">
        </video>
             <div id="title">Headline text.
        </div>
    </div>
    <div id="video3" class="display">
        <video autoplay loop poster="PHI.png" id="bgvid">
        <source src="URL/video.mp4" type="video/mp4">
        </video>
             <div id="title">Headline text.
        </div>
    </div>
</div>`

谢谢!

Answer 1

您可以自动播放所有视频。

在第一个元素上设置自动播放，然后在浏览视频时使用:

VideoElement.play()

和

VideoElement.pause()

如果您想重置视频，您可以执行以下操作:

VideoElement.currentTime = 0;

管理正在播放的视频。

Working Fiddle