Basic
嵌入Video
<video id="intro" preload="auto" style="display: block;" autoplay> <source src="video/intro.mp4" type="video/mp4"> <source src="video/intro.webm" type="video/webm"> </video>
| mp4 | IE、Safari |
| webm | Chrome、Firefox |
※特殊附檔名，記得檢查主機的mime type，是否需要新增！
抓取Video
方法一
var intro = document.getElementById("intro");
方法二 / jQuery
var intro = $("#intro").get(0);
Video Event
| progress | 下載video中 |
| canplay | 可以播放video的時候 |
| canplaythrough | 播放video不會受到緩衝影響，可播放的時候 |
有很多可以參考的Event
http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
readyState屬性
0 = HAVE_NOTHING (還沒開始)
1 = HAVE_METADATA (讀取中)
2 = HAVE_CURRENT_DATA (已讀取)
3 = HAVE_FUTURE_DATA (資訊交換中)
4 = HAVE_ENOUGH_DATA (一切完成)
IE播放mp4
寬*高不可以超過1920*1088px
否則IE會無法播放，這次就遇到這個問題~卡了2-3小時在裡面...
另外，也發現windows超過這個尺寸，mp4會無法瀏覽縮圖&內容沒有尺寸
※建議是把mp4放前面，不然safari好像會有讀不到問題！
參考連結：
https://lars.st0ne.at/blog/html5+video+in+IE11+-+size+does+matter
http://msdn.microsoft.com/en-us/library/windows/desktop/dd797815%28v=vs.85%29.aspx
※因為這次有用到，loading影片跑百分比
發生某一個瀏覽器(好像是FF)無法抓到load
所以後來都改用一開始video的preload="none"
要開始loading的時候 $("#intro").attr('preload', 'auto');
當做video.play()使用~
