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

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;

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

相关文章:

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

1.ios上autoplay需要静音&#xff0c;在播放后再打开声音 <vue3videoPlay v-if"!isComponent" v-bind"options" :playsinline"playsinline"></vue3videoPlay>let playsinline computed(() > {if (props.isComponent) {return}o…...

【C++类和对象】上篇

&#x1f49e;&#x1f49e; 前言 hello hello~ &#xff0c;这里是大耳朵土土垚~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#x…...

微信订阅号环境搭建及开发者工具下载

目录 一、注册订阅号 1.1 选择注册 2.2 选择订阅号注册 1.3 登录进入主页面 ​编辑 1.4 可以进行自定义菜单 1.5 我们重点关注公众平台测试账号 ​编辑 1.6 自定义一个域名 1.7 用自己的微信扫描这个二维码 ​编辑 1.8 点击修改&#xff0c;并自定义个域名 二、开发…...

Failed to resolve ‘bss.myhuaweicloud.com‘ ([Errno -2] Name or service not know

Failed to resolve ‘bss.myhuaweicloud.com’ ([Errno -2] Name or service not know 解決方案&#xff1a; 修改/etc/resolv.conf文件来指定DNS服务器&#xff0c;例如添加Google的公共DNS服务器&#xff1a; nameserver 8.8.8.8 nameserver 8.8.4.4...

大厂基础面试题(之二)

Q1&#xff1a;flex布局 Flex布局容器属性包括&#xff1a; flex-direction: 定义主轴的方向&#xff0c;决定flex容器中的子元素的排列方式 flex-wrap&#xff1a;设置子元素是否换行 flex-flow&#xff1a;是flex-direction和flex-wrap的简写形式&#xff0c;用于设置容器的排…...

swiftui macOS实现加载本地html文件

import SwiftUI import WebKitstruct ContentView: View {var body: some View {VStack {Text("测试")HTMLView(htmlFileName: "localfile") // 假设你的本地 HTML 文件名为 index.html.frame(minWidth: 100, minHeight: 100) // 设置 HTMLView 的最小尺寸…...

科技云报道:大模型加持后,数字人“更像人”了吗?

科技云报道原创。 北京冬奥运AI 虚拟人手语主播、杭州亚运会数字人点火、新华社数字记者、数字航天员小诤…当随着越来越多数字人出现在人们生活中&#xff0c;整个数字人行业也朝着多元化且广泛的应用方向发展&#xff0c;快速拓展到不同行业、不同场景。 面向C端&#xff0…...

轻松驾驭时间流:MYSQL日期与时间函数的实用技巧

​&#x1f308; 个人主页&#xff1a;danci_&#x1f525; 系列专栏&#xff1a;《MYSQL应用》&#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 轻松驾驭时间流&#xff1a;MYSQL日期与时间函数的实用技巧 MYSQL日期时间函数是数据库操作中不可…...

如何在极狐GitLab 使用Docker 仓库功能

本文作者&#xff1a;徐晓伟 GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 本文主要讲述了如何在[极狐GitLab…...

streamlit 大模型前段界面

结合 langchain 一起使用的工具&#xff0c;可以显示 web 界面 pip install streamlit duckduckgo-search 运行命令 streamlit run D:\Python_project\NLP\大模型学习\test.py import os from dotenv import load_dotenv from langchain_community.llms import Tongyi load…...

K8s 命令行工具

文章目录 K8s 命令行工具kubectl 工具在任意节点使用kubectl方式创建对象命令显示和查找资源更新资源修补资源编辑资源Scale 资源删除资源查看pod信息节点相关操作 K8s 命令行工具 在搭建集群的时候&#xff0c;我们通过yum 下载了kubeadm kubelet kubectl 三个命令行工具&…...

优先级队列

优先级队列的基本使用 模拟实现上面的接口函数&#xff0c;优先级队列不是队列&#xff0c;而是类似一个堆一样的东西&#xff0c;我们先来试试它的接口函数是怎么个样子的。 需要包含的头文件是queue。 #include<iostream> #include<queue> using namespace std;…...

gitlab使用

个人笔记&#xff08;整理不易&#xff0c;有帮助&#xff0c;收藏点赞评论&#xff0c;爱你们&#xff01;&#xff01;&#xff01;你的支持是我写作的动力&#xff09; 笔记目录&#xff1a;学习笔记目录_pytest和unittest、airtest_weixin_42717928的博客-CSDN博客 个人随笔…...

ppt技巧:如何将Word文档大纲中导入到幻灯片中?

在PowerPoint中&#xff0c;将Word文档的大纲导入到新的幻灯片是一种非常实用的技巧。以下是详细的步骤&#xff1a; 首先&#xff0c;需要打开PowerPoint软件并打开原始的幻灯片文件。 在PowerPoint的顶部【开始】菜单栏中&#xff0c;找到并点击“新建幻灯片”按钮&#xff0…...

0.开篇:SSM+Spring Boot导学

1. 为什么要使用框架 Spring是一个轻量级Java开发框架&#xff0c;最早有Rod Johnson创建&#xff0c;目的是为了解决企业级应用开发的业务逻辑层和其他各层的耦合问题。 几乎当下所有企业级JavaEE开发都离不开SSM&#xff08;Spring SpringMVC MyBatis&#xff09;Spring B…...

7、configMap

1、configMap是什么 类似与pod的配置中心&#xff0c;不会因为pod的创建销毁&#xff0c;相关配置发生改变 pod定义硬编码意味着需要有效区分⽣产环境与开发过程中的pod 定义。为了能在多个环境下复⽤pod的定义&#xff0c;需要将配置从pod定义描 述中解耦出来。 2、向容器中…...

【Java面试题】JVM(26道)

文章目录 JVM面试题基础1.什么是JVM&#xff1f;2.JVM的组织架构&#xff1f; 内存管理3.JVM的内存区域是什么&#xff1f;3.1堆3.2方法区3.3程序计数器3.4Java虚拟机栈3.5本地方法栈 4.堆和栈的区别是什么&#xff1f;5.JDK1.6、1.7、1.8内存区域的变化&#xff1f;6.内存泄露…...

(十三)强缓存和协商缓存的区别

一、浏览器的缓存策略 浏览器的缓存策略是指浏览器在加载页面时如何使用和管理缓存机制。可以提高网页加载速度&#xff0c;减轻服务器负载&#xff0c;并提供更好的用户体验。常用的缓存策略有两种&#xff1a;一种是发送请求&#xff08;协商缓存&#xff09;&#xff0c;一…...

如何创建Windows下google Chrome便携版?

创建google Chrome便携版教程 准备工作&#xff1a; 1&#xff0c;下载GoogleChromePortable启动器 2&#xff0c;下载谷歌浏览器 3&#xff0c;下载7-ZIP 解压提取器 用7zip解压GoogleChromePortable&#xff0c;得到GoogleChromePortable.exe启动器 解压谷歌浏览器 用7…...

rabbitmq安装rabbitmq-delayed-message-exchange插件

下载地址&#xff1a;Community Plugins | RabbitMQ 上传到rabbitmq安装目录的/plugins目录下 我的是/usr/lcoal/rabbitmq/plugins/ 直接安装 [rootk8s-node1 rabbitmq]# rabbitmq-plugins enable rabbitmq_delayed_message_exchange [rootk8s-node1 rabbitmq]# rabbitmq-pl…...

Yahoo Finance API 金融数据接口实战指南:从技术原理到商业价值落地

Yahoo Finance API 金融数据接口实战指南&#xff1a;从技术原理到商业价值落地 【免费下载链接】YahooFinanceApi A handy Yahoo! Finance api wrapper, based on .NET Standard 2.0 项目地址: https://gitcode.com/gh_mirrors/ya/YahooFinanceApi 一、价值定位&#x…...

M3U8 开发调试神器!m3u8live.cn轻量在线播放器高效解决流媒体开发痛点

在音视频开发、直播推流、点播平台搭建的日常工作中&#xff0c;M3U8 链接有效性验证、HLS 流播放调试是高频刚需。传统方案要么需要安装 VLC 等本地播放器进行繁琐的网络串流配置&#xff0c;要么第三方工具广告泛滥、兼容性差&#xff0c;甚至需要编写测试代码才能完成简单的…...

RK3568 Android12长按电源键无反应?三步搞定关机菜单恢复

RK3568 Android12电源键功能失效排查与深度修复指南 在RK3568平台上进行Android12系统定制时&#xff0c;电源键功能异常是开发者常遇到的典型问题。不同于简单的功能缺失&#xff0c;这背后涉及系统级行为配置、手势交互逻辑和硬件抽象层的多层级适配。本文将带您从现象溯源到…...

星露谷物语模组加载器SMAPI终极指南:轻松安装与高效管理

星露谷物语模组加载器SMAPI终极指南&#xff1a;轻松安装与高效管理 【免费下载链接】SMAPI The modding API for Stardew Valley. 项目地址: https://gitcode.com/gh_mirrors/smap/SMAPI 想要让你的《星露谷物语》游戏体验焕然一新吗&#xff1f;SMAPI模组加载器就是你…...

AI建站避坑指南:10个高频问题与风险防范全解析

用AI建站虽然快&#xff0c;但过程中隐藏的风险如果没到&#xff0c;轻则内容效果差&#xff0c;重则可能有版权或合规隐患。这份避坑指南&#xff0c;围绕大家最关心的10个核心问题&#xff0c;给出客观的分析和可操作的防范建议&#xff0c;帮你安心用好AI建站工具。\### 核心…...

避开Kaggle糖尿病预测的常见坑:数据预处理、特征解读与模型调优实战指南

避开Kaggle糖尿病预测的常见坑&#xff1a;数据预处理、特征解读与模型调优实战指南 在数据科学竞赛中&#xff0c;Kaggle的Pima印第安人糖尿病预测项目是许多初学者的第一个实战项目。表面上看&#xff0c;这似乎是一个简单的二分类问题——但当你真正开始建模时&#xff0c;…...

解向量前33位是DG位置,后33位是无功补偿容量

3.基于遗传算法的配电网优化配置 主要内容&#xff1a;分布式电源、无功补偿装置接入配电网&#xff0c;考虑配电网经济性和电能质量为目标函数&#xff0c;使用遗传算法进行优化配置&#xff0c;在IEEE33节点&#xff0c;118节点系统进行了仿真验证。 文件夹内运行main函数。配…...

恒压供水系统:西门子224XP与昆仑TPC7062触摸屏的完美搭档

恒压供水西门子224XP昆仑tpc7062触摸屏.最多控制41泵&#xff0c;可直接用于项目工程 主要功能&#xff1a; 1、1-4台主泵十1辅泵、箱式、无负压式&#xff0c;一拖一,一拖多&#xff0c;一套程序适配多种供水模式。 2、实时报警和历史报警功能。 3、多种传感器支持&#xff0c…...

Anthropic Economic Index: AI对软件开发的影响 — 深度解读

原文: AI’s impact on software development 发布机构: Anthropic 解读日期: 2026年3月25日 一、研究背景与方法论 1.1 研究动机 软件开发工作虽然在现代经济中占比较小&#xff0c;但影响力巨大。过去两年&#xff0c;能够辅助甚至自动化大量编程工作的AI系统的引入&#x…...

模拟OJ1 2 3

判断素数&#xff08;改错&#xff09;作者: Turbo时间限制: 1s章节: 循环问题描述给定程序的功能是&#xff1a;判断一个整数是否是素数&#xff0c;若是输出YES&#xff0c;否则输出NO!。请改正程序中的错误&#xff0c;使它能得出正确的结果。注意&#xff1a;不得增行或删行…...