解决 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)}}

问题到这里就解决了

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【AI-Fix】解决地图展示包leafmap在Jupyter NoteBook中地图不显示的问题

1. 问题描述 新创建的环境想使用leafmap在Jupyter中进行地图展示&#xff0c;结果发现运行完成之后不显示&#xff0c;不论怎么重启都没有办法显示出来&#xff0c;以经验来看&#xff0c;多半是缺了包了。 于是去leafmap的官方文档查找原因&#xff0c;一开始并没有发现什么问…

C++ 拷贝构造函数

目录 拷贝构造函数概述 拷贝构造函数特性 拷贝构造函数概述 当我们定义好一个类&#xff0c;不做任何处理时&#xff0c;编译器会自动生成以下6个默认成员函数&#xff1a; 默认成员函数&#xff1a;如果用户没有手动实现&#xff0c;则编译器会自动生成的成员函数。 同样&…

怎么学C++

学习目标&#xff1a; 一篇文章教你怎么学 C 学习内容&#xff1a; 怎么学C 学习时间&#xff1a; 什么时候都行 学习产出&#xff1a; CSDN 技术博客 1 篇 主文 以下是学习C的一些基本步骤&#xff1a; 学习C语言基础&#xff1a;包括数据类型、运算符、控制语句等内容。 学…

JavaWeb(十)

一、JavaWeb概述 Web&#xff1a;全球广域网&#xff0c;也称为万维网(www)&#xff0c;能够通过浏览器访问的网站。 JavaWeb&#xff1a;使用 Java技术进行web互联网开发。 二、JavaWeb 技术栈 2.1、B/S 架构 B/S 架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器…

解决找不到msvcr120.dll无法执行代码的4个方法,快来看看解决方法!

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中最常见的就是“缺少xxx.dll文件”。而msvcr120.dll就是其中之一。那么&#xff0c;msvcr120.dll到底是什么呢&#xff1f;它又有什么作用呢&#xff1f;本文将从多个方面对msvcr120.dll进行详细的解析…

华为鸿蒙爆发真实力!原生应用媲美iOS,使用流畅度将提升20至30%

随着华为鸿蒙原生应用开发计划的启动&#xff0c;一场席卷全球的科技浪潮正在涌动。鸿蒙生态的快速发展&#xff0c;吸引了无数企业和开发者的关注&#xff0c;他们纷纷拥抱这个新兴的生态系统&#xff0c;共同构建一个更加繁荣的鸿蒙世界。 华为鸿蒙原生应用开发计划引爆全球…

Java中的并发编程:深入理解CountDownLatch

Java中的并发编程&#xff1a;深入理解CountDownLatch 本文将深入探讨Java中的并发编程&#xff0c;重点关注CountDownLatch的使用。通过理解这些概念和技术&#xff0c;我们可以编写出更高效、稳定的Java程序。 一、CountDownLatch简介 CountDownLatch是Java中的一个同步工具…

编程常见的问题

在现代社会中&#xff0c;编程已经成为一项非常重要的技能。随着科技的不断发展和普及&#xff0c;计算机已经渗透到我们生活的方方面面&#xff0c;从个人电脑、手机到智能家居、自动驾驶等。编程作为计算机科学的基础&#xff0c;为我们提供了解决问题和创造新事物的工具和方…

【电路笔记】-交流电路中的电阻器

交流电路中的电阻器 文章目录 交流电路中的电阻器1、概述2、交流电路中的电阻器示例 13、交流电路中的电阻器示例2 电阻器也可用于交流电源&#xff0c;其中消耗的电压、电流和功率以有效值给出。 1、概述 在之前的文章中&#xff0c;我们研究了电阻器及其连接&#xff0c;并使…

Leetcode刷题笔记题解(C++):BM11 链表相加(二)

思路&#xff1a;先对两个链表进行反转&#xff0c;反转求和注意进位运算&#xff0c;求和完成之后再进行反转得到结果 /*** struct ListNode {* int val;* struct ListNode *next;* ListNode(int x) : val(x), next(nullptr) {}* };*/ #include <cstddef> class Soluti…

Excel 删除空白行

目录 一. 方式一: 筛选删除二. 方式二: 定位条件三. 方式三: 隐藏非空白行&#xff0c;删除空白行 一. 方式一: 筛选删除 选中空白行对应的列&#xff0c;按下Ctrl Shift L&#xff0c;给列添加过滤条件。过滤出空白行&#xff0c;然后删除即可。 二. 方式二: 定位条件 按下…

【Qt】QLineEdit显示输入十六进制,位数不足时按照规则填充显示及每两个字符以空格填充

问题 在实际开发中&#xff0c;有时候需要对输入进行限制&#xff0c;一是更加合理&#xff0c;二是防止出现误操作。 比如&#xff1a; 使用Qt进行应用程序开发时&#xff0c;对单行编辑框QLineEdit控件&#xff0c;设置只可输入十六进制。 限制输入的方式常用且经典的是使用…

Linux常用指令详解

目录 前言&#xff1a; Linux的目录结构 Linux常用指令简介 whoami指令 ls指令 pwd指令 cd指令 tree指令 touch指令 mkdir指令 rmdir指令与rm指令 man指令 cp&#xff08;copy&#xff09;指令 mv&#xff08;move&#xff09;指令 cat指令 重定向及重定向的类型…

Redis——某马点评day03——part2:秒杀业务异步优化

异步秒杀思路 原本的流程是如下所示&#xff0c;必须从开始到创建订单成功才会返回响应。就像饭店里面从下单到上菜都是一个人在服务&#xff0c;就导致服务员利用率很低&#xff0c;后一个顾客要等到前一个顾客上完菜才可以下单。 最简单的优化就是加员工&#xff0c;一次性…

前端实现手机短信验证码倒计时效果

实现效果&#xff1a;实现按钮倒计时10s后可重新发送验证码 一、思路 1、禁用按钮&#xff0c;调用后端接口&#xff0c;获取验证码 2、setTimeOut(() > {},1000)延迟1s执行&#xff0c;time - 1&#xff0c;返回文案&#xff0c;9s 3、迭代处理&#xff0c;调用自身函数&a…

6.1810: Operating System Engineering 2023 <Lab3: page tables>

一、本节任务 实验环境&#xff1a; 二、要点 如何防止程序破坏内核或其他进程空间&#xff1f;隔离地址空间&#xff0c;进程只能读写自己的内存空间。 在保证隔离的同时&#xff0c;如何将多个地址空间复用到一个物理内存上&#xff1f;虚拟内存/页表。操作系统通过页表来为…

DDSP-SVC-3.0完全指南:一步步教你用AI声音开启音乐之旅

本教程教你怎么使用工具训练数据集推理出你想要转换的声音音频&#xff0c;并且教你处理剪辑伴奏和训练后的音频合并一起&#xff0c;快来试试看把&#xff01; 1.使用的工具 要想训练ai声音&#xff0c;首先需要有各种工具&#xff0c;还需要我们提供你需要训练的声音&#…

Avalonia中如何将View事件映射到ViewModel层

前言 前面的文章里面我们有介绍在Wpf中如何在View层将事件映射到ViewModel层的文章&#xff0c;传送门&#xff0c;既然WPF和Avalonia是两套不同的前端框架&#xff0c;那么WPF里面实现模式肯定在这边就用不了&#xff0c;本篇我们将分享一下如何在Avalonia前端框架下面将事件…

陀螺仪LSM6DSV16X与AI集成(2)----姿态解算

陀螺仪LSM6DSV16X与AI集成.2--姿态解算 概述视频教学样品申请完整代码下载欧拉角万向节死锁四元数法姿态解算双环PI控制器偏航角陀螺仪解析代码上位机通讯加速度演示陀螺仪工作方式主程序演示 概述 LSM6DSV16X包含三轴陀螺仪与三轴加速度计。 姿态有多种数学表示方式&#xff…

多人聊天室

多人聊天包 由于要先创建服务面板&#xff0c;接收客户端连接的信息&#xff0c;此代码使用顺序为先启动服务端&#xff0c;在启动客户端&#xff0c;服务端不用关&#xff0c;不然会报错。多运行几次客户端&#xff0c;实现单人聊天 1.创建服务面板 package yiduiy;import j…