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

这篇具有很好参考价值的文章主要介绍了HTML5支持的视频文件格式和音频文件格式有哪些?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

浏览器兼容性

视频兼容性

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

音频兼容性

HTML5支持的视频文件格式和音频文件格式有哪些?文章来源地址https://www.toymoban.com/news/detail-430139.html

到了这里,关于HTML5支持的视频文件格式和音频文件格式有哪些?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【HTML5】HTML5 多媒体标签 ② ( 视频标签 <video> | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )

    HTML 5 的 video 视频标签 , 支持 ogg / mpeg 4 ( mp4 ) / webM 三种格式的音频 , 不同的浏览器支持的音频格式不同 ; IE 浏览器 : 9.0 以上版本支持 mp4 格式 ; Firefox 浏览器 : 3.5 以上版本支持 ogg 格式 ; 4.0 以上版本支持 webM 格式 ; Opera 浏览器 : 10.5 以上版本支持 ogg 格式 ; 10.6 以上版本支持

    2024年02月09日
    浏览(76)
  • 【HTML5高级第三篇】drag拖拽、音频视频、defer/async属性、dialog应用

    原生JavaScipt案例合集 JavaScript +DOM基础 JavaScript 基础到高级 Canvas游戏开发 1.1 拖拽事件 ondrag: 拖拽 ondragenter: 拖拽进入 ondragleave: 拖拽离开 ondragstart: 拖拽开始 ondragend: 拖拽结束 ondragover:悬浮 ondrop: 丢弃事件 该事件有一个bug,dargover事件中的默认行为阻止了ondrop事件不能够执行,

    2024年02月09日
    浏览(45)
  • 前端开发基础(HTML5 + CSS3)【第一篇】:HTML标签之文字排版、图片、链接、音频、视频 && 涵盖了两个综合案例 做到了基础学得会,实战写的出

    点击前往前端开发基础专栏: 一、开发环境搭建 这里google浏览器不能用我们就使用电脑自带的微软浏览器就可以了! 下载 VS Code VS Code 官网下载地址 这里根据自己电脑的操作系统进行下载! 安装步骤如下: (是在不知道如何操作,可以找个教程一步一步来) 安装这个还是

    2024年04月16日
    浏览(63)
  • 【音视频 | AAC】AAC格式音频文件解析

    😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C++、数据结构、音视频🍭 🤣本文内容🤣:🍭介绍AAC格式音频文件解析🍭 😎金句分享😎:🍭你不能选择最好的,但最好的会来选择你——泰戈尔🍭 本文未经允许,不得转发!!

    2024年02月04日
    浏览(54)
  • 常见的视频文件格式有哪些?

    常见的视频文件格式有哪些? 常见在线流媒体格式:mp4、flv、f4v、webm 移动设备格式:m4v、mov、3gp、3g2 RealPlayer :rm、rmvb 微软格式 :wmv、avi、asf MPEG 视频 :mpg、mpeg、mpe、ts DV格式 :div、dv、divx 其他格式 :vob、dat、mkv、lavf、cpk、dirac、ram、qt、fli、flc、mod mp4格式 MP4是一套用

    2024年02月01日
    浏览(35)
  • HTML5 新增的标签有哪些

    HTML5(超文本标记语言第五版)是一种用于创建和呈现网页内容的标准标记语言。是最新的html标准,拥有新的语义、图形以及多媒体元素,简化web应用程序,专为丰富的web内容而设计的,简称“H5”。 语义化标签 H5是HTML(超文本标记语言)的第五个主要版本,由万维网联盟(

    2024年02月11日
    浏览(53)
  • 常用HTML5开发工具有哪些?

    常用HTML5开发工具有哪些? 在开发前端页面时,为了快速、高效地完成任务,通常会使用一些具有代码高亮显示、语法提示等便捷功能的HTML5开发工具。 常见的HTML5开发工具有Sublime、Visual Studio Code、webstorm、Dreamweaver、Hbuilder等,具体介绍如下。 1、 Sublime Sublime全称为Sublime T

    2024年02月06日
    浏览(36)
  • 音频播放器Web页面代码实例(基于HTML5)

    音频播放器Web页面代码实例(基于HTML5):   特别需要注意的点:     如果上传文件时设置的是默认转码方式,所有的文件都会转码为视频文件,使用音频播放器播放视频文件时,只会播放声音,没有图像。     如果上传文件时设置了\\\"源文件播放\\\",平台不会对源文件进行

    2024年02月16日
    浏览(38)
  • HTML5+CSS3+JS小实例:音频可视化

    实例:音频可视化 技术栈:HTML+CSS+JS 效果: 源码: 【HTML】 【CSS】

    2024年01月18日
    浏览(45)
  • HTML5 中新增了哪些表单元素?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月13日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包