vue3-video-play 在安卓上正常播放,在ios上不能播放,问题解决
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
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;
暂时解决,为什么出现这个问题,还不清楚,希望有大神可以解答下。
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)