当前位置: 首页 > 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;

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

http://www.lryc.cn/news/337782.html

相关文章:

  • 【C++类和对象】上篇
  • 微信订阅号环境搭建及开发者工具下载
  • Failed to resolve ‘bss.myhuaweicloud.com‘ ([Errno -2] Name or service not know
  • 大厂基础面试题(之二)
  • swiftui macOS实现加载本地html文件
  • 科技云报道:大模型加持后,数字人“更像人”了吗?
  • 轻松驾驭时间流:MYSQL日期与时间函数的实用技巧
  • 如何在极狐GitLab 使用Docker 仓库功能
  • streamlit 大模型前段界面
  • K8s 命令行工具
  • 优先级队列
  • gitlab使用
  • ppt技巧:如何将Word文档大纲中导入到幻灯片中?
  • 0.开篇:SSM+Spring Boot导学
  • 7、configMap
  • 【Java面试题】JVM(26道)
  • (十三)强缓存和协商缓存的区别
  • 如何创建Windows下google Chrome便携版?
  • rabbitmq安装rabbitmq-delayed-message-exchange插件
  • B02、分析GC日志-6.3
  • Redis中的集群(二)
  • UVA12538 Version Controlled IDE 题解 crope
  • OAuth2.0客户端和服务端Java实现
  • 物流自动分拣系统激光雷达漫反射板
  • 2024 抖音欢笑中国年(三):编辑器技巧与实践
  • Python学习入门(1)——基础语句(二)
  • vue 百度地图 使用 vue-baidu-map 进行当前位置定位和范围展示
  • 使用idea运行程序,发现控制台的中文出现乱码
  • 基于javassm实现的大学生兼职信息系统
  • O2OA开发平台如何查看数据表结构?