DIV CSS 佈局教程網

Video Formats(視頻格式)

視頻格式就好比書面語言。一份用英文描述和一份用西班牙文描述的具有相同內容的報紙，其實它們本質都是在描述同樣的信息，但是對於只會英文的你而言，只有英文的那份對你才是真正有幫助的。同樣的，對於一個視頻而言，你的浏覽器需要“讀得懂”描述你視頻的語言。

描述視頻的語言被稱為：”codec”——一種用來將視頻編碼成為字節流的算法。目前世界上有許許多多的編碼算法，那麼你應該使用哪一個？一個不幸的事實是：不是所有的浏覽器都遵循一種視頻編碼算法，它們主要遵循兩種編碼算法，一種是Safari和iphone遵循的需要收費的，另外一種是Chromium和Mozilla Firefox支持的開源免費的。

要檢測你的浏覽器支持那種視頻格式，可以使用之前介紹的檢測方法中的第三種。如果你的浏覽器支持Html5的Video特性，那麼你用來檢測的時候創建的<video>元素會有一個叫canPlayType()的方法，這個方法可以告訴你你的浏覽器支持哪種視頻格式。

如果你不想自己親手去寫這個檢測方法的話，你可以使用Modernizr來檢測你的浏覽器支持哪種Html5的視頻格式。

JavaScript Code復制內容到剪貼板

1. if(Modernizr.video){  
2.   //let's play some video! but what kind?  
3.   if(Modernizr.video.ogg){  
4.   //try Ogg Theora+Vorbis in an Ogg container  
5.   }else if(Modernizr.video.h264){  
6.   //try H.264 video + AAC audio in an MP4 container  
7.   }  
8. }  

用來檢測Macs和iphones支持的視頻格式的方法是:

JavaScript Code復制內容到剪貼板

1. function supports_h264_baseline_video(){  
2.   if(!supports_video()){ return false; }  
3.   var v = document.createElement("video");  
4.   return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');  
5. }  

這個方法從使用之前介紹過的”supports_video()”方法來浏覽器是否支持Video特性開始。如果你的浏覽器不支持Html5 的video特性，那麼它自然也肯定不支持什麼所謂的視頻格式了。

JavaScript Code復制內容到剪貼板

1. if(!supports_video()){ return false; }  

“視頻格式”：簡簡單單一句話，其實包含了很多的東西。從技術的形式來講，你可以問：“浏覽器是否可以播放基於“H.264”的視頻和在MPEG-4容器上的AAC LC音頻（我會在後面詳細介紹視頻的章節告訴你這是什麼意思）。如果你想了解更多，你可以閱讀視頻編碼概述這篇文章

JavaScript Code復制內容到剪貼板

1. return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');  

canPlayType()方法不會返回boolean值（True或者False）。因為視頻格式非常的復雜，所以這個方法的返回值有以下幾種值：

1. “probably“如果你的浏覽器確認可以支持你傳入的視頻格式

2. “maybe”如果你的浏覽器或許可以支持你傳入的視頻格式

3. “”（空的字符串）如果你的浏覽器確認不能支持你傳入的視頻格式

第二種檢測Mozilla Firefox和其他一些開源浏覽器支持的開源視頻編碼格式的方式其實和第一種類似，唯一的不同點是你傳入的參數不同，從技術的角度來講，你可以問你的浏覽器是否支持在Ogg容器內的“Theora“視頻格式和”Vorbis”音頻格式。

JavaScript Code復制內容到剪貼板

1. function supports_ogg_theora_video(){  
2.   if(!supports_video()){ return false; }  
3.   var v = document.createElement('video');  
4.   return v.canPlayType('video/ogg; codecs="theora,vorbis"');  
5. }