浏览器原生支持的视频需为H.264+AAC编码MP4，非Safari浏览器不支持H.265；应使用ffmpeg转码、控制分辨率、优化moov位置、添加muted/autoplay/playsinline等HTML属性、接入CDN并响应式适配，微信环境需手动触发播放。
视频文件格式和编码必须匹配浏览器原生支持
直接用 <video></video> 标签嵌入，但不是所有 MP4 都能播——很多所谓“高清 MP4”实际是 H.265（HEVC）编码，Safari 以外的主流浏览器（Chrome、Edge、Firefox）默认不支持。结果就是页面显示黑屏、控制栏灰掉，控制台报错 DOMException: The element has no supported sources。
实操建议：
- 用
ffmpeg转成 H.264 + AAC 编码：ffmpeg -i input.mp4 -c:v libx264 -crf 23 -c:a aac -b:a 128k output.mp4 - 分辨率别盲目堆高：商品页视频建议 1080p（1920×1080）或 720p（1280×720），再高加载慢、首帧延迟明显
- 导出时勾选 “Web optimized” 或 “Streaming” 选项（如用 HandBrake），确保 moov atom 在文件开头，否则 Safari 可能卡在 loading 状态
HTML 标签要加关键属性，否则移动端失效
只写 <video src="xxx.mp4"></video> 在 iOS 和安卓微信内置浏览器里大概率静音且无法自动播放——系统强制要求用户手势触发。必须显式声明行为策略。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
<video controls muted autoplay loop playsinline preload="metadata" poster="poster.jpg"> <source src="product.mp4" type="video/mp4"> </video>
各属性作用：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
muted：绕过移动端静音限制，是autoplay生效的前提 -
playsinline：iOS 上防止全屏跳转，保持视频嵌在详情页流内 -
preload="metadata"：只预加载尺寸、时长等元信息，不拉整个视频，加快首屏渲染 -
poster：指定封面图，视频加载中/失败时展示，提升用户体验
CDN 加速和响应式适配不能靠 CSS 强撑
把视频放在本地 /static/video/ 下，用相对路径引用，上线后必然卡顿。商品页流量高峰时，源站带宽打满，视频请求超时，控制台频繁出现 net::ERR_CONNECTION_TIMED_OUT。
必须做两件事：
- 上传到 CDN（如 Cloudflare Stream、阿里云 OSS + CDN、腾讯云 VOD），用绝对 HTTPS 地址：
https://cdn.example.com/videos/product-1080.mp4 - 用
<source></source>提供多分辨率版本，配合media属性做响应式切换：<source src="product-720.mp4" type="video/mp4" media="(max-width: 768px)"></source><source src="product-1080.mp4" type="video/mp4" media="(min-width: 769px)"></source> - 避免用
width/height固定尺寸；改用 CSS 控制容器最大宽度：video { max-width: 100%; height: auto; }
微信内嵌浏览器要额外处理自动播放逻辑
即使加了 muted 和 autoplay，微信 iOS 客户端仍可能拦截自动播放。这不是 bug，是微信 WebView 的策略限制。
兜底方案（仅限微信环境）：
- 监听
document.addEventListener('WeixinJSBridgeReady', ...)或检查typeof WeixinJSBridge !== 'undefined' - 在用户第一次触摸屏幕后（如点击任意区域），主动调用
video.play()，并用.catch(e => console.warn('play failed:', e))捕获拒绝原因 - 不要依赖
setTimeout延迟播放——微信会判定为非用户触发，依旧失败
真正麻烦的是：不同微信版本策略微调，有时需要同时监听 DOMContentLoaded 和 WeixinJSBridgeReady 才能覆盖全量机型。
