【video】video使用踩坑記錄

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沒有這個問題）

更多資料能夠參考：

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video

https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Media_events