前端音视频文件播放

一、现状

pc端浏览器和自己研发的APP中webview嵌套的h5页面，点击和滑动手势都能触发音视频播放。

小程序webview中嵌套h5无法自动播放音视频，需要用户手动触发，其中video需要用户点击才能播放，手势滑动不一定能播放，audio需要用户点击或者手势滑动才能播放。

二、问题

1.前后台切换导致音视频停止

解决方案：监听visibility事件，切到后台时pause，回到前台时play，但是回到前台时播放不一定会成功，浏览器可能认为长时间无用户操作导致播放失败。

document.addEventListener('visibilitychange', handleVisibilityChange)
document.removeEventListener('visibilitychange', handleVisibilityChange)
const handleVisibilityChange = () => {
        if (document.visibilityState === 'hidden') {
            setVisible(false)
        } else if (document.visibilityState === 'visible') {
            setVisible(true)
        }
    }

2.每隔一段时间连续播放音频，可能导致部分音频无法播放

解决方案：延时播放，先暂停再播放

const audio = document.querySelector('#audio1')
 // 解决连续音效播放，第二段无声音问题
audio && audio.pause && audio.pause()
audio && (audio.currentTime = 0)
setTimeout(() => {
    audio && audio.play && audio.play()
}, 100)

3.视频文件包含声音，可能导致正在播放的音频中断

解决方案：视频先静音，延时取消静音

const video1 = document.querySelector('#video1')
video1.muted = truevideo1 && video1.play && video1.play()
setTimeout(() => {
    video1.muted = false
}, 1000)

4.部分手机无法播放blob对应的url视频，部分手机无法播放base64格式视频

小提示：打开chrome://blob-internals/ 可以查看blob对象列表

解决方案：调用play方法，先播放blob对应的url，延时1s判断currentTime是否等于0，currentTime等于0则表示无法播放，先暂停播放，重新设置src为base64数据，再延时100ms播放。

const playVideo1 = (again) => {
      const video1: any = document.querySelector('#video1')
      // video1.playbackRate = 0.15; //设置视频播放速度为x倍
      setVideoSrc1(bloburl)
      if (again){ video1 && video1.load()}
      video1.muted = true
      video1 && video1.play && video1.play()
      setTimeout(() => {video1.muted = false}, 1000)
      if (!again) {

           video1 && video1.addEventListener('timeupdate', videoTimeUpdate)

           setTimeout(() => {

                if (video1 && video1.currentTime === 0) {

                    console.log('未正常播放视频，切换base64')

                    video1.pause()

                    setVideoSrc1(base64data)

                    setTimeout(() => { playVideo1(true)}, 100)
                }

           }, 1000)

       }
}

5.视频播放闪屏、ios部分手机播放视频第一帧出现中央小窗

解决方案：去掉object-fit样式；宽高要和视频第一帧画面尺寸相适应，width改为100%，height等比例缩放；显示隐藏控制去掉visibility样式，改为控制透明度opacity；设置视频封面poster，延时播放视频。