那是我在夕陽下的奔跑：邊跑邊學(xué)習(xí)html5之a(chǎn)udio與video

gself 發(fā)布于2019-08-20 19:04 / 1996人閱讀

摘要：尤其是喬布斯在年發(fā)布的一篇的文章。喬布斯在里面寫下了關(guān)于的一點(diǎn)看法，說明自己為什么不使用，談到關(guān)于的一些問題，比如開放性，安全性，對(duì)于設(shè)備續(xù)航的影響，不利于觸摸屏，等等。終于，于年月日，爸爸也放棄治療了，宣布將于年正式退休。

今天為大家分享一下html5中的視頻（video）與音頻（audio）。在進(jìn)入主題之前我們先了解一下Flash與html5這兩種技術(shù)的時(shí)代背景與發(fā)展歷史。

1.前言

Flash被退休與html5的上位

Flash這項(xiàng)技術(shù)誕生于20多年前，曾被應(yīng)用于98%的個(gè)人電腦上，是開發(fā)者最青睞的軟件之一，被用于開發(fā)游戲、視頻播放器和可在多個(gè)網(wǎng)絡(luò)瀏覽器上運(yùn)行的應(yīng)用。Falsh的前半生可以說是輝煌的，在Flash最為鼎盛的時(shí)期，來自Adobe的官方統(tǒng)計(jì)，全球有將近200萬的Flash開發(fā)者。

但它僅僅是滿足了人們的短期需求，它沒有預(yù)見移動(dòng)設(shè)備革命的到來。業(yè)界現(xiàn)在普遍認(rèn)為，F(xiàn)lash的下坡路是從和蘋果的決裂開始的。尤其是喬布斯在2010年發(fā)布的一篇《thoughts-on-flash》的文章。喬布斯在里面寫下了關(guān)于Flash的一點(diǎn)看法，說明自己為什么不使用Flash，談到關(guān)于Flash的一些問題，比如開放性，安全性，對(duì)于設(shè)備續(xù)航的影響，不利于觸摸屏，等等。自此之后，這種技術(shù)的熱度開始下降，HTML5等其他技術(shù)已經(jīng)逐步取代了Flash。在現(xiàn)下最普及的網(wǎng)頁瀏覽器Chrome上，F(xiàn)lash的使用率急劇下降。據(jù)谷歌稱，2014年80%的桌面用戶每天使用Flash播放器，而目前只有17%。終于，于2017年7月25日，Adobe爸爸也放棄治療了，宣布flash將于2020年正式退休。

HTML5是HTML的最新版本，它擴(kuò)大了可以嵌入在網(wǎng)頁中的多媒體元素的列表。HTML5支持可擴(kuò)展矢量圖形（SVG）的多媒體特定標(biāo)簽、動(dòng)畫和使用CANVAS元素，級(jí)聯(lián)樣式表(CSS)和Java的音頻和視頻的交互性。HTML5無需第三方插件（例如插件和API），以便通過在文檔文本本身中嵌入代碼來運(yùn)行內(nèi)容。這解決了以前的迭代發(fā)現(xiàn)的兼容性問題，其中需要第三方插件或?qū)Ｓ蠥PI來正確呈現(xiàn)HTML文檔。

作為現(xiàn)在可以支持Flash類技術(shù)的開源語言，HTML5已經(jīng)成為Web開發(fā)的新首選。所謂長(zhǎng)江后浪推前浪，一代更比一代浪。html5可以說是站在Flash這個(gè)巨人的肩膀上，F(xiàn)lash留給html5大量的遺產(chǎn)，尤其是很多HTML5相關(guān)的視頻和音頻項(xiàng)目在過去幾年的發(fā)展中大量的融合了Flash相關(guān)的媒體庫來提供更多的功能支持，當(dāng)今大量的HTML5 Video Player都是從原來的Flash領(lǐng)域變換而來。這一切都是Flash技術(shù)帶給當(dāng)今HTML5領(lǐng)域的財(cái)富。在擁抱新技術(shù)的同時(shí)，也感謝flash對(duì)互聯(lián)網(wǎng)帶來的深遠(yuǎn)影響。

廢話不多說，下面一起進(jìn)入正題。

2.audio與video

2.1 標(biāo)簽
標(biāo)簽主要包括

2.2 視頻容器
不論是音頻文件還是視頻文件，實(shí)際上都只是一個(gè)容器文件，這點(diǎn)類似于壓縮了一組文件的ZIP文件。視頻文件(視頻容器)包含了音頻軌道、視頻軌道和其他一些元數(shù)據(jù)。視頻播放的時(shí)候，音頻軌道和視頻軌道是綁定在一起的。元數(shù)據(jù)部分包含了該視頻的封面、標(biāo)題、子標(biāo)題、字幕等相關(guān)信息。主流的視頻容器支持的格式包括：.avi,.flv,.mp4,.ogv等。

2.3 編解碼器
音頻和視頻的編解碼器是一種算法，能夠?qū)μ囟ǜ袷降囊纛l和視頻文件進(jìn)行編碼和解碼，使其在瀏覽器中能夠快速的加載與解析。極大的減少了用戶的等待時(shí)間，提升了用戶體驗(yàn)。常見的音頻編解碼器有AAC、MPEG-3、Ogg Vorbis，視頻編解碼器包括H.264、VP8、Ogg Theora。

2.4 媒體元素
video/audio標(biāo)簽屬性包括：
autoplay：控制是否自動(dòng)播放；
controls: 控制是否顯示播放控件；
loop : 媒體是否循環(huán)播放;
muted:規(guī)定視頻輸出應(yīng)該被靜音;
preload:在頁面加載時(shí)進(jìn)行加載，并預(yù)備播放;
src:要加載的資源文件。
其中video還有幾個(gè)特殊的標(biāo)簽屬性
poster : 視頻播放前的預(yù)覽圖片；
width、height : 設(shè)置視頻的尺寸；
videoWidth、 videoHeight : 視頻的實(shí)際尺寸(只讀)。

2.5 js中的audio與video
（1）創(chuàng)建

var ov = document.createElment("video") // 直接new 一個(gè)對(duì)象，參數(shù)為src。
var oa = new Audio("http://www.baidu.com/test.mp3")

（2）獲取

與常規(guī)的dom節(jié)點(diǎn)獲取沒有區(qū)別。

（3）屬性和方法

（4）事件

2.6 瀏覽器的支持情況
從下表可以看出瀏覽器對(duì)媒體元素的支持情況。

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版本以上)
為了最大程度支持所有上面提到的瀏覽器，建議開發(fā)者使用Ogg Vorbis和MP3這兩種音頻格式，使用WEBM和MP4作為視頻文件的格式并將資源加載在source標(biāo)簽中。
例如：