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