今天为大家分享一下html5中的视频（video）与音频（audio）。在进入主题之前我们先了解一下Flash与html5这两种技术的时代配景与成长历史。

1.前言

Flash被退休与html5的上位

Flash这项技术诞生于20多年前，曾被应用于98%的小我私家电脑上，是开发者最青睐的软件之一，被用于开发游戏、视频播放器和可在多个网络浏览器上运行的应用。Falsh的前半生可以说是辉煌的，在Flash最为壮盛的时期，来自Adobe的官方统计，全球有将近200万的Flash开发者。

但它仅仅是满足了人们的短期需求，它没有预见移动设备革命的到来。业界此刻遍及认为，Flash的下坡路是从和苹果的决裂开始的。尤其是乔布斯在2010年颁布的一篇《thoughts-on-flash》的文章。乔布斯在里面写下了关于Flash的一点看法，说明本身为什么不使用Flash，谈到关于Flash的一些问题，好比开放性，安适性，对付设备续航的影响，倒霉于触摸屏，等等。自此之后，这种技术的热度开始下降，HTML5等其他技术已经逐步代替了Flash。在现下最普及的网页浏览器Chrome上，Flash的使用率急剧下降。据谷歌称，2014年80%的桌面用户每天使用Flash播放器，而目前只有17%。终于，于2017年7月25日，Adobe爸爸也放弃治疗了，公布发表flash将于2020年正式退休。

HTML5是HTML的最新版本，它扩大了可以嵌入在网页中的多媒体元素的列表。HTML5撑持可扩展矢量图形（SVG）的多媒体特定标签、动画和使用CANVAS元素，级联样式表(CSS)和Java的音频和视频的交互性。HTML5无需第三方插件（例如插件和API），以便通过在文档文本自己中嵌入代码来运行内容。这解决了以前的迭代发明的兼容性问题，此中需要第三方插件或专有API来正确泛起HTML文档。

作为此刻可以撑持Flash类技术的开源语言，HTML5已经成为Web开发的新首选。所谓长江后浪推前浪，一代更比一代浪。html5可以说是站在Flash这个巨人的肩膀上，Flash留给html5大量的遗产，尤其是很多HTML5相关的视频和音频项目在过去几年的成长中大量的融合了Flash相关的媒体库来供给更多的成果撑持，当今大量的HTML5 Video Player都是从本来的Flash范围调动而来。这一切都是Flash技术带给当今HTML5范围的工业。在拥抱新技术的同时，也感谢感动flash对互联网带来的深远影响。

空话不久不多说，下面一起进入正题。

2.audio与video

2.1 标签
标签主要包孕<audio>、<video>、<source>.
<audio src="http://www.mamicode.com/×××.mp3" controls autoplay></audio>
<video src="http://www.mamicode.com/GameOfThrones.rmvb" controls autoplay></video>

<video controls autoplay> <source src="http://www.mamicode.com/GameOfThrones.rmvb"> </video>

2.2 视频容器
岂论是音频文件还是视频文件，实际上都只是一个容器文件，这点类似于压缩了一组文件的ZIP文件。视频文件(视频容器)包罗了音频轨道、视频轨道和其他一些元数据。视频播放的时候，音频轨道和视频轨道是绑定在一起的。元数据部分包罗了该视频的封面、标题、子标题、字幕等相关信息。主流的视频容器撑持的格局包孕：.avi,.flv,.mp4,.ogv等。

2.3 编解码器
音频和视频的编解码器是一种算法，能够对特定格局的音频和视频文件进行编码和解码，使其在浏览器中能够快速的加载与解析。极大的减少了用户的期待时间，提升了用户体验。常见的音频编解码器有AAC、MPEG-3、Ogg Vorbis，，视频编解码器包孕H.264、VP8、Ogg Theora。

2.4 媒体元素
video/audio标签属性包孕：
autoplay：控制是否自动播放；
controls: 控制是否显示播放控件；
loop : 媒体是否循环播放;
muted:规定视频输出应该被静音;
preload:在页面加载时进行加载，并预备播放;
src:要加载的资源文件。
此中video还有几个特殊的标签属性
poster : 视频播放前的预览图片；
width、height : 设置视频的尺寸；
videoWidth、 videoHeight : 视频的实际尺寸(只读)。

2.5 js中的audio与video
（1）创建

var ov = document.createElment(‘video‘) // 直接new 一个东西，参数为src。 var oa = new Audio(‘‘)

（2）获取

与通例的dom节点获取没有区别。

（3）属性和要领

（4）事件

2.6 浏览器的撑持情况
从下表可以看出浏览器对媒体元素的撑持情况。