資訊專欄INFORMATION COLUMN
摘要：相信做過視頻需求的同學們都會很頭疼，在產品及運營同學不就是在手機上播放一段視頻么的簡單想法下，我們卻遇到了安卓的各種封面不兼容進度條展示全屏播放進度等等各種問題。但是在一些安卓手機下，該屬性兼容性太差，各種展示黑屏。
相信做過h5視頻需求的同學們都會很頭疼，在產品及運營同學“不就是在手機上播放一段視頻么？”的簡單想法下，我們卻遇到了ios、安卓的各種封面不兼容、進度條展示、全屏播放、進度等等各種問題。下面是我在做一些video相關項目的一些總結。
1.封面問題
video標簽提供了poster屬性來展示封面圖。但是在一些安卓手機下，該屬性兼容性太差，各種展示黑屏。
這里可以考慮在視頻上層添加一個div來嵌入一張圖片。
可以采用poster屬性。但是在android下，兼容性太差。可以考慮在視頻上層加一個div圖片。視頻播放是顯示video，隱藏該圖片即可。
但是經過測試，發現先隱藏video，再展示video時，會出現閃屏現象。這個是因為video為display:none時，video是屬于未激活狀態。當重新設置display:block時，video被激活。因此會出現閃屏。
這里建議將視頻設置寬度為1px。當播放時，可以將封面隱藏，再將視頻的width設置成100%;
2.全屏播放
ios全屏下全屏可以添加以下屬性 playsinline="" webkit-playsinline=""
安卓全屏下可以利用 x5-video-player-type="h5" 騰訊x5內核系的android微信和手Q內置瀏覽器webview內核，再設置x5-video-player-fullscreen="true" 啟用全屏
3.自動播放
andriod下是不允許自動播放的，即使用了video.play()，必須要用戶主動出發，可以在用戶出發滑屏或者touch的時候，用video.play()自動播放，建議可以在頁面中加一個loading頁，加一個緩沖按鈕，觸發用戶播放視頻
再者，利用微信提供的WeiXinJsBridgeReady，在微信嵌入webview全局事件出發后，視頻可以自動播放，但是手Q和其他瀏覽器還是需要手動觸發
document.addEventListener("WeiXinJsBridgeReady",function(){
video.play();
})
4.視頻的緩沖及播放問題
4.1視頻的緩沖
video的bufferd屬性可以返回TimeRanges對象，表示用戶的視頻緩沖范圍。不過緩沖會返回多個對應，應該以最后一個返回對象為準。
video.duration表示視頻的總時長。
兩者相比即可得到視頻的緩沖進度，即 video.buffered.end(video.buffered.length-1)/video.duration
4.2視頻的播放
當瀏覽器正在下載指定的音頻/視頻時，會發生 progress 事件；
當瀏覽器能夠開始播放指定視頻時，會觸發canplay事件；
當瀏覽器預計能夠在不停下來進行緩沖的情況下持續播放指定的音頻/視頻時，會觸發 canplaythrough 事件。
5.視頻銜接
我們在在視頻相關的需求時，可能需要播放不止一段視頻。這里一般有兩種解決方案：
a.將所有的視頻銜接在一起，通過video的currentTime來切換換面(這樣會有兩個問題。1.視頻過大，2.視頻更新不方便)
b.通過src來切換視頻
1.video在切換src時會有短暫的黑屏現象，可以用靜態圖片來過渡切換過程。
2.在突然切換src的時候視頻會緩沖視頻顯得不流暢。這里可以設置兩個video標簽。利用4.1中的緩沖進度，當第一視頻緩沖完成之后，可以設置第二個視頻開始緩沖。這樣可以保證用戶在切換視頻時流暢效果會好一點。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/11043.html
摘要：估計踩過微信視頻這個坑的，內心都想說上一句神經病啊而微信也終于出了個同層播放器接入規范，算是正常點了好了閑話不說，下邊進入正題標簽里的內聯播放相關屬性微信在標簽上新增了一些的私有屬性，分別是啟用同層播放。 估計踩過微信視頻這個坑的，內心都想說上一句： 神經病啊！ 而微信也終于出了個《H5同層播放器接入規范》，算是正常點了……好了閑話不說，下邊進入正題： 1. 標簽里的內聯播放相關屬性...
摘要：估計踩過微信視頻這個坑的，內心都想說上一句神經病啊而微信也終于出了個同層播放器接入規范，算是正常點了好了閑話不說，下邊進入正題標簽里的內聯播放相關屬性微信在標簽上新增了一些的私有屬性，分別是啟用同層播放。 估計踩過微信視頻這個坑的，內心都想說上一句： 神經病??！ 而微信也終于出了個《H5同層播放器接入規范》，算是正常點了……好了閑話不說，下邊進入正題： 1. 標簽里的內聯播放相關屬性...
摘要：估計踩過微信視頻這個坑的，內心都想說上一句神經病啊而微信也終于出了個同層播放器接入規范，算是正常點了好了閑話不說，下邊進入正題標簽里的內聯播放相關屬性微信在標簽上新增了一些的私有屬性，分別是啟用同層播放。 估計踩過微信視頻這個坑的，內心都想說上一句： 神經病??！ 而微信也終于出了個《H5同層播放器接入規范》，算是正常點了……好了閑話不說，下邊進入正題： 1. 標簽里的內聯播放相關屬性...
閱讀 4185·2021-11-22 13:52
閱讀 2510·2021-11-22 13:52
閱讀 3686·2021-11-19 09:59
閱讀 1188·2021-11-17 09:33
閱讀 2447·2019-08-30 10:53
閱讀 1228·2019-08-29 17:28
閱讀 1312·2019-08-29 17:03
閱讀 3102·2019-08-26 11:31
