<div>
<div v-for="(item,index) in dataList" :key="index" style="margin-bottom: 11px">
<video v-if="showFlag" :id="'tcPlayer' + index" preload="auto" width="640" height="368" playsinline
webkit-playsinline x5-playsinline></video>
</div>
</div>
</template>
<script>
export default {
name: 'Detail',
data() {
return {
tcPlayerId: 'tcPlayer' + Date.now(),
player: null,
showFlag: false,
videoFileid: '',
videoAppid: '',
dataList: []
}
},
mounted() {
let self = this
setTimeout(() =>{
self.dataList = [{
fileID: '2222222',
appID: '11111',
psign: "ccccccc"
},
{
fileID: '2222222',
appID: '11111',
psign: "cccccccc"
},
]
self.showFlag = true
self.$nextTick(() =>{
self.dataList.forEach((value, index) =>{
self.getVideoLang(value.fileID, value.appID, value.psign, 'tcPlayer' + index)
})
})
}, 1000)
},
methods: {
getVideoLang(fileID, appID, psign, id) {
const playerParam = {
fileID: fileID,
appID: appID,
psign
}
window.TCPlayer(id, playerParam)
}
}
}
</script>
<style lang="scss">
@import "https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css"
</style>
// 解决第一次进入视频不加载问题
beforeDestroy () {
this.player.dispose()
},
<template>
<div>
<video v-if="showFlag" :id="tcPlayerId" preload="auto" width="640" height="368" playsinline webkit-playsinline
x5-playsinline></video>
</div>
</template>
<script>
export default {
name: 'Detail',
data() {
return {
tcPlayerId: 'tcPlayer' + Date.now(),
player: null,
showFlag: false,
videoFileid: '',
videoAppid: '',
dataList: []
}
},
mounted() {
let self = this
setTimeout(() =>{
self.showFlag = true
self.videoFileid = ''"
self.videoAppid = '1111'
self.$nextTick(() =>{
self.getVideoLang(self.videoFileid, self.videoAppid,self.tcPlayerId)
})
}, 1000)
},
methods: {
// 初始化腾讯云播放器
getVideoLang(fileID, appID, id) {
const playerParam = {
fileID: fileID,
appID: appID,
psign: "dddddd"
}
window.TCPlayer(id, playerParam)
}
}
}
</script>
<style lang="scss">
@import "https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css"
</style>
欢迎分享,转载请注明来源:夏雨云
评论列表(0条)