hhh

src/views/record/parts/liveList.vue

@@ -17,7 +17,7 @@
             <p @click="$router.push({ path: '/live/detail', query: { id: item.id } })" v-else>进入房间</p>
             <p @click="$router.push({ path: '/onlive/roomInfo', query: { roomname: item.roomname } })" v-if="item.roomname">房间详情</p>
           </el-col> -->
-          <el-col :span="24" class="detail" @click.native="$router.push({ path: '/onlive/videoinfo', query: { id: item.id } })">
+          <el-col :span="24" class="detail" @click.native="$router.push({ path: '/onlive/videoinfo', query: { id: item.id, fileid: item.file_id } })">
             <el-image :src="item.filedir"></el-image>
             <p class="textOver">{{ item.title }}</p>
             <van-col :span="24" class="starttime"><van-icon name="underway-o" />主讲人:{{ item.username }}</van-col>

src/views/record/videoDetail.vue

@@ -3,7 +3,7 @@
     <el-row>
       <el-col :span="24" class="info">
         <el-col :span="24" class="video">
-          <video id="player-container-id" preload="auto" controls="controls" style="height: 200px; width: 100%;">
+          <video :id="tcPlayerId" preload="auto" controls="controls" style="height: 200px; width: 100%;" playsinline webkit-playsinline>
             您的浏览器不支持 video 标签。
           </video>
         </el-col>
@@ -27,12 +27,20 @@ const { mapActions: room } = createNamespacedHelpers('room');
 
 export default {
   name: 'videoDetail',
-  props: {},
+  props: {
+    options: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
   components: {},
   data: function() {
     return {
-      file_path: '',
+      player: null,
       roomInfos: {},
+      tcPlayerId: 'tcPlayer' + Date.now(),
     };
   },
   created() {
@@ -65,17 +73,25 @@ export default {
       });
     },
     onPlay() {
-      const player = TCPlayer('player-container-id', {
-        // player-container-id 为播放器容器ID，必须与html中一致
-        fileID: this.roomInfos.file_id, // 请传入需要播放的视频filID 必须
-        appID: '1400380125', // 请传入点播账号的appID 必须
-        //其他参数请在开发文档中查看
+      // 根据房间id查询房间详细信息
+      const playerParm = {
+        fileID: this.fileid,
+        appID: 1400380125,
+        autoplay: true,
+      };
+      console.log(playerParm);
+      setTimeout(() => {
+        if (!this.player) {
+          this.player = TCPlayer(this.tcPlayerId, playerParm);
+        } else {
+          this.player.loadVideoByID(playerParm);
+        }
       });
     },
     loadTcScript(callback) {
       this.loadScript(callback, {
         id: 'tcPlayerScriptId',
-        url: '//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js',
+        url: 'https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js',
       });
     },
     loadScript(callback, params) {
@@ -107,6 +123,9 @@ export default {
     id() {
       return this.$route.query.id;
     },
+    fileid() {
+      return this.$route.query.fileid;
+    },
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
@@ -118,7 +137,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@import url('//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css');
+@import url('https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css');
 .info {
   padding: 10px;
   .video {