个人网站论文摘要,前端和网站部署做网站的,外贸网上推广,室内设计效果图排版最近用video 进行m3u8视频文件播放#xff0c;但是途中遇到了 安卓和电脑端都能打开#xff0c;ios有时可以播放有时播放不了 出现问题原因#xff1a; ios拿到视频流前需要预加载视频#xff0c;如果当前视频流还没有打开过#xff0c;ios拿不到视频流的缓存#xff0c;…最近用video 进行m3u8视频文件播放但是途中遇到了 安卓和电脑端都能打开ios有时可以播放有时播放不了 出现问题原因 ios拿到视频流前需要预加载视频如果当前视频流还没有打开过ios拿不到视频流的缓存这时候ios会一直转圈直到报错 解决思路 1先打开一个播放窗口提前加载视频流 2判断当前video的 readyState 属性 3当readyState的状态码不等于0时创建当前预览的video html代码 !-- 视频播放 start--div classmonitor-preview__videodiv idvideoBox stylewidth: 94vw; height: 25vh;videoidVideoPreviewclassvideo-js vjs-default-skin vjs-big-play-centeredcontrolsstylewidth: 100%;height: 100%;x5-video-player-fullscreentruewebkit-playsinlinex5-playsinlineplaysinlinex-webkit-airplayallowsource :srcthis.formData.path typeapplication/x-mpegURL/video/div/div!-- 视频播放 end--!-- ios 直接打开视频预览有问题所以这里搞一个播放预加载界面start--div idcopyVideoBox v-showfalsevideoidcopyVideoPreviewclassvideo-js vjs-default-skin vjs-big-play-centeredcontrolspreloadmetadatastylewidth: 0;height: 0;x5-video-player-fullscreentruewebkit-playsinlinex5-playsinlineplaysinlinex-webkit-airplayallowautoplaysource :srcthis.formData.path typeapplication/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 idcopyVideoPreview\n classvideo-js vjs-default-skin vjs-big-play-centered\n controls\n preloadmetadata\n style\width: 100%;height: 100%;\\n x5-video-player-fullscreentrue\n webkit-playsinline\n x5-playsinline\n playsinline\n x-webkit-airplayallow\n autoplay\n \n source src${this.formData.path} typeapplication/x-mpegURL\n /videoconst 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 idVideoPreview\n classvideo-js vjs-default-skin vjs-big-play-centered\n controls\n preloadmetadata\n style\width: 100%;height: 100%;\\n x5-video-player-fullscreentrue\n webkit-playsinline\n x5-playsinline\n playsinline\n x-webkit-airplayallow\n autoplay\n \n source src${this.formData.path} typeapplication/x-mpegURL\n /videoconst 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)}}问题到这里就解决了