当前位置：首页 > news >正文

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

news 2025/8/6 9:31:12

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

出现问题原因：
ios拿到视频流前需要预加载视频，如果当前视频流还没有打开过，ios拿不到视频流的缓存，这时候ios会一直转圈直到报错

解决思路：
（1）先打开一个播放窗口，提前加载视频流
（2）判断当前video的 readyState 属性
（3）当readyState的状态码不等于0时，创建当前预览的video

html代码：

 <!-- 视频播放 start--><div class="monitor-preview__video"><div id="videoBox" style="width: 94vw; height: 25vh;"><videoid="VideoPreview"class="video-js vjs-default-skin vjs-big-play-centered"controlsstyle='width: 100%;height: 100%;'x5-video-player-fullscreen="true"webkit-playsinlinex5-playsinlineplaysinlinex-webkit-airplay="allow"><source :src="this.formData.path" type="application/x-mpegURL"></video></div></div><!-- 视频播放 end--><!-- ios 直接打开视频预览有问题，所以这里搞一个播放预加载界面start--><div id="copyVideoBox" v-show="false"><videoid="copyVideoPreview"class="video-js vjs-default-skin vjs-big-play-centered"controlspreload="metadata"style='width: 0;height: 0;'x5-video-player-fullscreen="true"webkit-playsinlinex5-playsinlineplaysinlinex-webkit-airplay="allow"autoplay><source :src="this.formData.path" type="application/x-mpegURL"></video></div><!-- 取一个预加载界面end-->

js代码：

    /*** @param device 设备信息* 切换视频*/async checkDevice (device) {if (device && device.sysCameraCode) {this.formData.deviceName = device.cameraNameconst queryParams = {sysCameraCode: device.sysCameraCode,apiPath: window.location.origin}const videoRes = await this.$api.monitorPerm.preview(queryParams)this.formData.path = videoRes.result.previewUrlthis.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 = nullconst 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.paththis.$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创建预览domthis.$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.paththis.$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 = nullconst videoBox = document.getElementById('videoBox')const VideoPreview = document.getElementById('VideoPreview')if (VideoPreview) {videoBox.removeChild(VideoPreview)}}