app内嵌h5 视频播放器踩坑

app内嵌h5 视频播放器踩坑

第一篇文章是关于在app中嵌入h5开发视频播放器并踩坑

视频自动以ios默认全屏播放方式播放。 在微信、飞书等内置浏览器中打开h5，调用方法，自动旋转导致视频进度条拖动错误。

查看 MDN 来了解一下

网页加载完成后立即播放音频（或带音轨的视频）可能会意外打断用户。 虽然自动播放媒体文件是一个有用的功能，但我们应该谨慎使用它，并且仅在需要时使用它。 为了给用户控制权，浏览器通常提供各种方法来禁用自动播放音频。

由于浏览器有自动播放策略，当视频无法自动播放时需要进行处理。 总结一下找到的几种方法。

1. 将视频静音。 静音时可以自动播放视频，但视频没有声音。

复制代码

2、调用video标签的play方法返回1，可以根据状态检查是否可以自动播放并进行相应的处理。

// 检测h5能否自动播放
export function isAutoPlay() {
  return new Promise((resolve, reject) => {
    const video = document.createElement('video')
    document.body.appendChild(video)
    const startPlayPromise = video.play()
    if (startPlayPromise !== undefined) {
      startPlayPromise
        .then(() => {
          resolve()
        })
        .catch((error) => {
          if (error.name === 'NotAllowedError') {
            reject(new Error("can't autoPlay"))
          } else {
            reject(error.message)
          }
        })
        .finally(() => {
          document.body.removeChild(video)
        })
    }
  })
}
复制代码

3.在播放视频之前引导用户与网页进行交互。

在ios中，播放视频时，默认会全屏播放，需要在video标签上设置

//视频播放时局域播放
playsinline="true" 
webkit-playsinline="true"
复制代码

注意：但是这个属性比较特殊，比如需要嵌入网页的APP中yback = YES

如果还需要ios能够自动播放，还需要ios进行设置。

为了让App上的播放器与设计图保持一致，手写了一个简单的播放器，需要在其上实现全屏功能。

直接使用浏览器自带的方法，检查兼容性，发现ios设备对这个属性支持不是很好。

最后我决定用css来模拟app内部打开的h5的全屏效果。 暂时没有更好的解决办法。 直接直接铺开父元素，视频标签在其中居中，高度按照width:100%自适应。

在app外，使用方法对元素进行全屏操作

    full() {
    //通过jsBridge来判断是否app环境
      if (this.jsBridge.check()) {
        this.isFull = !this.isFull
      } else if (!document.fullscreenEnabled) {
        this.isFull = !this.isFull
      } else if (this.isFull) {
      //推出全屏判断各浏览器兼容性
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else {
          document.webkitExitFullscreen()
        }
        this.isFull = false
      } else {
      //进入全屏判断各浏览器兼容性
        const video = document.querySelector('.video')
        if (video.requestFullscreen) {
          video.requestFullscreen()
        } else if (video.mozRequestFullScreen) {
          video.mozRequestFullScreen()
        } else if (video.webkitRequestFullscreen) {
          video.webkitRequestFullscreen()
        } else if (video.msRequestFullScreen) {
          video.msRequestFullScreen()
        }
        this.isFull = true
      }
      // const video = this.$refs.video
    },
复制代码

当我们使用微信内置浏览器打开h5播放视频时，调用微信浏览器的方法，浏览器自动对我们的视频进行横屏操作，导致拖拽功能出错进度条。

进度条拖动功能实现步骤：

获取进度条元素相对于页面的左右以及自身的宽度

    getOffsetInfo() {
      this.left = document.getElementsByClassName('progress-box')[0].getBoundingClientRect().left
      this.right = document.getElementsByClassName('progress-box')[0].getBoundingClientRect().right
      this.domWidth = document.getElementsByClassName('progress-box')[0].clientWidth
    },
复制代码

当进度条的触摸事件被触发时，获取触摸点的坐标。 当前进度 = ((触摸点x坐标-进度条左侧)/进度条宽度) * 100

    computedNowPosition() {
      const pageX = this.startTouchPoint.pageX
      const ratio = (pageX - this.left) / this.domWidth
      //duration为当前视频总时长
      this.currentTime = ratio * this.duration
      this.$refs.video.currentTime = ratio * this.duration
      this.width = ratio * 100
    },
复制代码

在微信中打开h5，使用全屏方式。 浏览器自动旋转播放器，导致当前播放进度的计算方法出错。 经过反复查找问题，我们的左边是一开始玩家不旋转时的左边。 玩家旋转后向左改变，触发事件，所以当事件触发时，我们需要重新获取进度条的各个距离

    // 在微信或者飞书打开使用自带全屏方法，全屏时重新获取进度条相对屏幕的距离
    window.addEventListener('resize',()=>{
      this.getOffsetInfo()
    })
复制代码

以此记录掘金队的第一篇文章！ ！ ！