HTML5如何在播放结束时暂停视频循环？

Question

如何在几秒钟内停止视频循环？ 这是我的HTML代码

 <video poster="images/banner-bg.jpg" id="bgvid" playsinline autoplay muted loop>
    <source src="vid/MM_Logo_Identity.mp4" type="video/mp4" id="bgvid1">
    </video>

脚本

document.getElementsByTagName('source').addEventListener('ended',myHandler,false);
function myHandler(e) {
    console.log('ended');
    setTimeout(function(){
        document.getElementsByTagName('source').play();
    }, 9000);
}; 

Answer 1

您可以删除loop属性，如下所示：

<video poster="images/banner-bg.jpg" id="bgvid" playsinline autoplay muted>
    <source src="vid/MM_Logo_Identity.mp4" type="video/mp4" id="bgvid1">
</video>

Answer 2

试试这段代码，它对您有用。

document.getElementsByTagName('source').addEventListener('ended', function() { 
   this.currentTime = 1; 
}, false);

Answer 3

正如一些评论所提到的，您可以删除循环属性以使其停止循环。您可以将其保留在 HTML 代码中，然后在您想停止循环时将其删除。

<video poster="images/banner-bg.jpg" id="bgvid" playsinline autoplay muted loop>
    <source src="vid/MM_Logo_Identity.mp4" type="video/mp4" id="bgvid1">
</video>

// after 9 seconds, stop looping the video
setTimeout(function(){
    const video = document.getElementById('bgvid');
    video.removeAttribute("loop");

    // optional: go back to the poster image when the video completes
    video.removeAttribute("autoplay"); // remove autoplay too so it doesn't start again
    video.addEventListener('ended', function() { video.load(); });
}, 9000);