【video】video使用踩坑記錄
阿新 • • 發佈:2019-01-22
1 普通網頁上,ios視訊不能內聯式播放
如果是web app,
cordova(ionic)中,首先給video標籤加playsinline和webkit-playsinline(相容新版舊版不同的瀏覽器)
config.xml中加<preference name="AllowInlineMediaPlayback" value="true" />
2 ios視訊不支援autoplay和preload,如需自動播放,需要在頁面載入後通過js呼叫播放視訊
3 對於視訊而言,可能需要播放前顯示第一幀圖片,建議使用img標籤自己做封面,而不是使用poster,更好控制封面圖什麼時候出現和消失
4 video的一些事件,以下常用且有效:
let showLoadingFlag = false; // 是否顯示loading和封面 let videoPercent = 0; // 視訊當前的播放進度,百分比前的數值 let ifPlaying = false; // 初始是否開始播放 videoEle.addEventListener('ended', () => { console.log('video ended'); }); videoEle.addEventListener('waiting', ()=>{ console.log('waiting'); showLoadingFlag = true; }); videoEle.addEventListener('playing', ()=>{ console.log('playing'); if (!ifPlaying) { // 如果是初始時,未開始播放到開始播放,那麼開始播放 ifPlaying = true } else { // 如果是播放到一半卡主,繼續播放,那麼收起loading showLoadingFlag = false; } }); videoEle.ondurationchange = (data) => { // data.target.duration 視訊的時長,單位為秒 // data.target.currentTime 視訊當前播放到哪裡,單位為秒 // 如果要計算視訊播放的進度條 videoPercent = data.target.currentTime * 100 / data.target.duration } videoEle.ontimeupdate = (data) => { // 如果是初始時,第一次觸發更新當前播放時間,那麼收起loading(如果有封面圖,那麼建議在這裡收起封面) if (ifPlaying) { showLoadingFlag = false } // data.target.currentTime 視訊當前播放到哪裡,單位為秒 // 如果要計算視訊播放的進度條 videoPercent = data.target.currentTime * 100 / data.target.duration }
1 timeupdate和durationchange用來計算視訊播放進度和顯示總時長,當前時間
2 playing用於監聽是否真的開始播放(但是安卓上這個開始播放到真的觸發第一次timeupdate還會有一段短暫的時間,這個時候會看到video有個從原始尺寸變為設定尺寸的過程,ui上不友好,所以建議將封面圖放在第一次觸發timeupdate的時候收起,並且不使用poster而是用img也是這個原因,這樣不會看到ui上奇怪的變化,ios沒有這個問題)
5 iOS上video的bug與解決方案:
問題描述:
iOS的video,一次只允許載入大約20個視訊資源,當更多視訊出現時就無法播放。
解決方案為:
每次需要播放時給video標籤的src賦值,每次的賦值需要連結不同(加隨機數),放播放完成後需要清空src(即給src賦值為空字串),並且load視訊(這樣才是真正釋放)
更多資料可以參考: