当前位置: 首页 > news >正文

HTML5支持的视频文件格式和音频文件格式有哪些?

在 HTML5 标准中, 我们有了新的 和 标签, 分别可以引入视频和音频文件的标签

那么这些标签又可以支持哪些文件格式呢 ?

格式支持

视频文件格式

MP4:MPEG-4 Part 14,支持H.264编码。几乎所有的浏览器都支持该格式。

WebM:谷歌开发的格式,使用VP8或VP9编码,可以在大多数现代浏览器中播放

Ogg:开放媒体格式,使用Vorbis编码,可以在大多数现代浏览器中播放。

音频文件格式

MP3:MPEG-1或MPEG-2 Audio Layer III,可以在几乎所有的浏览器中播放。

AAC:Advanced Audio Coding,可以在大多数现代浏览器中播放。

Ogg:开放媒体格式,使用Vorbis编码,可以在大多数现代浏览器中播放。

WAV:Waveform Audio File Format,可以在几乎所有的浏览器中播放,但文件较大,不适合在网络上播放。

如何处理兼容

基础使用

● 只要使用 video 标签的 src 属性引入对应的文件地址即可

兼容使用

● 当我不确定当前浏览器支持哪一个格式的文件的时候

● 可以使用兼容模式

○ 不在 video 标签上添加 src 属性

○ 而是直接在 video 标签对内书写 source 标签来引入多种格式的文件

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持播放当前视频, 请更换浏览器再试 O(∩_∩)O~
</video>

○ 优先尝试第一个 source 标签的文件引入, 如果浏览器支持, 那么后续不在引入

○ 如果浏览器不支持, 那么开始尝试第二个 source 标签的文件

○ 以此类推, 如果所有 source 标签的内容都不支持

○ 那么就显示最后的那一行文本

● 这样我们的兼容问题就解决了

○ audio 标签也是同样一个道理

浏览器兼容性

视频兼容性

请添加图片描述

音频兼容性

请添加图片描述

相关文章:

  • 【图神经网络】10分钟掌握图神经网络及其经典模型
  • 【Axure教程】鼠标滚动上下翻页效果
  • Qt 自定义日志类总结
  • 算法学习|动态规划 LeetCode 416. 分割等和子集
  • Scala泛型(泛型方法,泛型类,泛型特质,上下界,协变、逆变、非变)
  • C/C++字符串
  • 基于Python GDAL库实现图像的几何校正详细教程
  • SpringBoot接参注解与校验失败后的三种异常
  • 【C语言学习】变量和数据类型
  • 【Vue2从入门到精通】详解Vue.js的15种常用指令及其使用场景
  • SpringMVC(8)——SSM整合
  • 【内网安全】横向移动Exchange服务有账户CVE漏洞无账户口令爆破
  • 10、Django开发总结:Django缓存Cache应用场景、设置以及高级使用技巧
  • 【黑客技术】LOIC —— 低轨道离子炮工具使用
  • 华为OD机试用java实现 -【吃火锅】
  • 分享的文章《人生如棋》
  • @angular/forms 源码解析之双向绑定
  • 4个实用的微服务测试策略
  • CAP 一致性协议及应用解析
  • ECMAScript 6 学习之路 ( 四 ) String 字符串扩展
  • JavaScript异步流程控制的前世今生
  • macOS 中 shell 创建文件夹及文件并 VS Code 打开
  • Node + FFmpeg 实现Canvas动画导出视频
  • React as a UI Runtime(五、列表)
  • SAP云平台里Global Account和Sub Account的关系
  • SpiderData 2019年2月23日 DApp数据排行榜
  • Spring核心 Bean的高级装配
  • win10下安装mysql5.7
  • 聊聊flink的TableFactory
  • 腾讯视频格式如何转换成mp4 将下载的qlv文件转换成mp4的方法
  • 我感觉这是史上最牛的防sql注入方法类
  • 一加3T解锁OEM、刷入TWRP、第三方ROM以及ROOT
  • 再谈express与koa的对比
  • 白色的风信子
  • Spark2.4.0源码分析之WorldCount 默认shuffling并行度为200(九) ...
  • # Swust 12th acm 邀请赛# [ A ] A+B problem [题解]
  • #mysql 8.0 踩坑日记
  • #NOIP 2014#day.2 T1 无限网络发射器选址
  • (2)(2.4) TerraRanger Tower/Tower EVO(360度)
  • (done) ROC曲线 和 AUC值 分别是什么?
  • (JSP)EL——优化登录界面,获取对象,获取数据
  • (备忘)Java Map 遍历
  • (二)学习JVM —— 垃圾回收机制
  • (附源码)spring boot校园健康监测管理系统 毕业设计 151047
  • (附源码)springboot课程在线考试系统 毕业设计 655127
  • (论文阅读11/100)Fast R-CNN
  • (转)linux 命令大全
  • (转载)Google Chrome调试JS
  • (转载)虚函数剖析
  • .net framework4与其client profile版本的区别
  • .NET Standard 的管理策略
  • :O)修改linux硬件时间
  • @Autowired标签与 @Resource标签 的区别
  • @Responsebody与@RequestBody
  • [BetterExplained]书写是为了更好的思考(转载)