Skip to content

C
confucius
Commit 2f7789bb authored by 罗超's avatar 罗超
Browse files
Options

匹配教室终端

parent 5b763858
Show whitespace changes
Inline Side-by-side
Showing with 323 additions and 350 deletions
src/pages/classroom/Scheduling.vue
View file @ 2f7789bb
......@@ -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
View file @ 2f7789bb
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment