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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)