如何用网页看html5格式的视频

html5视频播放成败取决于编码（h.264+aac）而非.mp4后缀，需用ffprobe验证；本地测试须起http服务（如python3 -m http.server）；ios自动播放必须加muted属性。

浏览器直接打开 .mp4 文件就能播，但得确认编码是否支持

HTML5 视频播放成败不取决于文件后缀（.mp4），而在于内部编码：必须是 H.264（视频） + AAC（音频）。很多用 FFmpeg 或剪辑软件导出的“MP4”实际用了 AV1 或 HEVC，浏览器会静音、卡顿甚至只显示黑屏——不是网页写错了，是解码器压根不认。

• 用 ffprobe your-video.mp4 查编码：Stream #0:0 行里找 h264，Stream #0:1 找 aac
• Chrome / Edge / Safari 对 H.264 支持最稳；Firefox 默认不支持 HEVC，哪怕文件是 .mp4 也会失败
• 别信“右键 → 用浏览器打开”——某些系统会调用旧版 Edge（IE 内核），直接换 Chrome 地址栏输入 file:///path/to/video.mp4 测试更准

<video></video> 标签里加 controls 和 preload="metadata" 是底线配置

光写 <video src="a.mp4"></video> 很可能没反应：没控件用户不知道能点，没预加载浏览器连时长都读不出来，部分安卓 WebView 甚至直接不触发加载。

• 必须加 controls 属性，否则默认隐藏所有 UI（包括播放按钮）
• preload="metadata" 让浏览器只拉视频头信息（时长、宽高），比 auto 省流量，比 none 更快出进度条
• 如果视频在本地文件系统（file:// 协议），Safari 会拒绝加载，必须起个本地服务（python3 -m http.server）再用 http://localhost:8000 访问

跨域或路径错一个字符，控制台就报 ERR_BLOCKED_BY_CLIENT 或 MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED

错误信息看着吓人，但 80% 是路径问题：src 值写成相对路径却没放对位置，或者服务器没配 MIME 类型。浏览器不会弹提示框，只在开发者工具 Console 里埋错误。

KesionEshop 在线商城系统 X1.0.150526（utf-8)

KesionCMS是漳州科兴信息技术有限公司开发的一套万能建站产品，是CMS行业最流行的网站建设解决方案之一。最新版X1.0把主系统及一些辅助系统模块化开发，前后台UI采用HTML5全新架构，方便随时删除（隐藏）安装所需要的模块。应广大用户群体建议，此次版本改动所有涉及编辑器和视频播放的模块，全部采用百度编辑器(ueditor)及ckplayer视频播放器，改进后的视频(flv,mp4等格式视频)

下载

• src 用相对路径时，检查当前 HTML 文件所在目录——比如 HTML 在 /page/index.html，视频在 /assets/vid.mp4，就得写 src="../assets/vid.mp4"，不是从网站根目录算
• 用 curl -I http://yoursite.com/vid.mp4 看响应头：必须有 Content-Type: video/mp4，没有的话 Nginx 需加 types { video/mp4 mp4; }
• Chrome 控制台报 ERR_BLOCKED_BY_CLIENT 多半是广告拦截插件干的，关掉插件试试；MEDIA_ERR_SRC_NOT_SUPPORTED 则优先查编码和 MIME 类型

移动端自动播放要加 muted，否则 iOS Safari 直接无视 autoplay

iOS Safari 把自动播放当骚扰，除非视频静音，否则 autoplay 属性形同虚设。Android 各家浏览器策略不一，但加 muted 是最省事的兼容方案。

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

• <video autoplay muted loop></video> 才能在 iOS 上自启；去掉 muted 就等用户手动点
• 想播完自动静音再开声？不行。iOS 不允许 JS 在未交互前提下调用 video.muted = false
• 如果必须带声自动播，唯一办法是引导用户第一次点击页面任意位置，再用 JS 调 play() ——但得确保用户真点了，否则 Promise 会 reject