vue3-video-play 在安卓上正常播放,在ios上不能播放,问题解决

1.ios上autoplay需要静音,在播放后再打开声音

 <vue3videoPlay  v-if="!isComponent" v-bind="options" :playsinline="playsinline"></vue3videoPlay>
let playsinline = computed(() => {if (props.isComponent) {return}options.muted = false;  // 播放之后关闭静音 return isIos();
}) 
function isIos() {let u = navigator.userAgent;let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //if (isIOS) {return false;} else {return true;}}

2.需要再初始化之后,对于video进行load.因为项目着急,直接修改组件源码。
找到init函数,修改

const init = (): void => {if (state.dVideo.canPlayType(props.type) || state.dVideo.canPlayType('application/vnd.apple.mpegurl')) {// state.muted = props.autoPlay// if(props.autoPlay) {//     playHandle()// }// 修改处state.dVideo.load();}// // 使用hls解码else if (Hls2.isSupported()) {Hls.detachMedia(); //解除绑定Hls.attachMedia(state.dVideo);Hls.on(Hls2.Events.MEDIA_ATTACHED, () => {Hls.loadSource(props.src);// 加载可用质量级别Hls.on('hlsManifestParsed', (ev, data) => {console.log(data)state.currentLevel = data.levelstate.qualityLevels = data.levels || []// state.dVideo.load();});})Hls.on('hlsLevelSwitching', (ev, data) => {console.log(data)// state.qualityLevels = Hls.levels || []console.log('LEVEL_SWITCHING')// state.dVideo.load();});Hls.on('hlsLevelSwitched', (ev, data) => {state.currentLevel = data.level// state.qualityLevels = Hls.levels || []console.log('LEVEL_SWITCHED')// state.dVideo.load();});} 
}

3.当ios版本低于17的时候,需要对屏幕进行点击,将vue3videoPlay组件放在用户点击的地方点击一下
4.当ios版本低于13的时候,组件内的

// 把颜色格式化为rgb格式
// const hexToRgbaColor = hexToRgba(state.color);  // 低版本 ios 13 及以下 不支持

改成

const hexToRgbaColor = state.color;

暂时解决,为什么出现这个问题,还不清楚,希望有大神可以解答下。

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

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

相关文章

【电路笔记】-异或门

异或门 文章目录 异或门1、概述2、数字逻辑异或门3、异或门等效电路异或逻辑函数是一个非常有用的电路,可用于许多不同类型的计算电路。 1、概述 异或门是算术运算中常用的另一种数字逻辑门,因为它可以用来给出两个二进制数的和以及错误检测和纠正电路。 在前面的文章中,我…

Photoshop 2023 中文---创意与设计的新篇章

Photoshop 2023是由Adobe Systems开发和发行的一款强大的图像处理软件&#xff0c;广泛应用于专业摄影师、设计师、艺术家等用户群体。它拥有丰富的功能和工具&#xff0c;可以轻松进行图像编辑、合成、调整和修复等任务。在Photoshop 2023中&#xff0c;智能选择功能得到了升级…

python爬虫-------urllib代理和代理池(第十七天)

&#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; &#x1f388;&#x1f388;所属专栏&#xff1a;python爬虫学习&#x1f388;&#x1f388; ✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天…

Kubernetes(k8s):深入理解k8s中的亲和性(Affinity)及其在集群调度中的应用

Kubernetes&#xff08;k8s&#xff09;&#xff1a;深入理解k8s中的亲和性&#xff08;Affinity&#xff09;及其在集群调度中的应用 1、什么是亲和性&#xff1f;2、节点亲和性&#xff08;Node Affinity&#xff09;2.1 硬性节点亲和性规则&#xff08;required&#xff09;…

paddle实现手写数字模型(一)

参考文档&#xff1a;paddle官网文档环境&#xff1a;Python 3.12.2 &#xff0c;pip 24.0 &#xff0c;paddlepaddle 2.6.0 python -m pip install paddlepaddle2.6.0 -i https://pypi.tuna.tsinghua.edu.cn/simple调试代码如下&#xff1a; LeNet.py import paddle import p…

013_NaN_in_Matlab中的非数与调试方法

Matlab中的非数与调试方法 是什么&#xff1f; Matlab编程&#xff08;计算器使用&#xff09;中经常有个错误给你&#xff0c;这句话里可能包含一个关键词NaN。大部分学生都有过被 NaN 支配的痛苦记忆。 NaN 是 Not a Number 的缩写&#xff0c;表示不是一个数字。在 Matla…

【SVN】clean up报错:Cleanup failed to process the following paths 解决方法

报错来源&#xff1a;代码更新有一个文件既不能接受自己的也不能接受别人的&#xff0c;只能取消&#xff0c;再提交提醒clean up&#xff0c;随后报标题错误。 解决方法&#xff1a;参考https://www.cnblogs.com/pinpin/p/11395438.html 注&#xff1a;如果clean up的时候有…

基于ssm项目校园快递平台系统

采用技术 基于SpringBoot框架实现的web的智慧社区系统的设计与实现~ 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringMVCMyBatis 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 页面展示效果 管理员功能 订单管理 快递管理 公告管理 公告类…

基于YOLOv5s的电动车入梯识别系统(数据集+权重+登录界面+GUI界面+mysql)

本人训练的yolov5s模型&#xff0c;准确率在98.6%左右&#xff0c;可准确完成电梯内检测电动车任务&#xff0c;并搭配了GUI检测界面&#xff0c;支持权重选择、图片检测、视频检测、摄像头检测、识别结果拍照和在线标注数据集等功能。 共有4000张左右图片&#xff0c;全部为电…

【ssh】群晖 ssh clone github 远程仓库

群晖 ssh clone github 远程仓库 终端 登录 群晖创建 rsa 密钥对 cd ~/.ssh ssh-keygen -t rsa -C "你的邮箱"查看并复制id_rsa.pub 公钥文件 把复制的内容提交至GitHub-setting-SSH and GPGkeys-Key中本地新建项目文件&#xff0c; 并clone git 代码项目 mkdir /…

机器人瓶胚检测工作站(H3U脉冲轴控制)

1、变量定义 2、程序监控1 2、 程序监控2 3、程序监控3 机器人输送料和机构的动作安全尤为重要&#xff0c;下面我们讨论下安全联锁控制逻辑

基于STM32F103单片机的时间同步项目

一、前言 本项目为前一个时间同步项目的更迭版本&#xff0c;由于之前的G031开发板没有外部晶振&#xff0c;从机守时能力几乎没有&#xff0c;5秒以上不同步从机时间就开始飞了。在考虑成本选型后&#xff0c;选择了带有外部有缘晶振的STM32F103C8T6最小单片机&#xff0c;来作…

解决mac本git安装后找不到命令的问题

不熟悉mac配置&#xff0c;折腾了半天&#xff0c;记录一下。 1.问题描述2.解决方法 1.问题描述 从https://sourceforge.net/projects/git-osx-installer/files/下载的git安装包&#xff1a; 安装时提示&#xff1a; 这里的解决办法是按住control键再打开文件安装。 安装完…

react antd 实现修改密码(原密码,新密码,再次输入新密码,新密码增加正则复杂度校验)

先看样子 组件代码&#xff1a; import React, { useState, useEffect } from react import { Row, Col, Modal, Spin, Input, Button, message, Form } from antd import { LockOutlined, EyeTwoTone, EyeInvisibleOutlined } from ant-design/icons import * as Serve from …

pyside6的QSpinBox自定义特性初步研究(二)

当前的需求是&#xff0c;蓝色背景的画面&#xff0c;需要一个相对应色系的QSpinBox部件。已有的部件风格是这样的&#xff0c;需要新的部件与之般配。 首先新建一个QDoubleSpinBox&#xff0c;并定义其背景色和边框&#xff1a; QDoubleSpinBox { color: white; border:1px…

基于无线物联网的智能配电监控系统设计应用

摘要&#xff1a;阐述基于电力物联网的智能配电监控系统的特点&#xff0c;探讨物联网结构及其关键技术&#xff0c;电力物联网下的智能配电监控系统设计&#xff0c;包括整体结构设计、硬件和软件系统设计。 安科瑞薛瑶瑶18701709087 关键词&#xff1a;电力物联网&#xff…

【好用】推荐10套后端管理系统前端模板

后台管理系统前端模板是开发者在构建后台管理系统时使用的一种工具&#xff0c;它提供了预先设计好的界面和组件&#xff0c;以帮助开发者快速搭建出功能完善、用户体验良好的管理系统。以下是V哥整理的10款流行的后台管理系统前端模板&#xff0c;它们基于不同的技术栈和设计理…

zookeeper分布式应用程序协调服务

一、zookeeper基本介绍 1.1 zookeeper的概念 Zookeeper是一个开源的分布式的&#xff0c;为分布式框架提供协调服务的Apache项目。 是Hadoop和Hbase的重要组件。它是一个为分布式应用提供一致性服务的软件&#xff0c;提供的功能包括&#xff1a;配置维护、域名服务、…

[Python图像识别] 五十二.水书图像识别 (2)基于机器学习的濒危水书古文字识别研究

该系列文章是讲解Python OpenCV图像处理知识,前期主要讲解图像入门、OpenCV基础用法,中期讲解图像处理的各种算法,包括图像锐化算子、图像增强技术、图像分割等,后期结合深度学习研究图像识别、图像分类应用。目前我进入第二阶段Python图像识别,该部分主要以目标检测、图像…

CVPR 2024 | Retrieval-Augmented Open-Vocabulary Object Detection

CVPR 2024 - Retrieval-Augmented Open-Vocabulary Object Detection 论文&#xff1a;https://arxiv.org/abs/2404.05687代码&#xff1a;https://github.com/mlvlab/RALF原始文档&#xff1a;https://github.com/lartpang/blog/issues/13 本文提出了一种新的开放词汇目标检…