首页 >> 大全

uni-app nvue页面中使用video视频播放组件

2023-09-08 大全 36 作者:考证青年

我遇到的问题是,在nvue页面引用video组件,然后啥也没显示的,显示了无法控制播放,折腾了好久,在这里记录下来!希望可以帮助到需要的人

我的代码是这样的(src换成官方的举例)

问题1:视频页面一片空白,后来去查官方文档是这样说的

我以为按照官方提示勾选 .json->App 模块权限配置-> 模块就可以看到视频了,结果重新编译代码后还是一片空白,百思不得其解。又检查一遍视频的src路径、确定浏览器可以播放,复制放在微信小程序运行也没有问题,又看了.json文件,确实没有问题!后面重新打一个自定义基座就可以看到视频了(原来是勾选之后要重新打包才生效)

_uniapp自定义播放器

问题2:播放本地视频? 不是网络视频,也不是项目中文件下的视频,而是后端接口返回https视频链接,然后下载到本机本地中,视频路径从本地读取

因为公司做的是旅游行业,需求是做一个景区的景点播报,一个景区可以有多个景点,list就是我拿到的景点列表,因为怕下载的视频太多占用内存,所以先删除再下载到本地文件中!

路径是这样的 _doc//817.mp4

//先删除本地文件deleteFile(list) {uni.getSavedFileList({  success:(res)=> {  if (res.fileList.length > 0) {for(var i=0;i {console.log('删除本地文件成功')}  })//循环结束if(i == res.fileList.length - 1) {this.filterFile(list)}}  } else{this.filterFile(list)} }  });  },//判断MP3、MP4文件是否为空filterFile(list) {for(var i=0;i {if (data.statusCode === 200) {//文件保存到本地uni.saveFile({tempFilePath: data.tempFilePath,   //临时路径success: (res) => {if(name == 'r')	{this.pointList[index].radio = res.savedFilePath} else {this.pointList[index].video = res.savedFilePath}console.log('pointList===',this.pointList)}});}},fail: (err) => {console.log('下载失败',err)},});},

本地路径弄到了,但是我想通过js控制播放视频,发现播放不了!尝试过多种方法

例如:

1、在组件上面ref绑定,然后通过 this.$refs..play() 也不行

_uniapp自定义播放器

2、在组件上面设置id,然后、里面创建 也不行

3、尝试过拿到本地路径后,再转换一遍路径 plus.io.emURL(url) 也不行

后来百度搜索,发现社区里有一个官方的回答是这样的

复制放上去,这会儿可以控制播放视频了!!!

//如果缓存中的播报id和出现的播报id不同,那么就播报if (uni.getStorageSync('popupIds') != id) { //这个id是每秒获取的景点idlet popupIdList = uni.getStorageSync('popupIdList') || []if(!popupIdList.includes(id)) {  //判断数组中是否包含某个值popupIdList.push(id)uni.setStorageSync('popupIds', id)uni.setStorageSync('popupIdList', popupIdList)var list = this.pointList //这是景点列表,音频和视频是本地路径for(var i=0;i{this.popup1Num -= 1if(this.popup1Num == 0) {this.closePopup1()}},1000)}if(list[i].video !='') {this.scenic_video = list[i].videothis.popup2 = truethis.$nextTick(() => {this.videoContext = uni.createVideoContext("myVideo", this); this.videoContext.play();  })}this.$forceUpdate()break;}}}}

关于我们

最火推荐

小编推荐

联系我们


版权声明:本站内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 88@qq.com 举报,一经查实,本站将立刻删除。备案号:桂ICP备2021009421号
Powered By Z-BlogPHP.
复制成功
微信号:
我知道了