20200529-zlp-3
优化视频播放列表
This commit is contained in:
paidaxing444
@ -70,8 +70,8 @@
|
||||
<el-table v-loading="loading" :data="videoList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="编号" align="center" prop="id" />
|
||||
<el-table-column label="培训视频标题" align="center" prop="title" />
|
||||
<el-table-column label="视频简介" align="center" prop="information" />
|
||||
<el-table-column label="培训视频标题" align="center" prop="title" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="视频简介" align="center" prop="information" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="培训讲师" align="center" prop="lecturername" />
|
||||
<el-table-column label="所属类别" align="center" prop="type" :formatter="typeFormat" />
|
||||
<el-table-column label="创建时间" align="center" prop="createtime" width="180">
|
||||
@ -119,6 +119,7 @@
|
||||
<el-form-item label="培训讲师" prop="lecturer">
|
||||
<el-select v-model="form.lecturer" placeholder="请选择讲师">
|
||||
<el-input v-model="form.videourl" v-if="false" />
|
||||
<el-input v-model="form.filetype" v-if="false" />
|
||||
<el-option
|
||||
v-for="item in lecturerOptions"
|
||||
:key="item.id"
|
||||
@ -300,7 +301,7 @@ export default {
|
||||
this.imageUrl = "";
|
||||
},
|
||||
handleSuccessVideo(response) {
|
||||
console.log(123, response);
|
||||
console.log("上传完成", response);
|
||||
this.imgFlag = false;
|
||||
this.percent = 0;
|
||||
if (response.hash) {
|
||||
@ -333,6 +334,7 @@ export default {
|
||||
this.msgError("请上传正确格式的视频！");
|
||||
return false;
|
||||
} else {
|
||||
this.form.filetype = file.type;
|
||||
if (!isLt500M) {
|
||||
this.msgError("上传视频文件大小不能超过 500MB!");
|
||||
return false;
|
||||
|
||||
@ -35,22 +35,24 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row v-loading="loading">
|
||||
<el-col :span="6" v-for="(o, index) in videoList" :key="index" style="padding: 10px;">
|
||||
<el-col :xs="12" :sm="6" v-for="(o, index) in videoList" :key="index" style="padding: 10px;">
|
||||
<el-card :body-style="{ padding: '2px' }">
|
||||
<video
|
||||
controls="controls"
|
||||
controlslist="nodownload"
|
||||
oncontextmenu="return false"
|
||||
:src="[qiniuUrl + '/' + o.videourl]"
|
||||
class="videoavatar"
|
||||
></video>
|
||||
<div style="padding: 14px;">
|
||||
<video-player
|
||||
class="vjs-custom-skin"
|
||||
:playsinline="true"
|
||||
:options="playerOptions[index]"
|
||||
ref="videoPlayer"
|
||||
></video-player>
|
||||
<div class="to-detail" @click="toDetail(o)">
|
||||
<el-tooltip effect="dark" :content="o.title" placement="bottom">
|
||||
<el-button class="info-title">{{o.title+" (讲师:"+o.lecturername+")"}}</el-button>
|
||||
<div>
|
||||
<p class="info-title">{{o.title}}</p>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="bottom clearfix">
|
||||
<p class="info-title info-title-name">讲师:{{o.lecturername}}</p>
|
||||
<div class="bottom">
|
||||
<time class="time">{{ parseTime(o.createtime) }}</time>
|
||||
<el-button type="text" class="button">进入详情页</el-button>
|
||||
<!-- <el-button type="text" class="button">进入详情页</el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
@ -88,15 +90,16 @@ export default {
|
||||
lecturerOptions: [],
|
||||
//视频类别
|
||||
optionTypes: [],
|
||||
playerOptions: [],
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 8,
|
||||
title: undefined,
|
||||
lecturer: undefined,
|
||||
type: undefined
|
||||
type: undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 8
|
||||
}
|
||||
};
|
||||
},
|
||||
@ -114,6 +117,9 @@ export default {
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
toDetail(arg) {
|
||||
console.log(arg);
|
||||
},
|
||||
// 递归判断列表，把最后的children设为undefined
|
||||
getTreeData(data) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
@ -133,6 +139,30 @@ export default {
|
||||
this.loading = true;
|
||||
listVideo(this.queryParams).then(response => {
|
||||
this.videoList = response.rows;
|
||||
this.playerOptions = response.rows.map(ele => {
|
||||
return {
|
||||
autoplay: false,
|
||||
muted: true,
|
||||
language: "zh-CN",
|
||||
playbackRates: [0.7, 1.0, 1.5, 2.0],
|
||||
fluid: true,
|
||||
sources: [
|
||||
{
|
||||
type: ele.filetype,
|
||||
// mp4
|
||||
src: "https://files.benyiedu.com/" + ele.videourl
|
||||
}
|
||||
],
|
||||
notSupportedMessage: "此视频暂无法播放，请稍后再试",
|
||||
poster: "",
|
||||
controlBar: {
|
||||
timeDivider: true,
|
||||
durationDisplay: false,
|
||||
remainingTimeDisplay: false,
|
||||
fullscreenToggle: true //全屏按钮
|
||||
}
|
||||
};
|
||||
});
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
@ -158,39 +188,31 @@ export default {
|
||||
|
||||
<style>
|
||||
.time {
|
||||
font-size: 13px;
|
||||
line-height: 12px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 13px;
|
||||
line-height: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0;
|
||||
float: right;
|
||||
.to-detail {
|
||||
cursor: pointer;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.info-title{
|
||||
width: 100%; /*根据自己项目进行定义宽度*/
|
||||
overflow: hidden; /*设置超出的部分进行影藏*/
|
||||
text-overflow: ellipsis; /*设置超出部分使用省略号*/
|
||||
white-space:nowrap ; /*设置为单行*/
|
||||
.info-title {
|
||||
width: 100%; /*根据自己项目进行定义宽度*/
|
||||
overflow: hidden; /*设置超出的部分进行影藏*/
|
||||
text-overflow: ellipsis; /*设置超出部分使用省略号*/
|
||||
white-space: nowrap; /*设置为单行*/
|
||||
}
|
||||
|
||||
.videoavatar {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
.info-title-name {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user