匹配教室终端

src/components/work/index.vue

@@ -123,7 +123,7 @@
     <div class="col q-pt-md q-pr-md">
       <!-- <div class="row work_Top">
         <div class="text-h6 col"></div>
-        
+
       </div> -->
       <q-btn-group
         outline

src/pages/classroom/Scheduling.vue

@@ -100,23 +100,13 @@
     <q-dialog v-model="showVideo" @hide="clearVideo">
       <q-card
         class="my-card"
-        style="width:60vw !important;max-width:60vw !important;max-height:unset !important;"
+        style="width:64vw !important;max-width:64vw !important;max-height:32vw !important;height:32vw !important;"
         flat
       >
-        <!-- <q-card-section>
-          <div class="text-h6" v-if="currentRoom">
-            {{ currentRoom.RoomName }}
-          </div>
-        </q-card-section> -->
-        <q-card-section>
-          <video
-            id="my_video"
-            class="video-js vjs-default-skin"
-            controls
-            preload
-            v-if="showVideo"
-          ></video>
-        </q-card-section>
+        <div
+          id="player-con"
+          style="width:100%;height:100%;overflow:hidden;"
+        ></div>
       </q-card>
     </q-dialog>
   </div>
@@ -125,8 +115,6 @@
 <script>
 import { getUseClassRoomList } from "../../api/classroom/index";
 import * as signalR from "@aspnet/signalr";
-import videojs from "video.js";
-import "videojs-contrib-hls";
 export default {
   meta: {
     title: "教室状态"
@@ -139,6 +127,7 @@ export default {
       videoObj: null,
       currentRoom: null,
       queryStatus: 0,
+      player: null,
       connection: "", //signalr连接
       roomStatusList: [] //返回消息
     };
@@ -174,31 +163,36 @@ export default {
   methods: {
     changeViewStatusHandler() {},
     clearVideo() {
-      this.videoObj.dispose();
+      this.player.stop();
+      this.player.dispose();
       this.showVideo = false;
     },
     openVideo(item) {
       this.showVideo = true;
       this.currentRoom = item;
+      let url = `http://47.96.12.235:5000/live/${item.RoomId}.m3u8`;
       this.$nextTick(() => {
-        this.videoObj = videojs("my_video", {
-          controls: true, //是否显示播放器控件
-          autoplay: true, //是否自动播放
-          sources: [
-            {
-              type: "application/x-mpegURL",
-              src: `http://47.96.12.235:5000/live/${item.RoomId}.m3u8`
-            }
-          ]
-        });
-        this.videoObj.play();
-        setTimeout(() => {
-          document
-            .getElementById("my_video_html5_api")
-            .setAttribute("controls", "controls");
-        }, 2000);
+        this.initPlayer(url);
       });
     },
+    initPlayer(url) {
+      this.player = new Aliplayer(
+        {
+          id: "player-con",
+          source: url,
+          width: "100%",
+          height: "100%",
+          autoplay: true,
+          isLive: true,
+          rePlay: false,
+          playsinline: true,
+          preload: true,
+          controlBarVisibility: "hover",
+          useH5Prism: true
+        },
+        function(player) {}
+      );
+    },
     changeStatus() {
       this.initStatus();
       if (this.roomStatusList && this.roomStatusList.length > 0) {
@@ -300,23 +294,4 @@ export default {
   justify-content: center;
   align-items: center;
 }
-.video-js div,
-.video-js button {
-  display: none !important;
-}
-.video-js {
-  width: 100%;
-}
-.video-js video {
-  width: 100%;
-}
-.video-js .no-video {
-  display: flex;
-  height: 100%;
-  font-size: 14px;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-  background: #000;
-}
 </style>