当我自动播放HTML5视频时,我无法从特定点循环播放它



我有一个视频,我想在页面加载时自动播放,并在页面结束时从特定点(16秒(循环播放。 如果我在 HTML 中添加"自动播放",视频根本不会循环播放。如果我在 HTML 中添加"循环",视频会循环但忽略事件侦听器。 如果我不添加循环或自动播放并手动播放视频,它会像我想要的那样在 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>

当我将代码放在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>

最新更新