小工具知识网

当前位置: 首页 > 行业知识 > vue3-video-play 在安卓上正常播放,在ios上不能播放,问题解决

行业知识

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永久服务器怎么开?