html中video属性详解_html5视频静音与循环设置-html教程-PHP中文网

loop属性必须写为布尔属性（如或videoEl.loop=true），autoplay+loop必须配合muted才能生效，iOS上loop常失效，需用ended事件手动重播并真机测试。

html中video属性详解_html5视频静音与循环设置

直接加 loop 和 muted 就能实现静音循环播放，但浏览器是否真按你写的执行，得看属性写法、加载时机、设备类型——尤其 iOS 上，loop 常被静音策略连带失效。

loop 属性必须写成布尔属性，不能赋值

loop 是原生布尔属性，只认“有没有”，不认“值是什么”。写成 loop="true"、loop="1" 或 loop=""（空字符串）在部分浏览器里可能意外生效，但不可靠；写成 loop="false" 则完全无效——浏览器根本不解析这个值。

正确写法只有两种：

<video loop></video>（静态启用）
videoEl.loop = true（JS 动态启用，注意必须是布尔值 true，不是字符串）

常见错误是用 setAttribute('loop', 'true')，这只会把属性当字符串塞进 DOM，videoEl.loop 读出来仍是 false。

autoplay + loop 必须配 muted，否则大概率被拦截

Chrome、Firefox、Edge、Safari 全部要求：自动播放（autoplay）的视频，若带声音，会被静默阻止。即使写了 loop，只要没 muted，autoplay 根本不会触发，自然也轮不到循环。

所以背景视频这类场景，必须三者共存：

autoplay：触发初始播放
muted：绕过自动播放限制
loop：让结尾跳回开头

额外建议加上 playsinline（iOS Safari 防止全屏）、preload="metadata"（减少首帧等待），避免白屏卡顿。

iOS Safari 上 loop 可能不工作，ended 事件是兜底方案

iOS Safari 对 loop 的支持不稳定，尤其在微信内置浏览器或某些 WebView 中，即使加了 muted 和 autoplay，视频播完也可能停在末帧不动。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

此时监听 ended 事件手动重播更可靠：

const video = document.querySelector('video');
video.addEventListener('ended', () => {
  video.currentTime = 0;
  video.play().catch(e => console.warn('自动重播被阻止:', e));
});

注意两点：

video.play() 返回 Promise，失败时会 reject，需 catch 处理（比如用户未交互过，iOS 可能拒绝后续 play()）
不要在 ended 里只设 currentTime = 0 就结束，不调 play() 视频不会继续

JS 动态切换 loop 状态，不会中断当前播放周期

如果视频正在播放中执行 video.loop = false，它不会立刻停止，而是等当前这一遍播完才退出循环；同理，video.loop = true 也不会让已暂停的视频自动恢复。

想立刻生效，得配合其他操作：

关闭循环并立即停在末尾：video.loop = false; video.pause();
开启循环后强制重播：video.loop = true; video.currentTime = 0; video.play();

另外，video.loop 的值和元素是否有 loop 属性不一定同步——比如用 JS 设置 video.loop = true，video.hasAttribute('loop') 仍返回 false，因为属性没写进 HTML。判断是否生效，应以 video.loop 的布尔值为准。

真正难的不是写对属性，而是验证它在各种设备上是否真在循环：iOS 微信、Android Chrome、旧版 Edge……每个环境都可能悄悄忽略 loop。上线前务必在真机上测 ended 事件是否触发、重播是否无缝、静音按钮能否正常开关。