解决 video.js ios 播放一会行一会不行

最近用video 进行m3u8视频文件播放,但是途中遇到了 安卓和电脑端都能打开,ios有时可以播放有时播放不了

出现问题原因:

ios拿到视频流前需要预加载视频,如果当前视频流还没有打开过,ios拿不到视频流的缓存,这时候ios会一直转圈直到报错

解决思路:

(1)先打开一个播放窗口,提前加载视频流

(2)判断当前video的 readyState 属性

(3)当readyState的状态码不等于0时,创建当前预览的video

html代码:

html 复制代码
 <!-- 视频播放 start-->
    <div class="monitor-preview__video">
      <div id="videoBox" style="width: 94vw; height: 25vh;">
        <video
          id="VideoPreview"
          class="video-js vjs-default-skin vjs-big-play-centered"
          controls
          style='width: 100%;height: 100%;'
          x5-video-player-fullscreen="true"
          webkit-playsinline
          x5-playsinline
          playsinline
          x-webkit-airplay="allow"
        >
          <source :src="this.formData.path" type="application/x-mpegURL">
        </video>
      </div>

    </div>
    <!-- 视频播放 end-->

    <!-- ios 直接打开视频预览有问题,所以这里搞一个播放预加载界面start-->
    <div id="copyVideoBox" v-show="false">
      <video
        id="copyVideoPreview"
        class="video-js vjs-default-skin vjs-big-play-centered"
        controls
        preload="metadata"
        style='width: 0;height: 0;'
        x5-video-player-fullscreen="true"
        webkit-playsinline
        x5-playsinline
        playsinline
        x-webkit-airplay="allow"
        autoplay
      >
        <source :src="this.formData.path" type="application/x-mpegURL">
      </video>
    </div>
    <!-- 取一个预加载界面end-->

js代码:

javascript 复制代码
    /**
     * @param device 设备信息
     * 切换视频
     */
    async checkDevice (device) {
      if (device && device.sysCameraCode) {
        this.formData.deviceName = device.cameraName
        const queryParams = {
          sysCameraCode: device.sysCameraCode,
          apiPath: window.location.origin
        }
        const videoRes = await this.$api.monitorPerm.preview(queryParams)
        this.formData.path = videoRes.result.previewUrl
        this.prepareVideo ()
      }
    },
    
    /**
     * 预加载视频信息
     * ios 直接打开视频预览有问题,所以这里搞一个播放预加载界面start
     */
    prepareVideo () {
      const isIos = navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/)
      if (!isIos) {
        this.reloadVideoDom()
        return
      }
      // 清空旧的预览信息
      this.clearVideoDom()
      if (this.formData.copyVideo) {
        this.formData.copyVideo.dispose()
      }
      this.formData.copyVideo = null
      const videoBox = document.getElementById('copyVideoBox')
      const VideoPreview = document.getElementById('copyVideoPreview')
      if (VideoPreview) {
        videoBox.removeChild(VideoPreview)
      }
      videoBox.innerHTML = '<video\n' +
        '          id="copyVideoPreview"\n' +
        '          class="video-js vjs-default-skin vjs-big-play-centered"\n' +
        '          controls\n' +
        '          preload="metadata"\n' +
        '          style=\'width: 100%;height: 100%;\'\n' +
        '          x5-video-player-fullscreen="true"\n' +
        '          webkit-playsinline\n' +
        '          x5-playsinline\n' +
        '          playsinline\n' +
        '          x-webkit-airplay="allow"\n' +
        '          autoplay\n' +
        '        >\n' +
        `          <source src="${this.formData.path}" type="application/x-mpegURL">\n` +
        '        </video>'
      const path = this.formData.path
      this.$nextTick(() => {
        this.formData.copyVideo = this.$videojs('copyVideoPreview', {
          bigPlayButton: true,
          textTrackDisplay: false,
          posterImage: false,
          errorDisplay: true,
          controlBar: true,
          html5: {
            hls: {
              overrideNative: false
            },
            nativeVideoTracks: true,
            nativeAudioTracks: true,
            nativeTextTracks: true
          }
        }, function () {
          this.src({
            src: path,
            type: 'application/x-mpegURL'
          })
          this.play()
        })
        // 监控预加载视频状态,状态不等于0创建预览dom
        this.$nextTick(() => {
          this.formData.time = setInterval(() => {
            const myVid = this.formData.copyVideo.readyState()
            console.log('myVid', myVid)
            if (myVid !== 0) {
              clearInterval(this.formData.time)
              this.reloadVideoDom()
            }
          }, 1000)
        })
      })
    },
    
    /**
     * 创建当前需要预览的视频dom
     */
    reloadVideoDom () {
      this.clearVideoDom()
      const videoBox = document.getElementById('videoBox')
      videoBox.innerHTML = '<video\n' +
        '          id="VideoPreview"\n' +
        '          class="video-js vjs-default-skin vjs-big-play-centered"\n' +
        '          controls\n' +
        '          preload="metadata"\n' +
        '          style=\'width: 100%;height: 100%;\'\n' +
        '          x5-video-player-fullscreen="true"\n' +
        '          webkit-playsinline\n' +
        '          x5-playsinline\n' +
        '          playsinline\n' +
        '          x-webkit-airplay="allow"\n' +
        '          autoplay\n' +
        '        >\n' +
        `          <source src="${this.formData.path}" type="application/x-mpegURL">\n` +
        '        </video>'
      const path = this.formData.path
      this.$nextTick(() => {
        this.formData.video = this.$videojs('VideoPreview', {
          bigPlayButton: true,
          textTrackDisplay: false,
          posterImage: false,
          errorDisplay: true,
          controlBar: true,
          html5: {
            hls: {
              overrideNative: false
            },
            nativeVideoTracks: true,
            nativeAudioTracks: true,
            nativeTextTracks: true
          }
        }, function () {
          this.src({
            src: path,
            type: 'application/x-mpegURL'
          })
          this.play()
        })
      })
    },
    
    /**
     * 清空当前预览dom
     */
    clearVideoDom () {
      if (this.formData.video) {
        this.formData.video.dispose()
      }
      this.formData.video = null
      const videoBox = document.getElementById('videoBox')
      const VideoPreview = document.getElementById('VideoPreview')
      if (VideoPreview) {
        videoBox.removeChild(VideoPreview)
      }
    }

问题到这里就解决了

相关推荐
Y4090013 分钟前
C语言转Java语言,相同与相异之处
java·c语言·开发语言·笔记
DanB246 分钟前
html复习
javascript·microsoft·html
mascon11 分钟前
U3D打包IOS的自我总结
ios
名字不要太长 像我这样就好17 分钟前
【iOS】继承链
macos·ios·cocoa
karshey1 小时前
【IOS webview】IOS13不支持svelte 样式嵌套
ios
潜龙95271 小时前
第4.3节 iOS App生成追溯关系
macos·ios·cocoa
古月-一个C++方向的小白5 小时前
C++11之lambda表达式与包装器
开发语言·c++
沐知全栈开发6 小时前
Eclipse 生成 jar 包
开发语言
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
杭州杭州杭州7 小时前
Python笔记
开发语言·笔记·python