uniapp 内嵌安卓PAD;页面问题大致汇总
背景:uniapp video内置插件和vue-video-js插件问题;
1、video元素在uniapp会被二次编译;所以在uniapp中使用vue-video-js插件,会导致video元素无法渲染,因为html结构不正确;
解决方法:暴力修改,直接修改player.vue中的video元素获取
2、运行环境是webview; 在video没打开时,有一个巨大的灰三角形,极其难看
.video_inner .uni-video-cover-play-button{
display: none;
}
.video_inner .vjs-volume-panel, .vjs-volume-panel{
display: none !important;
}
.vjs-big-play-button{
display: none !important;
}
::v-deep .vjs-big-play-button{
display: none !important;
}
video::--webkit-media-controls-play-button {
display: none !important;
-webkit-appearance: none !important;
}
*::-webkit-media-controls-panel {
display: none!important;
-webkit-appearance: none;
}
*::--webkit-media-controls-play-button {
display: none!important;
-webkit-appearance: none;
}
*::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
3、封面问题:
1)video元素配置 poster:'图片url'
问题:问题2又出来了,干
解决:手写个img元素,src为封面,在播放开始后100ms,隐藏图片
2)封面,总不能一一截图吧?
本次项目使用的云端是七牛云,七牛云也有类似阿里云的在线视频截帧功能;
在MP4链接加参数?vframe/jpg/offset/1

4、视频问题
代码没问题,视频一直卡顿,或无法播放;本次谷歌浏览器测试无问题,一上环境就卡顿+不能播放;
webview使用的内核是腾讯x5浏览器;
原因:视频源问题,使用 url+'?avinfo'可查看七牛云视频资源的详细参数;
解决:由视频源提供者,重新调整视频格式(不是所有的mp4都是一样的),解决该问题
本文来自博客园,作者:Math点PI,个性签名:“不写bug怎么进步?”,转载请注明原文链接:https://www.cnblogs.com/MrZhous/p/17036433.html

浙公网安备 33010602011771号