希望从此再无video

最近一年都在跟video打交道
太多坑了 现在也没踩完 突然就想来记录一下

• 一些video标签上的属性

<!-- 能实现安卓和ios视频不全屏播放，且video标签上能覆盖其他div元素 -->
<video
  preload="auto"
  autoplay
  webkit-playsinline
  playsinline
  x-webkit-airplay='allow'
  x5-video-player-type='h5-page'
  x5-video-orientation='portraint'
  x5-video-player-fullscreen='true'
  poster="">
    <source src="" type="application/x-mpegURL">
</video>

// 兼容手动全屏
if (player.requestFullscreen) {
  player.requestFullscreen()
} else if (player.webkitRequestFullScreen) {
  player.webkitRequestFullScreen()
} else if (player.mozRequestFullScreen) {
  player.mozRequestFullScreen()
} else if (player.msRequestFullscreen) {
  player.msRequestFullscreen()
} else if (player.webkitEnterFullscreen) {
  player.webkitEnterFullscreen()
}

• IOS手机

1. (微信内置浏览器内)获取视频时长 可以通过监听事件 @durationchange 但是ios手机必须跟页面有交互才会触发这个事件，在安卓手机上是video标签渲染就会触发这个事件，所以如果要获取视频的时长，要监听到用户与页面的交互（比如点击自定义控制栏的播放按钮时 调用video.pause(）去触发），video.pause(）必须

2. 接上，ios好像默认不会执行第一次手动调用的video.play()方法。解决：在video.pause()之前先调用video.play()

3. 如果想让视频跳到指定时间点，通过赋值this.$refs[‘video’].currentTime=XXX，安卓正常设置，ios大坑，需要在video.paused为false（即视频是播放状态的时候才能设置成功）。应用场景：伪直播功能，提前上传好的视频需要在用户暂定一段时间重新播放的时候视频跳到当前的时间点，模仿实时直播功能，假如视频时长为1小时，用户在播放到30分钟时暂停，过了10分钟重新播放，视频应播放到40分钟处

• Android手机

1. 算是小程序webview h5页面的一个坑，不算解决，只能算折中。obs直播推流的情况，当前页面视频正在播放的情况，如果跳转到其他页面，再返回，安卓手机上可能会出现 obs流卡顿的情况，延时10-20s都有可能。折中解决方案，跳转之前将视频暂停，重新回来的时候 点击播放 就会正常播放。

2. visibilitychange事件在跳转页面再返回当前页面的时候不会触发，然鹅ios会正常触发。

---

想到再补充~