在 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;

管理正在播放的视频。

工作小提琴