|
@@ -125,31 +125,22 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-dialog
|
|
<el-dialog
|
|
- class="fc tc media-dialog"
|
|
|
|
|
|
+ class="media-dialog"
|
|
:visible.sync="mediaDialog"
|
|
:visible.sync="mediaDialog"
|
|
- append-to-body
|
|
|
|
top="50px"
|
|
top="50px"
|
|
:title="media.name"
|
|
:title="media.name"
|
|
- :close-on-click-modal="false"
|
|
|
|
width="640px"
|
|
width="640px"
|
|
>
|
|
>
|
|
-
|
|
|
|
<Media
|
|
<Media
|
|
:options="options"
|
|
:options="options"
|
|
:dialog="mediaDialog"
|
|
:dialog="mediaDialog"
|
|
:media="media"
|
|
:media="media"
|
|
:duration="info.duration"
|
|
:duration="info.duration"
|
|
- @close="mediaDialog=false"
|
|
|
|
|
|
+ @close="closeMedia"
|
|
|
|
+ :mediaType="mediaType"
|
|
|
|
+ @changeMedia="changeMedia"
|
|
@update="update">
|
|
@update="update">
|
|
</Media>
|
|
</Media>
|
|
- <span slot="footer" class="dialog-footer mt5">
|
|
|
|
- <el-button type="warning" @click="mediaDialog=false">退出播放</el-button>
|
|
|
|
- <el-select placeholder="流畅" v-model="mediaType" style="width: 80px;">
|
|
|
|
- <el-option label="流畅" value="ld"></el-option>
|
|
|
|
- <el-option label="标清" value="hls"></el-option>
|
|
|
|
- </el-select>
|
|
|
|
- </span>
|
|
|
|
-
|
|
|
|
</el-dialog>
|
|
</el-dialog>
|
|
|
|
|
|
<el-dialog title="输入认证" center :visible.sync="editRzcode" >
|
|
<el-dialog title="输入认证" center :visible.sync="editRzcode" >
|
|
@@ -188,6 +179,7 @@
|
|
tpl:{},
|
|
tpl:{},
|
|
media:{},
|
|
media:{},
|
|
options:{
|
|
options:{
|
|
|
|
+ controls:true,
|
|
autoplay: true, // 如果true,浏览器准备好时开始回放。
|
|
autoplay: true, // 如果true,浏览器准备好时开始回放。
|
|
muted: false, // 默认情况下将会消除任何音频。
|
|
muted: false, // 默认情况下将会消除任何音频。
|
|
loop: false, // 导致视频一结束就重新开始。
|
|
loop: false, // 导致视频一结束就重新开始。
|
|
@@ -224,6 +216,7 @@
|
|
this.updateShowList()
|
|
this.updateShowList()
|
|
},
|
|
},
|
|
mediaType(val){
|
|
mediaType(val){
|
|
|
|
+ if( !val ) return;
|
|
let mediaUrl = this.mediaUrl;
|
|
let mediaUrl = this.mediaUrl;
|
|
if( val == 'ld'){
|
|
if( val == 'ld'){
|
|
mediaUrl = mediaUrl.replace('/hls/', '/ld/');
|
|
mediaUrl = mediaUrl.replace('/hls/', '/ld/');
|
|
@@ -245,16 +238,22 @@
|
|
} else if (val == '完成') {
|
|
} else if (val == '完成') {
|
|
return val = 'el-bg-inner-done'
|
|
return val = 'el-bg-inner-done'
|
|
}
|
|
}
|
|
- },
|
|
|
|
- useTime(val){
|
|
|
|
- let timestr = ""
|
|
|
|
- timestr+= val> 3600?parseInt(val/3600):"0";
|
|
|
|
- timestr+= ":"+(val> 60?parseInt((val%3600)/60):"00");
|
|
|
|
- timestr += ":" + (val%60);
|
|
|
|
- return timestr
|
|
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ changeMedia( val ){
|
|
|
|
+ if( !val ) retur;
|
|
|
|
+ let mediaUrl = this.mediaUrl;
|
|
|
|
+ if( val == 'ld'){
|
|
|
|
+ mediaUrl = mediaUrl.replace('/hls/', '/ld/');
|
|
|
|
+ }else{
|
|
|
|
+ mediaUrl = mediaUrl.replace('/ld/', '/hls/');
|
|
|
|
+ }
|
|
|
|
+ this.options.sources = [{src:mediaUrl,type: "application/x-mpegURL"}];
|
|
|
|
+ this.options.playtimes = this.media.position||0;
|
|
|
|
+ this.options.autoplay = this.options.playtimes>0;
|
|
|
|
+ this.mediaDialog = true;
|
|
|
|
+ },
|
|
startExam( ){
|
|
startExam( ){
|
|
let courseId = this.courseId
|
|
let courseId = this.courseId
|
|
delExam()
|
|
delExam()
|
|
@@ -361,6 +360,10 @@
|
|
this.media.percent = getPercent(this.media);
|
|
this.media.percent = getPercent(this.media);
|
|
this.updateShowList()
|
|
this.updateShowList()
|
|
},
|
|
},
|
|
|
|
+ closeMedia(){
|
|
|
|
+ this.mediaType = '';
|
|
|
|
+ this.mediaDialog=false;
|
|
|
|
+ },
|
|
// 加载媒体
|
|
// 加载媒体
|
|
loadMedia( item, index ) {
|
|
loadMedia( item, index ) {
|
|
this.media = item;
|
|
this.media = item;
|
|
@@ -391,12 +394,11 @@
|
|
/* display: none !important; */
|
|
/* display: none !important; */
|
|
}
|
|
}
|
|
.media-dialog .el-dialog__body{
|
|
.media-dialog .el-dialog__body{
|
|
- padding: 0 !important;
|
|
|
|
|
|
+ padding: 0 0 16px 0 !important;
|
|
}
|
|
}
|
|
.media-dialog .el-scrollbar__wrap {
|
|
.media-dialog .el-scrollbar__wrap {
|
|
overflow-x: hidden!important;
|
|
overflow-x: hidden!important;
|
|
}
|
|
}
|
|
-
|
|
|
|
.mprocess{
|
|
.mprocess{
|
|
margin: 0 auto;
|
|
margin: 0 auto;
|
|
width: 150px !important;
|
|
width: 150px !important;
|
|
@@ -427,4 +429,5 @@
|
|
.el-bg-inner-done .el-progress-bar__inner{
|
|
.el-bg-inner-done .el-progress-bar__inner{
|
|
background-image: linear-gradient(to right, #3587d8 , #53ff54);
|
|
background-image: linear-gradient(to right, #3587d8 , #53ff54);
|
|
}
|
|
}
|
|
|
|
+
|
|
</style>
|
|
</style>
|