谷歌Chrome 53產(chǎn)品的更新時(shí)屏蔽了部分Flash特定應(yīng)用罚随，Chrome 55瀏覽器將自動(dòng)默認(rèn)使用HTML 5視頻逝淹，Chrome 58時(shí)直接以默認(rèn)的方式禁止運(yùn)行flash乡革，至此泣刹，曾經(jīng)無處不在的flash插件煌抒，終于將要退出歷史舞臺了巫湘。
圖1 - 谷歌瀏覽器已默認(rèn)禁用flash插件
作為視頻播放主要載體flash插件的退出装悲，html5視頻應(yīng)用就成了各類網(wǎng)站播放視頻時(shí)，最佳的選擇尚氛，那么诀诊，網(wǎng)站中使用html5標(biāo)簽來調(diào)用視頻，應(yīng)該注意些什么呢阅嘶？
1. 視頻文件格式的問題
HTML5調(diào)用視頻的代碼寫法參考：
您的瀏覽器不支持HTML5標(biāo)簽
由于不同瀏覽器對視頻格式的支持性不一樣属瓣，所以，用戶在引用html5時(shí)讯柔，得考慮用多個(gè)視頻文件來做適配抡蛙。例如以上代碼，在瀏覽器中執(zhí)行時(shí)魂迄，會從上到下粗截，依次播放test.webm、test.ogg捣炬、test.mp4熊昌，當(dāng)瀏覽不支持.webm格式時(shí)绽榛，會嘗試播放.ogg格式。
2. 視頻文件編碼的問題
視頻文件編碼的問題婿屹，起因是MPEG標(biāo)準(zhǔn)引起灭美。一個(gè)視頻文件，主要由視頻編碼+音頻編碼兩部分組成昂利，簡單一點(diǎn)說届腐，mp4文件格式下，還細(xì)分成多種不同標(biāo)準(zhǔn)的編碼蜂奸，例如DivX犁苏、H.264，而只有主要是H.264在html5中使用時(shí)效果最佳窝撵，阿酷本人測試過其他編碼傀顾，在html5下是不顯示畫面，也就是不支持碌奉；音頻方面短曾，也有mp3編碼、aac編碼赐劣、經(jīng)本人測試嫉拐，aac的效果最佳。文件編碼方面說了這么多魁兼，匯成簡單一點(diǎn)的總結(jié)就是：如果你要在html5中調(diào)用mp4文件婉徘，請使用 h.264的視頻編碼 + aac的音頻編碼。參考如下圖咐汞。
圖2 - 視頻文件視頻編碼和音頻編碼
3. 瀏覽器是否支持html5的video標(biāo)簽
瀏覽器產(chǎn)品市面上有各種各樣的盖呼，charome、FireFox化撕、IE几晤、QQ瀏覽器、360瀏覽器等等植阴，并且每種瀏覽器的版本對html5支持情況蟹瘾，也各不相同，那么就得在調(diào)用html5視頻標(biāo)簽時(shí)掠手，對瀏覽器的支持情況做個(gè)判斷憾朴，使用video 對象的 canPlayType 方法來實(shí)現(xiàn)，canPlayType會返回"empty"喷鸽、"maybe" 或 "probably"众雷。
var playMsg = myvideo.canPlayType('video/mp4; ');
if ("" != playMsg) { msg.innerHTML += "mp4/H.264 is " + playMsg + " supported"; }
4. 視頻結(jié)束事件的處理方法
在html5的video視頻標(biāo)簽中，視頻結(jié)束事件，是由 onended 來處理的报腔，以此可以實(shí)現(xiàn)視頻的列表連播及其他視頻播放結(jié)束時(shí)的動(dòng)作株搔。但是注意剖淀，使用時(shí)纯蛾，你需把onended加到的video標(biāo)簽中去，代碼參考如下：
您的瀏覽器不支持HTML5標(biāo)簽
function myFunction() { alert("視頻已播放結(jié)束"); }
圖3 - 視頻結(jié)束事件onended效果示意
