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

news2024/9/22 1:48:42

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

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

格式支持

视频文件格式

  • 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 标签也是同样一个道理。

浏览器兼容性

视频兼容性

音频兼容性

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/416738.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

springboot+netty+mqtt实现

具体实现前言MQTT协议概念组成部分实现mqtt协议测试其他前言 首先说明一下&#xff0c;netty实现并封装了mqtt协议&#xff0c;同时也为其写好了编解码器&#xff0c;但是再了解并搭建之前&#xff0c;尤其是还不了解netty和mqtt的同学&#xff0c;必须要清楚一件事&#xff1…

2023MathorCup数学建模比赛的思路汇总帖

更新时间【4.13 19&#xff1a;45】ABCD均已更新&#xff0c;选题指导已更新&#xff0c;速看&#xff01;后续会出各题详细思路及代码&#xff01; 这里是小云的2023MathorCup数学建模比赛的思路汇总帖&#xff0c;比赛开始后将实时更新~ 竞赛共4道题目&#xff08;A题、B题…

ELF 文件格式 ------- 符号表

1. 符号的数据结构 typedef struct elf64_sym {Elf64_Word st_name; /* 该符号的名字在字符串表中的起始下标 */unsigned char st_info; /* 该符号的类型以及作用域信息 */unsigned char st_other; /* 暂未使用 */Elf64_Half st_shndx; /* 该符号所在的 section 的下标&…

IDEA安装spotbugs插件替代findbugs插件

相信最近想在IDEA上安装findbugs插件的朋友&#xff0c;遇到与我一样的问题&#xff0c;findbugs与IDEA不兼容&#xff1a; https://plugins.jetbrains.com/plugin/3847-findbugs-idea 主要是FindBugs插件已经不更新了&#xff0c;它最新版本停留在2016年发布的1.0.1&#xff0…

百度文心一言可以完胜ChatGPT的4点可能性

文心一言&#xff0c;百度全新一代知识增强大语言模型&#xff0c;文心大模型家族的新成员&#xff0c;能够与人对话互动&#xff0c;回答问题&#xff0c;协助创作&#xff0c;高效便捷地帮助人们获取信息、知识和灵感。但说实话&#xff0c;很多人拿他与ChatGPT相对比&#x…

RabbitMQ( 发布订阅模式 ==> DirectExchange)

本章目录&#xff1a; 何为DirectExchangeDirectExchange具体使用一、何为DirectExchange 在上一篇文章中&#xff0c;讲述了FanoutExchange&#xff0c;其中publish向交换机发送消息时&#xff0c;我们并没有指定routkingKey&#xff0c;如下图所示 我们看看官方文档 之前使…

【教学类-32-01】十二生肖1.0版(绘画+手工+排序+分类+玩牌)(中班:偏科学-数)

作品展示 背景需求——从数字到图片 最佳孩子们做Python纸类&#xff08;数学&#xff09;的频率比较高。但都是数字类&#xff08;加减法、门牌号、火车箱、电话号码等&#xff09;我想翻新花样&#xff0c;设计新的内容&#xff0c;就想到了水果图片、动物图片。 百度图片找…

大数据技术之DataX

目录 第一章 业务数据同步策略 1.1 全量同步策略 1.2 增量同步策略 1.3 数据同步策略的选择 第2章 DataX介绍 2.1 DataX概述 第3章 DataX架构原理 3.1 DataX的设计理念 3.2 DataX框架设计 3.3 DataX支持的数据源 3.4 DataX运行流程 3.5 DataX调度策略思路 3.6 Data…

数据结构和算法学习记录——二叉树的存储结构二叉树的递归遍历(顺序存储结构、链表存储结构、先序中序后序递归遍历)

目录 顺序存储结构 链表存储结构 二叉树的递归遍历 先序递归遍历 中序递归遍历 后序递归遍历 先序遍历路线图 中序遍历路线图 后序遍历路线图 设想一下二叉树要用什么样的方式来存储&#xff0c;一种是用数组&#xff0c;一种是用链表。 顺序存储结构 用数组&…

IDEA新手入门常用快捷键,方便软件构造

1. Ctrlo快速找方法 2. Alt EnTER 对这个代码快速智能补全trycatch 对这个快速加入要写的接口方法show 3. 使用Ctrl /&#xff0c; 添加行注释 4. 输入psvm 按Tab&#xff0c;自动生成void main 输入souf 按Tab就是System.out.printf() 5. CtrlF12 查看参考代码内部方法…

「她时代」背后的欧拉力量

2018年大热电视剧《北京女子图鉴》&#xff0c;讲述了一群在北京打拼的职业女性&#xff0c;她们背井离乡&#xff0c;被现实包裹&#xff0c;被压力、责任困扰&#xff0c;但依旧用倔强的个性、不屈的进取心和深厚的知识技能努力营造、交织出一片励志的天空&#xff0c;既激昂…

HIT 计统实验2 二进制炸弹(gdb破解版) 拆弹过程

CSAPP 实验2是一个很好玩的实验,网上有很多参考资源写的都很好&#xff0c;本文增加了一些具体细节。 想要我的炸弹可以私信我。 还得看形式语言 &#xff0c; 炸弹6 7 有时间再拆 第1章 实验基本信息 1.1 实验目的 熟练掌握计算机系统的ISA指令系统与寻址方式熟练掌握Linu…

ChatGPT/InstructGPT论文(一)

文章目录一. GPT系列1. in-context learning&#xff08;情景学习&#xff09;二. ChatGPT背景介绍&#xff08;Instruct? Align? 社会化?&#xff09;三. InstructGPT的方法四. InstructGPT工作的主要结论五. 总结六. 参考链接一. GPT系列 基于文本预训练的GPT-1&#xff…

LeetCode 218. 天际线问题

城市的 天际线 是从远处观看该城市中所有建筑物形成的轮廓的外部轮廓。给你所有建筑物的位置和高度&#xff0c;请返回 由这些建筑物形成的 天际线 。 每个建筑物的几何信息由数组 buildings 表示&#xff0c;其中三元组 buildings[i] [lefti, righti, heighti] 表示&#xf…

76-TCP协议,UDP协议以及区别

TCP协议,UDP协议,SCTP协议一.TCP协议1.什么是TCP协议2.TCP协议的特点3.TCP头部结构4.TCP状态转移5.TCP超时重传二.UDP协议1.什么是UDP协议2.UDP协议的特点三.TCP和UDP的区别一.TCP协议 1.什么是TCP协议 TCP(Transmission Control Protocol)协议即为传输控制协议,是一种面向连…

4.12~(小组成员对话预习)

注意我们这里观察的是XP的kernel32.dll&#xff0c;到win10是有变化的 看了这个函数&#xff0c;似乎是让BasepExeLdrEntry不存在的时候初始化一遍&#xff0c;然后进行对比是否已经加载过这个dll&#xff0c;那么如果加载下一个dll的时候&#xff0c;BasepExeLdrEntry是不是还…

05-vue3的生命周期

文章目录1.生命周期定义钩子函数2.vue3中的生命周期1.普通写法2.setup中写生命周期区别1.生命周期定义 每个 Vue 实例在被创建时都要经过一系列的初始化过程。 例如&#xff1a;从开始创建、初始化数据、编译模板、挂载Dom、数据变化时更新DOM、卸载等一系列过程。 我们称 这一…

【MyBatis】你还不会使用MyBatis逆向工程来提高你的开发效率吗?

文章目录MyBatis逆向工程1、快速入门2、逆向工程配置文件参数详解3、QBC查询MyBatis逆向工程 正向工程&#xff1a;先创建Java实体类&#xff0c;由框架负责根据实体类生成数据库表&#xff08;Hibernate是支持正向工程的&#xff09;逆向工程&#xff1a;先创建数据库表&#…

Vue3技术2之ref函数、reactive函数、Vue3中的响应式原理

Vue3技术2ref函数处理基本类型App.vue处理对象类型App.vue总结&#xff1a;ref函数reactive函数只能修改对象类型App.vue完善代码App.vue总结&#xff1a;reactive函数Vue3.0中的响应式原理回顾Vue2的响应式原理Vue3响应式原理模拟Vue2中实现响应式index.html模拟Vue3中实现响应…

二分搜索树

一、概念及其介绍 二分搜索树&#xff08;英语&#xff1a;Binary Search Tree&#xff09;&#xff0c;也称为 二叉查找树 、二叉搜索树 、有序二叉树或排序二叉树。满足以下几个条件&#xff1a; 若它的左子树不为空&#xff0c;左子树上所有节点的值都小于它的根节点。若它…