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
