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.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;

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

最近更新

  1. TCP协议是安全的吗?

    2024-04-10 06:28:04       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-10 06:28:04       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-10 06:28:04       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-10 06:28:04       18 阅读

热门阅读

  1. Docker搭建Nginx+keepalived高可用负载均衡服务器

    2024-04-10 06:28:04       13 阅读
  2. 服务器负载均衡原理及算法

    2024-04-10 06:28:04       11 阅读
  3. python web 开发 - 通过venv虚拟环境,进行Flask安装

    2024-04-10 06:28:04       12 阅读
  4. Vue项目自动注入less、sass、scss、stylus全局变量

    2024-04-10 06:28:04       11 阅读