直播流视频播放

src/modules/school/course/components/VideoPlayer.vue

 <template>
   <el-dialog :title="info.title" v-bind="$attrs" v-on="$listeners" width="800px" top="20vh">
-    <!-- <video :src="info.url" controls="controls" autoplay="autoplay"></video> -->
-    <!-- <video-player class="video-player-box"
-      ref="videoPlayer"
-      :options="playerOptions"
-      :playsinline="true"
-      customEventName="customstatechangedeventname">
-  </video-player> -->
-    <video id="videoPlayer" class="video-js" muted></video>
+    <video id="videoPlayer" width="750" class="video-js" controls="controls"></video>
   </el-dialog>
 </template>
 <script>
-// import Videojs from "video.js"
 export default {
-  // components: {
-  //   videoPlayer
-  // },
   props: {
     info: {
       type: Object,
@@ -26,30 +15,19 @@ export default {
   },
   data() {
     return {
-      playerOptions: {
-        // videojs options
-        muted: true,
-        language: 'en',
-        playbackRates: [0.7, 1.0, 1.5, 2.0],
-        sources: [{
-          type: "video/mp4",
-          src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
-        }],
-        poster: "https://img1.ezijing.com/curriculum/courses/bf3b399810-houzi.jpg",
-      }
     }
   },
   mounted() {
-    console.log(this.info)
     const url = this.info.url
     setTimeout(() => {
-      const player = window.videojs('videoPlayer');
+      const player = window.videojs('videoPlayer')
       player.src({
         src: url,
-        type: 'application/x-mpegURL',
-        withCredentials: true
+        type: 'application/x-mpegURL'
+        // withCredentials: true
       })
-    }, 1000)
+      player.play()
+    }, 300)
   }
 }
 </script>