vue 腾讯云点播播放视频(循环)

vue 腾讯云点播播放视频(循环),第1张

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

},

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

按文章栏目发布我们可以点击发布所有页面,不过如果我们之前有生成过,只需要发布某个或某些栏目下是新添加的信息也可以通过按住shif+鼠标点击该栏目工ctrl+鼠标点击该栏目进行选择要发布的栏目再点击发布选中栏目的文章。

栏目发布即我们在该模型下添加的所有栏目除了可以一次性将所有栏目批量生成外,同样可以按住shif+鼠标点击该栏目工ctrl+鼠标点击该栏目进行选择要发布的栏目再点击发布选中的栏目。

此外,其它如果有启用生成的也需要发布后才可以预览到静态效果,如:专题、JS、自定义页面、Google/Baidu地图等。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7066884.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存