当我自动播放 HTML5 视频时，我无法从特定点循环播放答案

【问题标题】：When I autoplay an HTML5 video, I can't loop it from a specific point当我自动播放 HTML5 视频时，我无法从特定点循环播放
【发布时间】：2018-01-30 00:57:20
【问题描述】：

我有一个视频，我想在页面加载时自动播放，并在结束时从特定点（16 秒）循环播放。如果我在 HTML 中添加“自动播放”，则视频根本不会循环播放。如果我在 HTML 中添加“循环”，视频会循环但忽略 EventListener。如果我不添加循环或自动播放并手动播放视频，它会像我想要的那样循环播放 16 秒。

如何让我的视频在页面加载时自动播放并在 16 秒时循环播放？以下是我的代码：

	  document.getElementById('video1').addEventListener('ended', function(){
		this.currentTime = 16; 
		this.play();
		}, false);

			<video id="video1" width="100%" autoplay  >
			<source src="video1.webm" type="video/webm">			  
		  </video>

【问题讨论】：

标签： javascript html video

【解决方案1】：

当我将代码放在 head 标记而不是底部时，我设法重现了您遇到的问题。我的测试看起来像这样：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>html video</title>
  </head>

  <body>
    <div >
        <video id="video1" width="100%" autoplay controls>
            <source src="test2.webm" type="video/webm">           
        </video>
    </div>
  </body>
  <script>
        document.getElementById('video1').addEventListener('ended', function(){
                this.currentTime = 16; 
                this.play();
        }, false);
    </script>
</html>

【讨论】：

就是这样！无法相信修复如此简单。我读到 javascript 不应该放在顶部（我把它放在身体的顶部）但我不明白它实际上会影响事情，我想我会把它全部放在底部。
原因是因为 javascript 在 <video> 被实例化之前就被激活了，所以该函数没有什么可以注册的