【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