直播回放

1

src/views/liveClassManager/liveClassDetail.vue

@@ -91,16 +91,10 @@
             prop="joinTime"
             label="进入时间"
           ></el-table-column>
-          <el-table-column
-            align="center"
-            prop="totalViewTime"
-            label="观看时长"
-          >
-          <template slot-scope="scope">
-            <div>
-              {{scope.row.totalViewTime}}分钟
-            </div>
-          </template>
+          <el-table-column align="center" prop="totalViewTime" label="观看时长">
+            <template slot-scope="scope">
+              <div>{{ scope.row.totalViewTime }}分钟</div>
+            </template>
           </el-table-column>
         </el-table>
         <pagination
@@ -119,10 +113,10 @@
       width="500px"
       title="直播回放"
     >
-      <div  class="lineWrap">
+      <div class="lineWrap">
         <el-link
-        :underline="false"
-         v-for="(item, index) in videoList"
+          :underline="false"
+          v-for="(item, index) in videoList"
           :key="index"
           type="text"
           class="line"
@@ -136,6 +130,16 @@
         <el-button type="primary" @click="payVisible = false">确 定</el-button>
       </div></el-dialog
     >
+        <el-dialog :title="activeVideo.endTime | dateForMinFormat"
+               width="680px"
+               append-to-body
+               :visible.sync="videoVisible" v-if="videoVisible">
+      <!-- activeUrl -->
+      <video style="width:640px;"
+             :src="activeVideo.url"
+             ref="dialogVideo"
+             controls="controls">您的浏览器不支持视频播放</video>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -169,6 +173,8 @@ export default {
       },
       videoList: [],
       payVisible: false,
+      videoVisible:false,
+      activeVideo:{ endTime:''}
     };
   },
   mounted() {
@@ -210,9 +216,10 @@ export default {
         console.log(e);
       }
     },
-    opneVideo(row){
-      window.open(row.url)
-    }
+    opneVideo(row) {
+      this.activeVideo = row;
+      this.videoVisible = true
+    },
   },
 };
 </script>