谷歌 Web 開發最佳實踐手冊(2.2.2):提供傳統平臺的替代品

黃利民發表於2014-05-13

【導讀】:並不是所有平臺都支援所有的視訊格式,檢查一下主流平臺所支援的視訊格式,並且確保你的視訊在這些主流平臺中都可以執行。

在本篇課程中:

  1. 檢測所支援的視訊格式
  2. 生成多種格式的視訊
  3. 檢測所使用的視訊格式

所支援的視訊格式

使用 canPlayType() 可找出所支援的視訊格式。該方法有一個由 mime-type 和可選的解碼器組成的字串變數,返回下面這些值:

返回值 描述
(空字串) 不支援容器和/或解碼器。
maybe 或許支援容器和解碼器,但瀏覽器將需要下載一些視訊來驗證。
probably 顯然支援該格式。

Here are some examples of canPlayType() arguments and return values when run in Chrome:
這裡有些範例, canPlayType() 的引數和在Chrome執行時的返回值:

型別 返回值
video/xyz (空字串)
video/xyz; codecs="avc1.42E01E, mp4a.40.2" (空字串)
video/xyz; codecs="nonsense, noise" (空字串)
video/mp4; codecs="avc1.42E01E, mp4a.40.2" probably
video/webm maybe
video/webm; codecs="vp8, vorbis" probably

生成多種格式的視訊

有很多工具可以把同一視訊儲存為其他格式:

檢測所使用的視訊格式

想知道瀏覽器實際支援哪些視訊格式麼?

在 JavaScript 中,使用視訊的  currentSrc 屬性,可返回所使用的源。

想看這個操作的話,可以檢視這個示例:Chrome 和 Firefox 選用 chrome.webm(因為它是這兩個瀏覽器所支援的視訊格式列表的第一個條目),而 Safari 選用 chrome.mp4

打賞支援我翻譯更多好文章,謝謝!

打賞譯者

打賞支援我翻譯更多好文章,謝謝!

任選一種支付方式

谷歌 Web 開發最佳實踐手冊(2.2.2):提供傳統平臺的替代品 谷歌 Web 開發最佳實踐手冊(2.2.2):提供傳統平臺的替代品

相關文章