那是我在夕陽下的奔跑：邊跑邊學習html5之audio與video

今天爲你們分享一下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-三、Ogg Vorbis，視頻編解碼器包括H.26四、VP八、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）屬性和方法

（4）事件

2.6 瀏覽器的支持狀況
從下表能夠看出瀏覽器對媒體元素的支持狀況。

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