vue中使用腾讯云点播TCPlayer-播放

勇敢牛牛，冲冲冲

已于 2022-01-24 17:48:01 修改

阅读量2.4k

点赞数

文章标签： vue.js 腾讯云前端

于 2022-01-24 17:31:54 首次发布

本文链接：https://blog.csdn.net/qq_44613011/article/details/122671542

版权

vue中使用腾讯云点播TCPlayer

点击显示录像信息:

在这里插入图片描述

效果图：

在这里插入图片描述

代码实现:

<template>
<el-button  type="text" @click="lookExamVideo(scope.row)" >查看考试录像</el-button>
 <el-dialog title="查看考试录像" 
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     :visible.sync="videoDialog" 
     width="550px"  style="text-align:center;margin-top:70px;" 
     >
     <video width="500" v-if="videoDialog"  :id="tcPlayerId" height="270" class="tc-video-container" playsinline webkit-playinline x5-playinline></video>
  </el-dialog>
</template>
<script>
  export default{
    name:'Detail'
  }
  data(){
   return{
 	  tcPlayerId: 'tcPlayer' + Date.now(),
      player: null,
      videoFileid: '',
      videoAppid: '',
      videoDialog:false,//查看录像
    }
  },
  methods:{
   	 //---------------------------------初始化腾讯云播放器------------------------------
     getVideoLang (fileID, appID) {
      const playerParam = {
        fileID: fileID,
        appID: appID
      }
      this.player = window.TCPlayer(this.tcPlayerId, playerParam)
    },
    // -------------------------------------查看考试录像----------------------------------
  lookExamVideo(row){
    this.videoDialog=true
    let self = this
    setTimeout(() => {
      self.videoFileid = 'xxx'//fileID
      self.videoAppid = 'xxx'//appID
      self.$nextTick(() => {
        self.getVideoLang(self.videoFileid, self.videoAppid)
      })
    },100)
  },
 }
  
</script>