HTML 5視頻的相關知識背景和技術規范

2020-03-24 19:10:04

字體：大中小

來源：轉載

供稿：網友

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屬性用于向瀏覽器指明頁面制作者沒有使用腳本生成播放控制器，需要瀏覽器啟用本身的播放控制欄。控制欄須包括播放暫停控制，播放進度控制，音量控制等等。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：如何使用HTML編寫郵件模版

下一篇：HTML5中判斷用戶是否正在瀏覽頁面的方法