那是我在夕阳下的奔跑：边跑边学习html5之audio与video

2019年9月11日 173次阅读 来源: 秋枫惋红

今天为大家分享一下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="×××.mp3" controls autoplay></audio>
<video src="./GameOfThrones.rmvb" controls autoplay></video>

<video controls autoplay>
    <source src="./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('http://www.baidu.com/test.mp3')

（2）获取

与常规的dom节点获取没有区别。

（3）属性和方法

《那是我在夕阳下的奔跑：边跑边学习html5之audio与video》

（4）事件

《那是我在夕阳下的奔跑：边跑边学习html5之audio与video》

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

《那是我在夕阳下的奔跑：边跑边学习html5之audio与video》

audio
Firefox：支持 Ogg Vorbis和WAV 　　
Opera ：支持Ogg Vorbis和WAV 　　
Safari ：支持MP3，AAC格式 ，和MP4 　　
Chrome ：支持Ogg Vorbis，MP3，WAV，AAC和MP4 　　
Internet Explorer 9+ ：支持MP3，AAC格式 ，和MP4 　　
IOS ：支持MP3，AAC格式，和MP4
Android ：支持AAC和MP3
video
Firefox：支持Ogg Theora格式和WEBM
Opera：支持Ogg Theora格式和WEBM
Safari：支持MP4
Chrome：支持Ogg Theora格式，MP4和WEBM
Internet Explorer 9：支持MP4和WEBM(需要安装插件)
IOS：支持MP4
Android：支持MP4和WEBM(Android 2.3版本以上)
为了最大程度支持所有上面提到的浏览器，建议开发者使用Ogg Vorbis和MP3这两种音频格式，使用WEBM和MP4作为视频文件的格式并将资源加载在source标签中。
例如：

<audio autoplay controls>
    <source src="./×××.ogv">
    <source src="./×××.mp3">
</audio>
<video autoplay controls>
    <source src="./×××.webm">
    <source src="./×××.mp4">
</video>

与直接在视频或音频标签中写src相比，使用source标签加载资源的好处是，当浏览器无法解析第一种视频或音频的格式时，将会解析第二种格式，可以加载多个source。

3.demo

介绍了那么多，最后分享我通过媒体元素的一些属性和方法做的一个自定义多媒体播放器，代码地址：自定义彬彬播放器，代码地址：自定义播放器源码。

—————————————–我是分割线君———————————————–

最后，擎创公司官网已经上线，小伙伴们请有兴趣的可以看看。官网地址：www.eoitek.com

    原文作者：秋枫惋红
    原文地址: https://segmentfault.com/a/1190000010935722
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞