html5 video標籤兼容性與自定義控件

Video不兼容IE8及以前的版本和opera mini。

格式上MPEG4/H.264兼容大部分瀏覽器，除低版本Firefox和低版本opera，這些能夠經過用ogg格式解決，而webm是一種開放、免費的格式。對於IE8及如下版本能夠嵌入<embed>標籤。

如下爲代碼：

 1 <video controls="controls" poster="mei.png">
 2                 <!-- MP4格式不兼容Firefox 20如下和opera 24如下 Safari3.1如下-->
 3                 <!-- 部分兼容FF34-21 安卓瀏覽器4.3如下 安卓ff44 UC9.9 -->
 4 
 5                 <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type="video/mp4">
 6                 <!-- <source src="video/langyabang_18.mp4" type="video/mp4"> -->
 7                 <!-- ogg格式兼容Firefox 20如下和opera 24如下 安卓ff44 UC9.9-->
 8                 <!-- 不兼容FF 2~3 Opera10.1  -->
 9                 <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.ogg" type="video/ogg">
10                 <!-- <object data="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4"> -->
11                 <!-- ie7/8有object會打開WindowsMediaPlayer -->
12                 <!-- ie7/8只有embed會正常播放 -->
13                 <!-- <img src="images/mei.png"> -->
14                     <embed src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
15                 <!-- </object> -->
16             </video>

 

推薦我用的視頻格式轉換工具，能夠直接轉換出須要的這三種格式：freemake video converter

經常使用的一些屬性與方法：

videoElement.volumn 設置或返回音量，爲0~1間的數字；

videoElement.currentTime 設置或返回當前進度，爲秒數；

videoElement.duration 返回視頻長度，爲秒數；

videoElement.paused 返回當前是否暫停；

 

videoElement.play() 開始播放；

videoElement.pause() 暫停播放；

 

 

有關全屏：

Full screen API：可讓一個元素全屏，例如video或canvas。

支持的狀況並不很好，具體見http://caniuse.com/#search=full%20screen

對於不支持的個人作法是，放大當前元素佔滿瀏覽器窗口。

 

測試狀況：

Windows7下：

Safari不能放，不是很懂。。。

在其餘瀏覽器中都正常；

IE10以前我都是讓它充滿整個瀏覽器窗口。

在米4中：

（全部瀏覽器都是最新）

實際測試時在UC中video會替換掉個人自定義控件，UC的控件能夠全屏；

小米自帶瀏覽器會直接全屏，用的好像是內置的播放器；

火狐是正常的；

微信和UC同樣；

qq和小米自帶瀏覽器差很少，都自動全屏而且用瀏覽器的控件，不過全屏下播放界面不同。

 

寫了一個很粗糙的播放器，在電腦端還能夠接受，放到手機上實在不方便，我接着改。。。

具體見：

http:\\zhangqiong.github.io\myplugins\video.html

 很差意思發現以前用的線上視頻不能訪問了

參考文檔：

全屏 https://developer.mozilla.org/zh-CN/docs/DOM/Using_fullscreen_mode

使用 HTML5 音頻和視頻 https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

Media buffering, seeking, and time ranges  https://developer.mozilla.org/zh-CN/Apps/Fundamentals/Audio_and_video_delivery/buffering_seeking_time_ranges

 當音頻/視頻處於加載過程當中時，會依次發生如下事件：http://www.w3school.com.cn/tags/av_event_durationchange.asp