iOS端video标签跳转播放时长黑屏

iOS 端 video 标签跳转播放时长黑屏

描述

环境：微信公众号网页
设备：ios 端
场景：video 标签通过 currentTime 跳转播放时长
问题：黑屏

需求

ios 端 video 标签，通过 currentTime 属性跳转播放时长后，元素为暂停状态且展示正常帧。

方案

思路

1. 自动播放到指定时间，将元素状态设置为暂停
2. 将 currentTime 属性设置为指代时长，将元素播放后，延迟时间再设置为暂停
3. 将 currentTime 属性设置为指代时长，将元素状态设置为暂停

解决

在 ios 端 video 标签状态为播放时会全屏播放，因此思路1、思路2不可取。

思路3 代码
HTML 部分

<video
   class="video-el"
   ref="videoRef"
   :src="item"
   style="background-color: #000;"
   controls
   muted
   loop
   preload="metadata"
   controlslist="nodownload nofullscreen"
 ></video>

JS 部分

/**
 * @Description 检测用户设备类型
 * @param {type} 'android | ios'
 */
export function checkUserAgent(type) {
  const u = navigator.userAgent
  const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 //android终端
  const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端

  const formatType = (type && type.toLocaleLowerCase()) || ''
  switch (formatType) {
    case 'android':
      return isAndroid
    case 'ios':
      return isIOS
    default:
      throw new Error(`请输入要检测用户设备的类型('android | ios')`)
  }
}

// 初始化播放
initPlayer() {
  // 检测用户设备类型是否为 iOS 端
  if (checkUserAgent('ios')) {
    if (window.WeixinJSBridge) {
      this.jumpCurrentTime()
    } else {
      document.addEventListener(
        'WeixinJSBridgeReady',
        function() {
          this.jumpCurrentTime()
        },
        false
      )
    }
  } else {
  	const videoEl = this.$refs.videoRef
  	if (videoEl) {
  		videoEl.currentTime = 0.2
  	}
  }
}

// 跳转当前播放时长
jumpCurrentTime() {
   window.WeixinJSBridge.invoke('getNetworkType', {}, function() {
   	 let videoEl = document.querySelector('.video-el')
	 if (videoEl ) {
	 	videoEl.currentTime = 0.2
     	videoEl.pause()
	 }
   })
 }