全部分类
落雪吖_4109
2026-04-10
223人浏览
原创
浏览器仅原生支持.mp4(h.264+aac)、.webm(vp8/vp9+opus/vorbis)、.ogg(theora+vorbis)三种容器,其余如.mkv、.avi等被直接忽略;编码须与容器严格匹配,且顺序、mime类型、服务器content-type、autoplay/muted/playsinline等均影响实际播放。
只推荐以下三种,其余基本可视为不支持:
.mp4
.webm
.ogg
.ogv
❌ 明确不支持:.mkv、.avi、.mov(即使 H.264 编码)、.flv、.ts —— 这些不是“播放失败”,而是直接被浏览器忽略或报 DOMException: The element has no supported sources
.mkv
.avi
.mov
.flv
.ts
DOMException: The element has no supported sources
光有 .mp4 后缀不够,H.264 是 MP4 容器里唯一被所有浏览器无条件接受的视频编码;AAC 是配套音频编码。如果用 MP4 容器塞入 AV1 或 HEVC 编码,Safari 可能播(需 macOS/iOS 系统级支持),但 Chrome 和 Firefox 默认不认。
同理:.webm 必须配 VP8/VP9 + Opus/Vorbis;.ogg 必须配 Theora + Vorbis —— 混搭会静音、卡顿或直接黑屏。
验证方式很简单:用 ffprobe video.mp4 查看输出里的 codec_name 和 codec_type,别只看后缀。
ffprobe video.mp4
codec_name
codec_type
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
浏览器按 <source></source> 出现顺序,逐个检查 type 属性是否匹配其内置解码能力,一旦匹配就停止解析后续 <source></source>。所以顺序很重要:
<source></source>
type
type="video/mp4"
type="video/webm"
video/x-matroska
另外注意:服务器必须返回正确的 Content-Type 响应头,否则即使 type 写对了,Chrome 也可能拒绝加载(尤其本地开发时用 file:// 协议会触发 CORS+MIME 双重拦截)。
Content-Type
iOS Safari 和 Android Chrome 对 autoplay 极其严格:没加 muted 就算写了 autoplay,也会静音且暂停;加了 muted 也未必播——还得用户有过交互(比如点击页面),否则 iOS 直接无视。
autoplay
muted
还有个容易被忽略的点:playsinline 属性在 iOS 上不是可选,是必需。没有它,视频会在全屏播放器里打开,退出后不会自动恢复页面上下文。
playsinline
最后提醒一句:别指望用 canPlayType() 判断“能不能播”,它只查 MIME 类型声明和容器支持,不校验编码是否真能解。真实播放失败往往发生在 loadeddata 或 canplay 之后,甚至第一帧渲染时才暴露问题。
canPlayType()
loadeddata
canplay
前端入门到VUE实战笔记:立即使用 在学习笔记中,你将探索 前端 的入门与实战技巧!
相关文章
如何在HTML标签中设置图片与文字对齐
如何实现 CSS Grid 中行的平滑折叠与展开动画
如何掌握HTML新手开发常用技巧
HTML登录框怎么随着窗口缩放居中
如何修复应用 matrix3d 变换后 div 无法滚动的问题
PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!
相关标签:
本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
上一篇:如何在 HTML 中自动为文件名中的作者和年份添加颜色高亮
下一篇:HTML CORS能替代跨域请求吗_HTML CORS和跨域请求原理【详解】
作者最新文章
HTML时间输入框表单提交流程
HTML网页中通过修改details标签实现多主题切换
如何使用HTML图片资源管理提高维护效率
HTML音频兼容旧浏览器处理方法
如何修改HTML lang属性切换页面语言
HTML标签属性中隐藏的安全漏洞怎么查
快速上手HTML网页常见安全漏洞排查实战
HTML全局属性在不同内核浏览器中的表现
为什么要从一开始就重视HTML语义化标签?
如何通过HTML解析引擎按标签名称筛选节点
热门AI工具
Seko
切问学术
PixTV
讯飞智作
咔片AIPPT
DeepSeek
LibLibAI
豆包大模型
相关专题
html版权符号是“©”,可以在html源文件中直接输入或者从word中复制粘贴过来,php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。
2023.06.14
5595
7
html在线编辑器是用于在线编辑的工具,编辑的内容是基于HTML的文档。它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方,是Web应用的常用模块之一。php中文网为大家带来了html在线编辑器的相关教程、以及相关文章等内容,供大家免费下载使用。
2023.06.21
3192
4
html网页制作是指使用超文本标记语言来设计和创建网页的过程,html是一种标记语言,它使用标记来描述文档结构和语义,并定义了网页中的各种元素和内容的呈现方式。本专题为大家提供html网页制作的相关的文章、下载、课程内容,供大家免费下载体验。
2023.07.31
2850
5
html空格是一种用于在网页中添加间隔和对齐文本的特殊字符,被用于在网页中插入额外的空间,以改变元素之间的排列和对齐方式。本专题为大家提供html空格的相关的文章、下载、课程内容,供大家免费下载体验。
2023.08.01
2879
HTML是一种标准标记语言,用于创建和呈现网页的结构和内容,是互联网发展的基石,为网页开发提供了丰富的功能和灵活性。本专题为大家提供html相关的各种文章、以及下载和课程。
2023.08.11
4719
6
在网页设计中,字体大小的选择是至关重要的。合理的字体大小不仅可以提升网页的可读性,还能够影响用户对网页整体布局的感知。php中文网将介绍一些常用的方法和技巧,帮助您在HTML中设置合适的字体大小。
2821
3
html转txt的方法有使用文本编辑器、使用在线转换工具和使用Python编程。本专题为大家提供html转txt相关的文章、下载、课程内容,供大家免费下载体验。
2023.08.31
2629
html文本框代码:1、单行文本框【<input type="text" style="height:..;width:..;" />】;2、多行文本框【textarea style=";height:;"></textare】。
2023.09.01
2348
HTML嵌入CSS样式的方法有内联样式、内部样式表和外部样式表。本专题为大家提供CSS样式相关的文章、下载、课程内容,供大家免费下载体验。
2023.09.20
2368
热门下载
相关下载
精品课程
共0课时 | 0人学习
共1课时 | 219人学习
共6课时 | 54.6万人学习
共89课时 | 133.4万人学习
共49课时 | 82.2万人学习
共22课时 | 2.4万人学习
共31课时 | 3.4万人学习
共28课时 | 4.4万人学习
最新文章