我有一个视频,我想在页面加载时自动播放,并在页面结束时从特定点(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>