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視訊（這樣才是真正釋放）

更多資料可以參考：