vue 腾讯云点播播放视频（循环）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 腾讯云点播播放视频（循环）相关的知识，希望对你有一定的参考价值。
参考技术A <template><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()
,
以上是关于vue 腾讯云点播播放视频（循环）的主要内容，如果未能解决你的问题，请参考以下文章