Question

你们过去一直都非常善于帮助我，我希望我们也能解决下一个问题。

我正在使用视频作为背景而不是图像来构建各种幻灯片。一切都很完美，除了视频的播放时间已关闭，因为即使隐藏了我的div，视频也同时播放。

所以，我需要的是一个JS / jQuery解决方案，当div被隐藏/显示时，停止（不停顿）并播放视频。到目前为止，这是我的代码：

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

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

1 个答案: