vue3-video-play 在安卓上正常播放，在ios上不能播放，题目办理 ...

1.ios上autoplay必要静音，在播放后再打开声音

1. <vue3videoPlay  v-if="!isComponent" v-bind="options" :playsinline="playsinline"></vue3videoPlay>

复制代码

1. let playsinline = computed(() => {
2.     if (props.isComponent) {
3.         return
4.     }
5.   
6.     options.muted = false;  // 播放之后关闭静音
7.     return isIos();
8. })

复制代码

1. function isIos() {
2.       let u = navigator.userAgent;
3.       let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
4.       let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //
5.       if (isIOS) {
6.         return false;
7.       } else {
8.         return true;
9.       }
10.     }

复制代码

2.必要再初始化之后，对于video举行load.由于项目发急，直接修改组件源码。
找到init函数，修改

1. const init = (): void => {
2.    
3.   if (state.dVideo.canPlayType(props.type) || state.dVideo.canPlayType('application/vnd.apple.mpegurl')) {
4.     // state.muted = props.autoPlay
5.     // if(props.autoPlay) {
6.     //     playHandle()
7.     // }
8.     // 修改处
9.     state.dVideo.load();
10.    
11.   }
12.   // // 使用hls解码
13.   else if (Hls2.isSupported()) {
14.     Hls.detachMedia(); //解除绑定
15.     Hls.attachMedia(state.dVideo);
16.     Hls.on(Hls2.Events.MEDIA_ATTACHED, () => {
17.       Hls.loadSource(props.src);
18.       // 加载可用质量级别
19.       Hls.on('hlsManifestParsed', (ev, data) => {
20.         console.log(data)
21.         state.currentLevel = data.level
22.         state.qualityLevels = data.levels || []
23.         // state.dVideo.load();
24.       });
25.     })
27.     Hls.on('hlsLevelSwitching', (ev, data) => {
28.       console.log(data)
29.       // state.qualityLevels = Hls.levels || []
30.       console.log('LEVEL_SWITCHING')
31.       // state.dVideo.load();
32.     });
33.     Hls.on('hlsLevelSwitched', (ev, data) => {
34.       state.currentLevel = data.level
35.       // state.qualityLevels = Hls.levels || []
36.       console.log('LEVEL_SWITCHED')
37.       // state.dVideo.load();
38.     });
39.   }
40. }

复制代码

3.当ios版本低于17的时候，必要对屏幕举行点击，将vue3videoPlay组件放在用户点击的地方点击一下
4.当ios版本低于13的时候，组件内的

1. // 把颜色格式化为rgb格式
2. // const hexToRgbaColor = hexToRgba(state.color);  // 低版本 ios 13 及以下 不支持

复制代码

改成

1. const hexToRgbaColor = state.color;

复制代码

临时办理，为什么出现这个题目，还不清楚，希望有大神可以解答下。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。