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

最新推荐文章于 2023-12-08 16:01:47 发布

jinliangy

最新推荐文章于 2023-12-08 16:01:47 发布

阅读量1k

点赞数

分类专栏：微信公众号页面文章标签： ios javascript 前端

本文链接：https://blog.csdn.net/weixin_42913264/article/details/125291558

版权

微信公众号页面专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该博客主要讨论了在iOS环境下，微信公众号网页中使用video标签通过currentTime属性跳转播放时长时遇到的黑屏问题。作者提供了详细的解决方案，包括检查用户设备类型，利用WeixinJSBridge在iOS设备上正确设置currentTime并暂停视频，避免全屏播放。代码示例展示了如何在HTML和JS中实现这一修复方法。

摘要由CSDN通过智能技术生成

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

描述

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

需求

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

方案

思路

自动播放到指定时间，将元素状态设置为暂停
将 currentTime 属性设置为指代时长，将元素播放后，延迟时间再设置为暂停
将 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()
	 }
   })
 }