专栏首页HTML5学堂HTML5 视音频发展史

HTML5 视音频发展史

HTML5 视音频发展史

HTML5学堂:在Flash与HTML5的争霸当中,最终Flash败北,而能够替代Flash播放器功能的就是HTML5中的视音频功能。本文介绍了HTML5出现前后,实现视音频方法的变化以及视音频的编码格式。

早期实现视音频的方法

在网页当中,早期的视音频标签通常采用embed和object两种标签嵌套。之所以采用这种方式,主要与两种标签的支持程度有关。

对于embed标签,大部分的浏览器都能够支持,但是并没有纳入到W3C标准当中,而object标签,虽然得到了W3C标准的支持,但是并没有得到大部分浏览器的支持。因此,为了使视音频恩能够够在各个浏览器当中正确的呈现,便出现了混合使用的方式。

HTML5中视音频的新变化

在HTML5视频标签<video>出现之前,网站上使用的视频通常需要用户下载安装插件,例如realplayer、quicktime、windowsmediaplayer,flash等。之前flash曾经风靡一时,但是flash也存在着很大的问题,例如:需要用户手动安装、存在明显的安全性问题、系统资源消耗比较大等等。

苹果手机明确声明,在移动端不再支持flash。安卓平台早期支持flash,但是当安卓手机版本升级到4.0之后,也停止了对flash的支持。之所以出现这样的原因,与flash的劣势息息相关。首先,手机的硬件远远比不上电脑,电脑上的flash对于性能的影响并不是很明显,但是对于手机,只有几百兆赫,内存一般只有几十兆空间,flash对于系统资源的消耗便异常明显了,有时会经常因为flash而出现死机的现象。另外,在手机平台,flash很耗费电量。

欢迎沟通交流~HTML5学堂

基本的视音频编码方式

对于HTML5,支持如下的3种视频编码格式和3种音频编码格式:

视频:Theora、H.264、Vp8

音频:MP3、AAC、Vorbis

其中MP3、AAC音频文件和H.264视频文件格式收费

三种视频编码方式和三种音频编码方式可以组合成如下三种HTML5支持的格式:

Ogg(Theora+Vorbis)

MEPG4(H.264+AAC)

WebM(VP8+Vorbis)

关于浏览器对这三种视频文件的支持 - 至2013年初

2013年2月8日,在最新发布的Firefox Nightly开发版中,H.264、AAC编码的MP4视频,以及MP3音频,都已经在HTML5的<video>和<audio>标签中得到支持,并处于启用状态。这样,用户再也不用手动修改参数来开启对这些格式的支持了,不过这一功能目前还仅限于Windows 7/8系统,Linux、Mac OS X以及老版的Windows都还是默认关闭的。

这一功能还处于测试阶段,欢迎反馈bug。如果一切顺利,它会在Firefox 22正式版中和大家见面,时间是6月22日。在那之前,还会有Firefox 19/20/21三个正式版。

换句话说,火狐浏览器实现了对三种视频格式的全面支持

苹果Safari浏览器:只支持MEPG4(H.264)

IE浏览器:支持MEPG4和WebM

OPERA浏览器:当前支持Ogg和WebM,官网原文如下:

Opera currently supports Ogg/WebM, which is also supported by Firefox and Chrome

对于当前的视音频支持程度

本文分享自微信公众号 - HTML5学堂(h5course-com),作者:HTML5学堂

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-08-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML5发展历程

    HTML5发展历程 HTML5学堂:HTML5应该说是一个新名词了,由最初的网页设计与制作,发展到WEB前端开发工程师,又演变出HTML5的“新名词”。那么H...

    HTML5学堂
  • 3分钟读懂HTML5语言的特点

    HTML5的跨平台技术 HTML5技术跨平台,适配多终端。传统移动终端上的Native App,开发者的研发工作必须针对不同的操作系统进行,成本相对较高。Nat...

    HTML5学堂
  • 移动端项目经验 JavaScript

    HTML5学堂:相对来说,JS在移动端要远远低于PC端的使用频率,因此积累的开发经验并不是太多。在这里简要整理一些JavaScript在移动端的项目经验,主要包...

    HTML5学堂
  • 企业面试题: Html5应用程序缓存和Html浏览器缓存的区别

    新的HTML5规范允许浏览器在连接客户端时预取一些或全部网站资产,如HTML文件、图像、CSS、JavaScript等。对于获取此内容,用户以前没有必要访问此内...

    舒克
  • 想学程序猿拿高薪?你得先买一个教你写代码的机器人

    都说程序猿是一个高薪水的职业,这是真的吗?小编没调查过,但是小编身边的程序猿朋友,虽说大框架眼镜下迷离的眼神+日渐闪亮的发际线,也挡不住写代码的热情,说不准厚厚...

    机器人网
  • IP camera access 网络摄像头调用

    GoPro访问基于无线网络连接和socket直接访问udp资源,实测视频延迟有点厉害,应该还是码流/压缩的原因,访问有些应用层的rtsp协议相对更快,同时Op...

    readme
  • 程序员进阶之算法练习(三十二)LeetCode专场

    题目链接 题目大意: 给出一个链表RandomListNode *next, *random; 每个节点有int值,有两个指针,一个指向下一个节点,一个指...

    落影
  • MySQL配置TokuDB的简单总结

    MySQL中的存储引擎是插件式的,当然主流默认的是InnoDB,而且InnoDB存储引擎会随着MySQL官方的搭理投入会越来越火。有了MGR,还有InnoDB ...

    jeanron100
  • 亚马逊Web服务超级用户论战DBaaS

    高级亚马逊Web服务用户更喜欢自我管理运行在亚马逊弹性计算云上的数据库,而不是数据库即服务产品,至少现在看是这样的。 上周,AWS超级用户在线活动群组...

    静一
  • 人眼疲倦检测开源算法

    这次小白为小伙伴们带来了和生活相关性很大的一个系统。司机疲劳驾驶一直都是交通事故高发的主要原因。因此本项目的开发者计划通过视觉观测人的眼睛来判断被观察者是否存在...

    小白学视觉

扫码关注云+社区

领取腾讯云代金券