vue 腾讯云点播播放视频（循环）

<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()

},

该方式使用以创建好的video标签，只是简单的改变video的src。注意，此时的自定义组件（如清晰度）并没有更新，里面的数据还是上一个视频的信息，需要手动更新，可以手动移除后再添加。

该方式首先会调用dispose方法销毁已经创建的video标签，并移除所有的组件和监听事件，然后需要自己创建video并设置其id（注意该id不能与之前销毁的id相同，我也不知道为啥～ :) ）和class以及src，然后将创建的video添加到文档中，如上html的结构，将作为id= vWrap的子元素添加到文档中。

一开始在项目中使用dplayer做为视频的播放库，但是由于在孤儿浏览器上出现兼容问题