行业知识
vue3-video-play 在安卓上正常播放,在ios上不能播放,问题解决
2026-11-10 00:14:43
来源:互联网转载
1.ios上autoplay需要静音,在播放后再打开声音
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.level state.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;
暂时解决,为什么出现这个问题,还不清楚,希望有大神可以解答下。
下一篇:网易mc永久服务器怎么开?