注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

phperwuhan的博客

记载一个phper的历程!phperwuhan.blog.163.com

 
 
 

日志

 
 

HTML5 影音 ( Video ) 概論  

2012-01-17 17:46:05|  分类: html5/css3 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

来源:http://www.html5china.com/HTML5features/video/20110925_1986.html

1 Video介紹

引用我翻譯文檔《在HTML5頁面中嵌入音頻和視頻》中的介紹文字:「當今,在網頁上嵌入視頻且所有用戶不管使 用任何瀏覽器或者操作系統都能看到的唯一可靠方法是使用Flash。這需要Adobe Flash插件,並且結合<object>和<embed>標籤。

大多數用戶已經安裝了Flash插件(事實上,大概95%的上網用戶都裝有Flash的某個版本),但HTML 5的支持者正在推動一個開放的,不需要任何插件的視頻標準。這就是HTML 5的新標籤<video>帶來的構想,他提供了一個嵌入視頻(以及與其交互)而不需要類似Flash的私有插件的方法。

不幸的是,視頻並非那麼簡單。不僅僅是瀏覽器需要理解<video>標籤,而且需要一個必要的編碼譯碼器來播放視頻。明顯的解決方法只 能是HTML 5規範的締造者們選擇一個視頻編 碼譯碼器,並且讓每一個瀏覽器製造商執行。

 

 

總之,這就是所推薦的打算。同時,這也是引起混亂的導火索。對於各種各樣編碼譯碼器的爭論就已經很煩雜了,但更悲劇的事情是,瀏覽器製造商們還不能 就此達成統一。蘋果不願意使用提議的Ogg Theora編碼譯碼器,但Opera和Mozilla也不願意支付由於他們的瀏覽器裝載H.264編碼譯碼器而造成的許可費用。Google同時支持兩 者,微軟面對爭論,遠遠的置身事外,因為他現在根本沒有計划去支持HTML 5的視頻元素。

面對瀏覽器製造商的僵持局面,HTML 5善意的獨裁者Ian Hickson甩了甩他的手並說到去他媽的。所以HTML 5規範中沒有特別指名或規定的視頻編碼解碼器。」好吧,引用到這兒。

如今的情況是,微軟終於陷進去了,但很悲劇的是,在IE 9中只支持H.264。同時,Googe終於在I/O大會上發佈了開源的視頻封裝格式webM和視頻編碼格式VP8。Opera、Mozilla、 Chrome宣佈將完全支持VP8,IE宣佈部分支持(需要裝一個插件,但如果我沒記錯的話,HTML5的一個願景就是脫離瀏覽器插件,微軟真是讓人覺得 悲劇)。

蘋果決定不支持VP8,喬布斯認為VP8在質量或效率方面不如H.264,不能滿足其產品的要求。另外最新消息表明VP8還有可能牽扯到專利的問題 (如果真的侵犯專利的話,Opera和Firefox估計馬上會無視VP8的)。

說了這麼多,其實說到底就是,現在如果要在頁面中使用<video>標籤,需要考慮三種情況,支持Ogg Theora或者VP8(如果這玩意兒沒出事的話)的(Opera、Mozilla、Chrome),支持H.264的(Safari、IE 9、Chrome),都不支持的(IE6、7、8)。

好吧,現在讓我們從技術層面來認識HTML 5的視頻,包括<video>標籤的使用,視頻對象可以用到的媒介屬性和方法,以及媒介事件。

2 Video標籤的使用

Video標籤含有src、poster、preload、autoplay、loop、controls、width、height等幾個屬性, 以及一個內部使用的標籤<source>。

Video標籤內除了可以包含<source>標籤外,還可以包含當指定的視頻都不能播放時,返回的內容。

2.1 src屬性和poster屬性

你能想像src屬性是用來幹啥的。跟<img>標籤的一樣,這個屬性用於指定視頻的地址。

而poster屬性用於指定一張圖片,在當前視頻數據無效時顯示(預覽圖)。視頻數據無效可能是視頻正在加載,可能是視頻地址錯誤等等。

 

 2.2 preload屬性

這個屬性也能通過名字瞭解用處,此屬性用於定義視頻是否預加載。屬性有三個可選擇的值:none、metadata、auto。如果不使用此屬性, 默認為auto。

None:不進行預加載。使用此屬性值,可能是頁面製作者認為用戶不期望此視頻,或者減少HTTP請求。

Metadata:部分預加載。使用此屬性值,代表頁面製作者認為用戶不期望此視頻,但為用戶提供一些元數據(包括尺寸,第一幀,曲目列表,持續時 間等等)。

Auto:全部預加載。

 2.3 autoplay屬性

又是一個看名字知道用處的屬性。Autoplay屬性用於設置視頻是否自動播放,是一個布爾屬性。當出現時,表示自動播放,去掉是表示不自動播放。

注意,HTML中佈爾屬性的值不是true和false。正確的用法是,在標籤中使用此屬性表示true,此時屬性要麼沒有值,要麼其值恆等於他的 名字(此處,自動播放為<video autoplay />或者<video autoplay=」autoplay」 />);而在標籤中不使用此屬性表示false(此處不進行自動播放為<video />)。

 2.4 loop屬性

一目瞭然,loop屬性用於指定視頻是否循環播放,同樣是一個布爾屬性。

 2.5 controls屬性

Controls屬性用於向瀏覽器指明頁面製作者沒有使用腳本生成播放控制器,需要瀏覽器啟用本身的播放控制欄。

控制欄須包括播放暫停控制,播放進度控制,音量控制等等。

每個瀏覽器默認的播放控制欄在界面上不一樣。由於我瀏覽器的詭異問題,Firefox和Safari的Video不正常,所以這兩個只能在網上找截 圖了。

 2.6 width屬性和height屬性

屬於標籤的通用屬性了,這個不用多說。

2.7 source標籤

Source標籤用於給媒體(因為audio標籤同樣可以包含此標籤,所以這兒用媒體,而不是視頻)指定多個可選擇的(瀏覽器最終只能選一個)文件 地址,且只能在媒體標籤沒有使用src屬性時使用。

瀏覽器按source標籤的順序檢測標籤指定的視頻是否能夠播放(可能是視頻格式不支持,視頻不存在等等),如果不能播放,換下一個。此方法多用於 兼容不同的瀏覽器。Source標籤本身不代表任何含義,不能單獨出現。

此標籤包含src、type、media三個屬性。

src屬性:用於指定媒體的地址,和video標籤的一樣。

Type屬性:用於說明src屬性指定媒體的類型,幫助瀏覽器在獲取媒體前判斷是否支持此類別的媒體格式。具體的屬性值,請參見W3C的文檔

Media屬性:用於說明媒體在何種媒介中使用,不設置時默認值為all,表示支持所有媒介。你想到<style>標籤的media屬 性了麼?一樣一樣一樣的。

 2.8 一個完整的例子

這段代碼在頁面中定義了一個視頻,此視頻的預覽圖為poster的屬性值,顯示瀏覽器的默認媒體控制欄,預加載視頻的元數據,循環播放,寬度為 900像素,高度為240像素。

第一選擇視頻地址為第一個source標籤的src屬性值,視頻類別為Ogg視頻,視頻編碼譯碼器為Theora,音頻編碼譯碼器為Vorbis, 播放媒介為顯示器;第二選擇視頻地址不再累述。

如果你還要兼容IE的話,可以在最後一個source標籤後再加上Flash播放器的標籤集,或者使用一點JavaScript代碼。具體可以查看這 篇文章

3 媒介屬性

媒介屬性包括error、currentsrc、networkState、preload、buffered、readyState、 seeking、currentTime、startTime、duration、paused、defaultPlaybackRate、 playbackRate、played、seekable、ended、autoplay、loop、controls、volume、muted等, 可以用於返回或改變媒介的狀態。

注意:以下使用到的「media」統一代表一個視頻元素。如下圖所示:

3.1 error屬性

只讀屬性。使用media.error返回一個MediaError對象表明當前的錯誤狀態,如果沒有出錯,返回null。

使用media.error.code返回媒介的錯誤狀態,共有4個可能值。

MEDIA_ERR_ABORTED(數字值為1):媒體資源獲取異常;

MEDIA_ERR_NETWORK(數字值為2):網絡錯誤;

MEDIA_ERR_DECODE(數字值為3):媒體解碼錯誤;

MEDIA_ERR_SRC_NOT_SUPPORTED(數字值為4):視頻格式被不支持。

 

3.2 currentSrc屬性

只讀屬性。使用media.currentSrc返回該媒介標籤的src屬性值。

 

3.3 networkState屬性

只讀屬性。使用media.networkState返回媒介的網絡狀態,共有4個可能值。

NETWORK_EMPTY(數字值為0):尚未初始化;

NETWORK_IDLE(數字值為1):加載完成,網絡空閒;

NETWORK_LOADING(數字值為2):視頻加載中;

NETWORK_NO_SOURCE(數字值為3):加載失敗。

3.4 preload屬性

可讀寫屬性。使用media.preload返回媒介標籤的preload屬性值,或者對其進行賦值,改變媒介標籤的preload屬性值。 

3.5 buffered屬性

只讀屬性。使用media.buffered返回一個TimeRanges對象,確認瀏覽器已緩存媒介文件。

3.6 readyState屬性

只讀屬性。使用media.readyState返回媒介當前播放位置的就緒狀態,共有5個可能值。

HAVE_NOTHING(數字值為0):當前播放位置無有效媒介資源;

HAVE_METADATA(數字值為1):加載中,媒介資源確認存在,但當前位置沒有能夠加載到有效媒介數據進行播放;

HAVE_CURRENT_DATA(數字值為2):已獲取到當前播放數據,但沒有足夠的數據進行播放;

HAVE_FUTURE_DATA(數字值為3):已獲取到後續播放數據,可以進行播放;

HAVE_ENOUGH_DATA(數字值為4):可以進行播放,且瀏覽器確認媒體數據以某一種速度進行加載,可以保證有足夠的後續數據進行播放, 而不會使瀏覽器的播放進度趕上加載數據的末端。

3.7 seeking、seekable屬性

均為只讀屬性。

使用media.seeking返回一個布爾值,表明瀏覽器是否正在請求數據,ture表示瀏覽器正在請求數據,false表示瀏覽器已停止請求。

使用media.seekable發揮一個TimeRanges對象,表明可以對當前媒介資源進行請求。

3.8 currentTime、startTime、duration屬性

三者的值均為時間,單位為秒,currentTime為可讀寫屬性,其餘兩個均為只讀屬性。

使用media.currentTime返回當前媒介的播放位置,或者對其賦值,改變媒介的播放位置。

對於使用media.currentTime的時候,如果返回的時間超出了瀏覽器的請求能力,將拋出一個INDEX_SIZE_ERR異常;如果沒 有選中的媒體資源,將拋出一個INVALID_STATE_ERR異常。

使用media.startTime返回媒介文件播放的開始時間,通常為0。

使用media.duration返回媒介文件總的播放時長。

 

3.9 played、paused、ended屬性

三者均為只讀屬性。

使用media. played返回一個TimeRanges對象,標明瀏覽器已播放的媒介資源範圍。

使用media.paused返回一個布爾值,表明媒介是否暫停播放,ture表示媒介暫停播放,false表示媒介正在播放。

使用media.ended返回一個布爾值,表明媒介是否已結束,ture表示媒介已經播放完畢,false表示還未播放完畢。

3.10 defaultPlaybackRate、playbackRate屬性

兩者均為可讀寫屬性。

使用media.defaultPlaybackRate返回媒介默認的播放速率,或對其賦值,改變媒介的默認播放速率。

使用media.playbackRate返回當前的媒介播放速率,或對其賦值,改變當前的媒介播放速率。

3.11 autoplay、loop屬性

兩者均為可讀寫屬性。

使用media.autoplay返回一個布爾值,表明當前媒介是否設置了自動播放,ture表示當前媒介為自動播放,false表示非自動播放, 或對其賦值,設置是否自動播放。

使用media.loop返回一個布爾值,表明當前媒介是否設置了循環播放,ture表示當前媒介設置了循環播放,false表示沒有設置循環播 放,或對其賦值,設置是否循環播放。

 

3.12 controls、volume、muted屬性

三者均為可讀寫屬性。

使用media.controls返回一個布爾值,表明當前媒介是否使用了瀏覽器默認的播放控制欄,ture表示加載了,false表示沒有加載, 或對其賦值,設置是否使用瀏覽器默認的播放控制欄。

使用media.volume返回當前媒介的音量值,或對其賦值,改變媒介的播放音量,範圍為0到1,0相當於靜音,1為最大音量。

使用media.muted返回一個布爾值,表明當前媒介播放是否開啟靜音,ture表示沒有開啟靜音,false表示靜音,或對其賦值,設置播放 是否靜音。

4 媒介方法

4.1 play()、pause()、load()方法

使用media.play()播放視頻,並會將media.paused的值強行設為false。

使用media.pause()暫停視頻,並會將media.paused的值強行設為ture。

使用media.load()重新載入視頻,並會將media.playbackRate的值強行設為 media.defaultPlaybackRate的值,且強行將media.error的值設為null。

 

4.2 canPlayType(type)方法

使用canPlayType(type)方法測試瀏覽器是否支持特定的媒介類型。其中,type參數和1.1.7節中介紹的type屬性是相同的。

方法返回3個可能值(均為瀏覽器判斷的結果)。

空字符串:瀏覽器不支持此種媒體類型;

maybe:瀏覽器可能支持此種媒體類型;

probably:瀏覽器確定支持此種媒體類型。

5 媒介事件

媒介事件可以作用於各種媒介元素,如視頻、音頻、圖片等,主要包括loadstart、progress、suspend、abort、 error、emptied、stalled、play、pause、loadedmetadata、loadeddata、waiting、 playing、canplay、canplaythrough、seeking、seeked、timeupdate、ended、 ratechange、durationchange、volumechange等事件。

5.1 事件處理方式

一般有兩種方式處理事件。

一種是監聽的方式:addEventListener(「事件名」,處理函數,處理方式)。例如,如果需要在瀏覽器對媒介進行播放時執行 begin_playing函數,那麼可以這樣,media. addEventListener(「play」, begin_playing,false)。

另一種是直接賦值的方式:on時間名=處理函數,這是我們相對用的較多的方法,也就是「當XXX事件觸發時」。例如,要進行和上面相同的處理,可以 這樣media.onplay= begin_playing。

5.2 事件介紹

 

6 Video完結

W3C網站上有一個關於HTML 5視頻的舉例,很好的說明了所有前面介紹的標籤的使用,屬性和方法以及事件的應用,非常直觀。隨便還可以通過這個頁面查看瀏覽器對HTML 5視頻各個方面的支持情況。

文檔的第一章,關於HTML 5視頻的相關知識背景和技術規範就差不多介紹完了,整章的內容不是文字就是代碼,有圖也幾乎是代碼截圖。後續還會有第二章、第三章……HTML 5引入了很多強大的新內容,我們有很多東西需要去學

  评论这张
 
阅读(697)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017