html5如何循环播放_设置HTML5视频音频循环播放【视频】

HTML5视频或音频可通过loop属性、JavaScript动态控制、ended事件监听、autoplay+muted组合及属性验证五种方式实现循环播放，其中loop属性最简捷，移动端需注意兼容性。

如果您希望HTML5视频或音频在播放结束后自动从头开始，可以利用原生的loop属性实现循环播放。以下是多种设置循环播放的具体方法：

一、使用loop属性直接启用循环

HTML5的<video></video>和<audio></audio>元素均支持布尔型loop属性，添加后浏览器会在媒体播放完毕时立即重新加载并播放首帧。

1、在<video></video>标签中添加loop属性：<video src="example.mp4" loop></video>。

2、在<audio></audio>标签中添加loop属性：<audio src="sound.mp3" loop></audio>。

立即学习“前端免费学习笔记（深入）”；

3、该属性无需赋值，写入loop即表示启用循环，不写则默认禁用。

二、通过JavaScript动态控制循环状态

当需要根据用户交互或逻辑条件切换循环模式时，可通过DOM操作修改loop属性值，实现运行时启停。

1、获取视频元素：const video = document.querySelector('video');。

2、启用循环：video.loop = true;。

3、禁用循环：video.loop = false;。

4、修改loop属性后无需调用load()或play()，变更会立即生效于下一次循环触发点。

三、监听ended事件手动重置播放位置

在某些浏览器或特殊格式下，loop属性可能受限（如部分移动端Safari对loop的支持不稳定），此时可监听ended事件并手动跳转到起始时间点。

标签： javascript java html html5 浏览器 safari red