匹配教室终端

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>

src/pages/classroom/courseInfo.vue

 <style scoped>
-#player-con{
+#player-con {
   width: 100%;
   height: 500px;
   background-color: #eee;
 }
-.no-video{
+.no-video {
   width: 800px;
   height: 450px;
   margin: 0 auto;
   background-color: #000;
   display: flex;
   align-items: center;
-  justify-content:center;
+  justify-content: center;
   color: #fff;
   font-size: 30px;
 }
-.title{
+.title {
   color: #000000;
   font-size: 18px;
   font-weight: bold;
   margin-bottom: 20px;
 }
-  .scheduInfo {
+.scheduInfo {
   height: 100%;
   width: 100%;
   padding: 15px;
   background-color: #f2f4f7;
   overflow: hidden;
-  }
+}
 
-  .scheduInfo .schedu_left {
+.scheduInfo .schedu_left {
   width: 248px;
   flex: 0 0 auto;
   position: relative;
@@ -37,49 +37,49 @@
   background-repeat: no-repeat;
   background-size: 100% auto;
   height: 100%;
-  }
+}
 
-  .scheduInfo .okr-menu-active {
+.scheduInfo .okr-menu-active {
   color: var(--q-color-primary);
   font-weight: bold;
   background: #ecf1ff;
-  }
+}
 
-  .mySched {
+.mySched {
   border-radius: 8px;
   overflow: hidden;
   height: 100%;
   background-color: #fff;
-  }
+}
 
-  .schedu_ImgDiv {
+.schedu_ImgDiv {
   width: 68px;
   height: 68px;
   border-radius: 20px;
   overflow: hidden;
   margin: 75px auto 0;
-  }
+}
 
-  .schedu_ImgDiv img {
+.schedu_ImgDiv img {
   width: 100%;
   height: 100%;
-  }
+}
 
-  .schedu_Name {
+.schedu_Name {
   color: #fff;
   font-size: 16px;
   margin-top: 26px;
   text-align: center;
-  }
+}
 
-  .schedu_Status {
+.schedu_Status {
   font-size: 12px;
   color: #fff;
   text-align: center;
   margin-top: 15px;
-  }
+}
 
-  .schedu_st {
+.schedu_st {
   display: inline-block;
   width: 10px;
   height: 10px;
@@ -87,24 +87,24 @@
   margin-right: 5px;
   position: relative;
   top: 1px;
-  }
+}
 
-  .zbz {
-    background-color: #00DB4E;
-  }
+.zbz {
+  background-color: #00db4e;
+}
 
-  .xxz {
-    background-color: #DBDBDB;
-  }
+.xxz {
+  background-color: #dbdbdb;
+}
 
-  .wdk {
-    background-color: #FE4475;
-  }
+.wdk {
+  background-color: #fe4475;
+}
 
-  .clockon_Duty {
+.clockon_Duty {
   width: 120px;
   height: 34px;
-    background: linear-gradient(90deg, #00BDD3, #00D761);
+  background: linear-gradient(90deg, #00bdd3, #00d761);
   border-radius: 10px;
   margin: 100px auto 24px;
   text-align: center;
@@ -112,120 +112,120 @@
   color: #fff;
   font-size: 14px;
   cursor: pointer;
-  }
+}
 
-  .sche_daka {
+.sche_daka {
   font-size: 18px;
   position: relative;
   left: 5px;
   top: 2px;
-  }
+}
 
-  .schedu_jiaojie {
+.schedu_jiaojie {
   width: 120px;
   height: 34px;
   line-height: 34px;
   text-align: center;
   border-radius: 10px;
-    border: 1px solid #91AEFF;
-    color: #C4D4FF;
+  border: 1px solid #91aeff;
+  color: #c4d4ff;
   font-size: 14px;
   margin: auto;
   cursor: pointer;
-  }
+}
 
-  .scheInfo_rightTop {
+.scheInfo_rightTop {
   width: 100%;
   /* height: 80px; */
   padding: 20px 0;
   background-color: #fff;
-  }
+}
 
-  .schScroll {
-    background-color: #F6F8FA;
-  }
+.schScroll {
+  background-color: #f6f8fa;
+}
 
-  .scheInfo_Topflex {
+.scheInfo_Topflex {
   display: flex;
   /* width: 90%; */
   /* height: 80px; */
   align-items: center;
-  }
+}
 
-  .Sctop_Color {
+.Sctop_Color {
   font-size: 18px;
   color: #000000;
   width: 246px;
   text-align: center;
-  }
+}
 
-  .Scotop_little {
-    color: #AAAAAA;
+.Scotop_little {
+  color: #aaaaaa;
   font-size: 14px;
   margin-right: 15px;
   display: inline-block;
   text-align: right;
   width: 60px;
-  }
+}
 
-  .Scdu_benci::after {
+.Scdu_benci::after {
   content: "";
   position: absolute;
   height: 29px;
   width: 2px;
-    background: #EBEBEB;
+  background: #ebebeb;
   right: 0;
-  }
+}
 
-  .sche_mid {
+.sche_mid {
   display: flex;
   width: 100%;
   justify-content: space-between;
-  }
+}
 
-  .sche_midList {
+.sche_midList {
   width: 31.6%;
   height: 300px;
   background: #fff;
   border-radius: 16px;
-    border: 1px solid #EBEBEB;
-    box-shadow: 0px 1px 1px 0px #E4E7FB;
+  border: 1px solid #ebebeb;
+  box-shadow: 0px 1px 1px 0px #e4e7fb;
   overflow: hidden;
-    font-family: 'MicrosoftYaHei';
+  font-family: "MicrosoftYaHei";
   position: relative;
-  }
+}
 
-  .Sche_Bottom {
+.Sche_Bottom {
   margin: 26px 40px 0 40px;
-  }
+}
 
-  .scheList_TOP {
+.scheList_TOP {
   width: 100%;
   height: 107px;
   border-radius: 16px;
   overflow: hidden;
   position: relative;
-  }
+}
 
-  .scheList_TOP img {
+.scheList_TOP img {
   width: 100%;
   height: 100%;
-  }
+}
 
-  .word_sche {
+.word_sche {
   color: #fff;
   font-size: 20px;
   position: absolute;
   top: 25px;
   left: 32px;
-  }
+}
 
-  .word_scheNumber {
+.word_scheNumber {
   display: inline-block;
   width: 36px;
   height: 36px;
   color: #fff;
-    background-color: #FE4475;
+  background-color: #fe4475;
   position: absolute;
   top: 30px;
   left: 130px;
@@ -233,35 +233,33 @@
   line-height: 36px;
   border-radius: 8px;
   font-size: 25px;
-  }
+}
 
-  .scheList_Bottom {
+.scheList_Bottom {
   font-size: 14px;
   color: #000000;
   height: 46px;
   padding-bottom: 10px;
-    border-bottom: 1px solid #F3F3F3;
-  }
+  border-bottom: 1px solid #f3f3f3;
+}
 
-  .sche_Dian {
+.sche_Dian {
   display: inline-block;
   width: 6px;
   height: 6px;
-    background-color: #6D97FF;
+  background-color: #6d97ff;
   border-radius: 50%;
   margin-right: 10px;
-  }
+}
 
-  .schScroll::-webkit-scrollbar {
+.schScroll::-webkit-scrollbar {
   display: none;
-  }
+}
 
-  .Sch_MainColor {
+.Sch_MainColor {
   font-size: 18px;
   color: #000000;
-
-  }
-
+}
 </style>
 
 <template>
@@ -280,80 +278,80 @@
   </div>
 </template>
 <script>
-  import {getTimeDetail} from '../../api/classroom/index'
-  import {getVideoPlayAuth,getVideoPlayUrl} from '../../api/classroom/video'
-  import schedulVisit from './components/schedul-visit'
-  import schedulHead from './components/schedul-head'
+import { getTimeDetail } from "../../api/classroom/index";
+import { getVideoPlayAuth, getVideoPlayUrl } from "../../api/classroom/video";
+import schedulVisit from "./components/schedul-visit";
+import schedulHead from "./components/schedul-head";
 
-  export default {
+export default {
   props: {},
   components: {
     schedulVisit,
-      schedulHead,
+    schedulHead
   },
   data() {
     return {
       dataList: {},
-        player:null,
-      }
+      player: null
+    };
   },
   created() {
     if (this.$route.query.id) {
       this.id = this.$route.query.id;
     }
   },
-    mounted(){
+  mounted() {
     this.getdata();
   },
   methods: {
-      getdata(){
-        getTimeDetail({ID:this.id}).then(res=>{
-          if(res.Code===1){
-            this.dataList=res.Data
-            if(res.Data.VideoUrl){
-               this.getAuth(res.Data.VideoUrl)
-            }
-          }
-        })
+    getdata() {
+      getTimeDetail({ ID: this.id }).then(res => {
+        if (res.Code === 1) {
+          this.dataList = res.Data;
+          if (res.Data.VideoUrl) {
+            this.getAuth(res.Data.VideoUrl);
+            // this.$nextTick(() => {
+            //   this.initPlayer(res.Data.VideoUrl);
+            // });
+          }
+        }
+      });
     },
     //初始化视频播放器
-      initPlayer(url,cover,auth){
-       this.player = new Aliplayer({
-             "id": "player-con",
-             "source": url,
-             "width": "100%",
-             "height": "500px",
-             "autoplay": true,
-             "isLive": false,
-             "rePlay": false,
-             "playsinline": true,
-             "preload": true,
-             "controlBarVisibility": "hover",
-             "useH5Prism": true,
-             "cover":cover,
-             "playauth":auth,
-            }, function (player) {
-              
-             }
+    initPlayer(url, cover, auth) {
+      this.player = new Aliplayer(
+        {
+          id: "player-con",
+          source: url,
+          width: "100%",
+          height: "500px",
+          autoplay: false,
+          isLive: false,
+          rePlay: false,
+          playsinline: true,
+          preload: true,
+          controlBarVisibility: "hover",
+          useH5Prism: true,
+          cover: cover,
+          playauth: auth
+        },
+        function(player) {}
       );
     },
-      getAuth(url){
-        getVideoPlayAuth({strVid:url}).then(res=>{
-          if(res.Code===1&&res.Data.PlayAuth){
-             this.getUrl(url,res.Data.PlayAuth)
+    getAuth(url) {
+      getVideoPlayAuth({ strVid: url }).then(res => {
+        if (res.Code === 1 && res.Data.PlayAuth) {
+          this.getUrl(url, res.Data.PlayAuth);
         }
-           
-        })
+      });
     },
-      getUrl(url,auth){
-        getVideoPlayUrl({strVid:url}).then(res=>{
-            if(res.Code===1){
-               this.initPlayer(res.Data.URL,res.Data.VideoImg,auth)
+    getUrl(url, auth) {
+      getVideoPlayUrl({ strVid: url }).then(res => {
+        if (res.Code === 1) {
+          this.initPlayer(res.Data.URL, res.Data.VideoImg, auth);
         }
-        })
+      });
     }
-    },
   }
-
+};
 </script>
-