如题uniapp自带video组件在开发app过程中,遇到一些特殊格式的视频时会出现一些问题,这么隐蔽的坑都被我踩到了。
最近开发了一个这个功能
简简单单,线下测试没问题,一切ok。然而线上发现几个视频居然没有声音。一同研究之下发现这几个视频都是AC3的音频编码格式。OK既然发现问题那肯定很好解决。然而我确实大意了,没有闪。首先我想到解码。然而一个视频几百mb,这个方案不现实,而后,我在插件市场找播放器,然而免费的运行各种问题,收费的要么只支持安卓要么只支持ios要么我穷用不起。最后一个方案那就是web-view,然而web-view是全屏的,我这个页面ui可怎么弄,一通操作之后我决定用nvue嵌套web-view,虽然体验差了点,但是也没办法。谁让人家运营不愿意转个码的,后台也不愿意转个码。
贴代码给遇到同样问题的筒子们提供个思路。。
first 先搞个nvue 替换到原来的video的Dom
位置大小自己慢慢调
{
"path": "pages/trainDepot/detail/index",//课程详情
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom",
"app-plus": {
"subNVues": [{
"id": "videoPlay",
"path": "pages/nvue/videoPlay",
"style": {
"position":"absolute",
"top":"150upx",
"left":"0",
"width":"750upx",
"height":"430upx",
"background": "transparent"
}
}]
}
}
},
通信方式
//发
uni.$emit('page_video',that.playVideoItem);
//接
mounted() {
uni.$on('page_video', data => {},
}
第二步:nvue嵌套web-view跳转 到本地页面
<view class="c_box" v-if="showNvue">
<div class="list_con">
<div v-if="showThis">
<web-view style="width:750upx;height:490upx;" :webview-styles="webviewStyles" :src="url"></web-view>
</div>
</div>
</view>
每次接收到数据都让web-view 销毁一下。确保数据传过去
uni.$on('page_video', data => {
var that = this
that.showThis = false
this.showNvue = data.showNvue
setTimeout(()=>{
that.showThis = true
that.url = '/hybrid/html/local.html?id='+ encodeURIComponent(data.docUrl)
},100)
console.log(encodeURIComponent(data.docUrl))
});
第三步:web-view 如何跳转 到本地页面
提醒大家仔细看文档,当时大意了没有闪,没仔细看,怎么都跳不过去,气死自己
安卓传参数要encodeURIComponent 转码一下 ios不会有问题
做个笔记,不喜勿喷-----【安卓不能全屏-想吐🤮】