【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