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

2023-12-07 17:04

本文主要是介绍解决 video.js ios 播放一会行一会不行,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最近用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)}}

问题到这里就解决了

这篇关于解决 video.js ios 播放一会行一会不行的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/466645

相关文章

SpringBoot利用dynamic-datasource-spring-boot-starter解决多数据源问题

《SpringBoot利用dynamic-datasource-spring-boot-starter解决多数据源问题》dynamic-datasource-spring-boot-starter是一... 目录概要整体架构构想操作步骤创建数据源切换数据源后续问题小结概要自己闲暇时间想实现一个多租户平台,

VSCode中C/C++编码乱码问题的两种解决方法

《VSCode中C/C++编码乱码问题的两种解决方法》在中国地区,Windows系统中的cmd和PowerShell默认编码是GBK,但VSCode默认使用UTF-8编码,这种编码不一致会导致在VSC... 目录问题方法一:通过 Code Runner 插件调整编码配置步骤方法二:在 PowerShell

mybatis-plus分页无效问题解决

《mybatis-plus分页无效问题解决》本文主要介绍了mybatis-plus分页无效问题解决,原因是配置分页插件的版本问题,旧版本和新版本的MyBatis-Plus需要不同的分页配置,感兴趣的可... 昨天在做一www.chinasem.cn个新项目使用myBATis-plus分页一直失败,后来经过多方

电脑开机提示krpt.dll丢失怎么解决? krpt.dll文件缺失的多种解决办法

《电脑开机提示krpt.dll丢失怎么解决?krpt.dll文件缺失的多种解决办法》krpt.dll是Windows操作系统中的一个动态链接库文件,它对于系统的正常运行起着重要的作用,本文将详细介绍... 在使用 Windows 操作系统的过程中,用户有时会遇到各种错误提示,其中“找不到 krpt.dll”

Linux虚拟机不显示IP地址的解决方法(亲测有效)

《Linux虚拟机不显示IP地址的解决方法(亲测有效)》本文主要介绍了通过VMware新装的Linux系统没有IP地址的解决方法,主要步骤包括:关闭虚拟机、打开VM虚拟网络编辑器、还原VMnet8或修... 目录前言步骤0.问题情况1.关闭虚拟机2.China编程打开VM虚拟网络编辑器3.1 方法一:点击还原VM

Flask解决指定端口无法生效问题

《Flask解决指定端口无法生效问题》文章讲述了在使用PyCharm开发Flask应用时,启动地址与手动指定的IP端口不一致的问题,通过修改PyCharm的运行配置,将Flask项目的运行模式从Fla... 目录android问题重现解决方案问题重现手动指定的IP端口是app.run(host='0.0.

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D

mysql关联查询速度慢的问题及解决

《mysql关联查询速度慢的问题及解决》:本文主要介绍mysql关联查询速度慢的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql关联查询速度慢1. 记录原因1.1 在一次线上的服务中1.2 最终发现2. 解决方案3. 具体操作总结mysql

Python中Windows和macOS文件路径格式不一致的解决方法

《Python中Windows和macOS文件路径格式不一致的解决方法》在Python中,Windows和macOS的文件路径字符串格式不一致主要体现在路径分隔符上,这种差异可能导致跨平台代码在处理文... 目录方法 1:使用 os.path 模块方法 2:使用 pathlib 模块(推荐)方法 3:统一使

一文教你解决Python不支持中文路径的问题

《一文教你解决Python不支持中文路径的问题》Python是一种广泛使用的高级编程语言,然而在处理包含中文字符的文件路径时,Python有时会表现出一些不友好的行为,下面小编就来为大家介绍一下具体的... 目录问题背景解决方案1. 设置正确的文件编码2. 使用pathlib模块3. 转换路径为Unicod