我遇到的問(wèn)題是，在nvue頁(yè)面引用video組件，然后啥也沒(méi)顯示的，顯示了無(wú)法控制播放，折騰了好久，在這里記錄下來(lái)！希望可以幫助到需要的人
我的代碼是這樣的（src換成官方的舉例）
<video id="myVideo" object-fit="cover" controls show-loading class="r-video" @ended="videoEnd()"
:vslide-gesture="true" :vslide-gesture-in-fullscreen="true"
src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4">
</video>?問(wèn)題1：視頻頁(yè)面一片空白，后來(lái)去查官方文檔是這樣說(shuō)的
我以為按照官方提示勾選 manifest.json->App 模塊權(quán)限配置->VideoPlayer 模塊就可以看到視頻了，結(jié)果重新編譯代碼后還是一片空白，百思不得其解。又檢查一遍視頻的src路徑、確定瀏覽器可以播放，復(fù)制放在微信小程序運(yùn)行也沒(méi)有問(wèn)題，又看了manifest.json文件，確實(shí)沒(méi)有問(wèn)題！后面重新打一個(gè)自定義基座就可以看到視頻了（原來(lái)是勾選之后要重新打包才生效）
問(wèn)題2：播放本地視頻？ 不是網(wǎng)絡(luò)視頻，也不是項(xiàng)目中static文件下的視頻，而是后端接口返回https視頻鏈接，然后下載到本機(jī)本地中，視頻路徑從本地讀取
因?yàn)楣咀龅氖锹糜涡袠I(yè)，需求是做一個(gè)景區(qū)的景點(diǎn)播報(bào)，一個(gè)景區(qū)可以有多個(gè)景點(diǎn)，list就是我拿到的景點(diǎn)列表，因?yàn)榕孪螺d的視頻太多占用內(nèi)存，所以先刪除再下載到本地文件中！
savedFilePath 路徑是這樣的? _doc/uniapp_save/16833647476817.mp4
//先刪除本地文件
deleteFile(list) {
uni.getSavedFileList({
success:(res)=> {
if (res.fileList.length > 0) {
for(var i=0;i<res.fileList.length;i++) {
uni.removeSavedFile({
filePath: res.fileList[i].filePath,
complete: (res) => {
console.log('刪除本地文件成功')
}
})
//循環(huán)結(jié)束
if(i == res.fileList.length - 1) {
this.filterFile(list)
}
}
} else{
this.filterFile(list)
}
}
});
},
//判斷MP3、MP4文件是否為空
filterFile(list) {
for(var i=0;i<list.length;i++) {
if(list[i].radio !='') {
this.downloadFile(i,list[i].radio,'r')
}
if(list[i].video !='') {
this.downloadFile(i,list[i].video,'v')
}
}
},
//下載文件
downloadFile(index,url,name) {
uni.downloadFile({
url: url, //下載地址接口返回
success: (data) => {
if (data.statusCode === 200) {
//文件保存到本地
uni.saveFile({
tempFilePath: data.tempFilePath, //臨時(shí)路徑
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)
},
});
},本地路徑弄到了，但是我想通過(guò)js控制播放視頻，發(fā)現(xiàn)播放不了！嘗試過(guò)多種方法
例如：
1、在組件上面ref綁定，然后通過(guò) this.$refs.myVideo.play() 也不行
2、在組件上面設(shè)置id，然后?onLoad、onReady里面創(chuàng)建createVideoContext 也不行
3、嘗試過(guò)拿到本地路徑后，再轉(zhuǎn)換一遍路徑 plus.io.convertLocalFileSystemURL(url) 也不行
?后來(lái)百度搜索，發(fā)現(xiàn)社區(qū)里有一個(gè)官方的回答是這樣的
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-435169.html
?復(fù)制放上去，這會(huì)兒可以控制播放視頻了?。?！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-435169.html
//如果緩存中的播報(bào)id和出現(xiàn)的播報(bào)id不同，那么就播報(bào)
if (uni.getStorageSync('popupIds') != id) { //這個(gè)id是每秒獲取的景點(diǎn)id
let popupIdList = uni.getStorageSync('popupIdList') || []
if(!popupIdList.includes(id)) { //判斷數(shù)組中是否包含某個(gè)值
popupIdList.push(id)
uni.setStorageSync('popupIds', id)
uni.setStorageSync('popupIdList', popupIdList)
var list = this.pointList //這是景點(diǎn)列表，音頻和視頻是本地路徑
for(var i=0;i<list.length;i++) {
console.log('bbbbbbbbbbbbb===',id,list[i].id)
if(list[i].id == id) {
this.scenic_name = list[i].name
this.scenic_image = list[i].image
this.scenic_radio = list[i].radio
if(list[i].introduce!='') {
this.scenic_introduce = HTMLParser(list[i].introduce) //獲取到的html字符；再進(jìn)行轉(zhuǎn)換
this.popup1 = true
this.popup1Num = 60
this.popup1Timer = setInterval(()=>{
this.popup1Num -= 1
if(this.popup1Num == 0) {
this.closePopup1()
}
},1000)
}
if(list[i].video !='') {
this.scenic_video = list[i].video
this.popup2 = true
this.$nextTick(() => {
this.videoContext = uni.createVideoContext("myVideo", this);
this.videoContext.play();
})
}
this.$forceUpdate()
break;
}
}
}
}到了這里，關(guān)于uni-app nvue頁(yè)面中使用video視頻播放組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
