当前位置: 首页 > 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实现 -【吃火锅】
  • 2017年终总结、随想
  • CentOS 7 修改主机名
  • Dubbo 整合 Pinpoint 做分布式服务请求跟踪
  • Golang-长连接-状态推送
  • Js基础知识(一) - 变量
  • JS进阶 - JS 、JS-Web-API与DOM、BOM
  • Laravel5.4 Queues队列学习
  • Laravel深入学习6 - 应用体系结构:解耦事件处理器
  • mysql innodb 索引使用指南
  • Web Storage相关
  • 阿里云容器服务区块链解决方案全新升级 支持Hyperledger Fabric v1.1
  • 从重复到重用
  • 互联网大裁员:Java程序员失工作,焉知不能进ali?
  • 极限编程 (Extreme Programming) - 发布计划 (Release Planning)
  • 记录一下第一次使用npm
  • 警报:线上事故之CountDownLatch的威力
  • 事件委托的小应用
  • 思否第一天
  •  一套莫尔斯电报听写、翻译系统
  • 用Python写一份独特的元宵节祝福
  • Oracle Portal 11g Diagnostics using Remote Diagnostic Agent (RDA) [ID 1059805.
  • mysql 慢查询分析工具:pt-query-digest 在mac 上的安装使用 ...
  • ​TypeScript都不会用,也敢说会前端?
  • ​人工智能之父图灵诞辰纪念日,一起来看最受读者欢迎的AI技术好书
  • #pragma once与条件编译
  • (4)STL算法之比较
  • (BFS)hdoj2377-Bus Pass
  • (MonoGame从入门到放弃-1) MonoGame环境搭建
  • (超简单)构建高可用网络应用:使用Nginx进行负载均衡与健康检查
  • (二十五)admin-boot项目之集成消息队列Rabbitmq
  • (附源码)计算机毕业设计ssm-Java网名推荐系统
  • (一)基于IDEA的JAVA基础10
  • (转)创业的注意事项
  • (转载)Linux 多线程条件变量同步
  • (转载)微软数据挖掘算法:Microsoft 时序算法(5)
  • ... 是什么 ?... 有什么用处?
  • .gitignore文件设置了忽略但不生效
  • .net core Swagger 过滤部分Api
  • .NET MVC之AOP
  • .NET/C# 如何获取当前进程的 CPU 和内存占用?如何获取全局 CPU 和内存占用?