20200529-zlp-3
优化视频播放列表
This commit is contained in:
paidaxing444
parent
1ac9d63503
commit
abf9dc0b1b
@ -71,6 +71,7 @@
|
||||
"vue-router": "3.0.2",
|
||||
"vue-simple-uploader": "^0.7.4",
|
||||
"vue-splitpane": "1.0.4",
|
||||
"vue-video-player": "^5.0.2",
|
||||
"vuedraggable": "2.20.0",
|
||||
"vuex": "3.1.0"
|
||||
},
|
||||
|
||||
@ -20,10 +20,12 @@ import { getDicts } from "@/api/system/dict/data";
|
||||
import { getConfigKey } from "@/api/system/config";
|
||||
import { parseTime, resetForm, addDateRange, selectDictLabel,selectMoeDictLabel, download, handleTree } from "@/utils/ruoyi";
|
||||
import Pagination from "@/components/Pagination";
|
||||
|
||||
import VideoPlayer from 'vue-video-player';
|
||||
import Video from 'video.js'
|
||||
import 'video.js/dist/video-js.css'
|
||||
|
||||
// import 'video.js/dist/video-js.css'
|
||||
// require videojs style
|
||||
import 'video.js/dist/video-js.css';
|
||||
import 'vue-video-player/src/custom-theme.css';
|
||||
|
||||
// 全局方法挂载
|
||||
Vue.prototype.getDicts = getDicts
|
||||
@ -37,6 +39,7 @@ Vue.prototype.download = download
|
||||
Vue.prototype.handleTree = handleTree
|
||||
|
||||
Vue.prototype.$video = Video
|
||||
Vue.use(VideoPlayer);
|
||||
|
||||
Vue.prototype.msgSuccess = function (msg) {
|
||||
this.$message({ showClose: true, message: msg, type: "success" });
|
||||
|
||||
@ -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>
|
||||
@ -52,6 +52,12 @@ public class ByTrainVideo extends BaseEntity {
|
||||
@Excel(name = "视频路径")
|
||||
private String videourl;
|
||||
|
||||
/**
|
||||
* 文件类型
|
||||
*/
|
||||
@Excel(name = "文件类型")
|
||||
private String filetype;
|
||||
|
||||
/**
|
||||
* 所属类别
|
||||
*/
|
||||
@ -124,6 +130,14 @@ public class ByTrainVideo extends BaseEntity {
|
||||
return videourl;
|
||||
}
|
||||
|
||||
public void setFiletype(String filetype) {
|
||||
this.filetype = filetype;
|
||||
}
|
||||
|
||||
public String getFiletype() {
|
||||
return filetype;
|
||||
}
|
||||
|
||||
public void setType(String type) {
|
||||
this.type = type;
|
||||
}
|
||||
@ -165,6 +179,7 @@ public class ByTrainVideo extends BaseEntity {
|
||||
.append("lecturer", getLecturer())
|
||||
.append("lecturername", getLecturername())
|
||||
.append("videourl", getVideourl())
|
||||
.append("filetype", getFiletype())
|
||||
.append("type", getType())
|
||||
.append("classtype", getClasstype())
|
||||
.append("createuserid", getCreateuserid())
|
||||
|
||||
@ -11,6 +11,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
||||
<result property="lecturer" column="lecturer" />
|
||||
<result property="lecturername" column="lecturername" />
|
||||
<result property="videourl" column="videourl" />
|
||||
<result property="filetype" column="filetype" />
|
||||
<result property="type" column="type" />
|
||||
<result property="classtype" column="classtype" />
|
||||
<result property="createuserid" column="createuserid" />
|
||||
@ -18,7 +19,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
||||
</resultMap>
|
||||
|
||||
<sql id="selectByTrainVideoVo">
|
||||
select id, title, information, lecturer,(select name from by_lecturer where lecturer=by_lecturer.id) as lecturername, videourl, type, classtype, createuserid, createtime from by_train_video
|
||||
select id, title, information, lecturer,(select name from by_lecturer where lecturer=by_lecturer.id) as lecturername, videourl,filetype, type, classtype, createuserid, createtime from by_train_video
|
||||
</sql>
|
||||
|
||||
<select id="selectByTrainVideoList" parameterType="ByTrainVideo" resultMap="ByTrainVideoResult">
|
||||
@ -28,6 +29,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
||||
<if test="information != null and information != ''"> and information = #{information}</if>
|
||||
<if test="lecturer != null "> and lecturer = #{lecturer}</if>
|
||||
<if test="videourl != null and videourl != ''"> and videourl = #{videourl}</if>
|
||||
<if test="filetype != null and filetype != ''"> and filetype = #{filetype}</if>
|
||||
<if test="type != null and type != ''"> and type like concat('', #{type}, '%')</if>
|
||||
<if test="classtype != null and classtype != ''"> and classtype = #{classtype}</if>
|
||||
<if test="createuserid != null "> and createuserid = #{createuserid}</if>
|
||||
@ -47,6 +49,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
||||
<if test="information != null and information != ''">information,</if>
|
||||
<if test="lecturer != null ">lecturer,</if>
|
||||
<if test="videourl != null and videourl != ''">videourl,</if>
|
||||
<if test="filetype != null and filetype != ''">filetype,</if>
|
||||
<if test="type != null and type != ''">type,</if>
|
||||
<if test="classtype != null and classtype != ''">classtype,</if>
|
||||
<if test="createuserid != null ">createuserid,</if>
|
||||
@ -57,6 +60,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
||||
<if test="information != null and information != ''">#{information},</if>
|
||||
<if test="lecturer != null ">#{lecturer},</if>
|
||||
<if test="videourl != null and videourl != ''">#{videourl},</if>
|
||||
<if test="filetype != null and filetype != ''">#{filetype},</if>
|
||||
<if test="type != null and type != ''">#{type},</if>
|
||||
<if test="classtype != null and classtype != ''">#{classtype},</if>
|
||||
<if test="createuserid != null ">#{createuserid},</if>
|
||||
@ -71,6 +75,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
||||
<if test="information != null and information != ''">information = #{information},</if>
|
||||
<if test="lecturer != null ">lecturer = #{lecturer},</if>
|
||||
<if test="videourl != null and videourl != ''">videourl = #{videourl},</if>
|
||||
<if test="filetype != null and filetype != ''">filetype = #{filetype},</if>
|
||||
<if test="type != null and type != ''">type = #{type},</if>
|
||||
<if test="classtype != null and classtype != ''">classtype = #{classtype},</if>
|
||||
<if test="createuserid != null ">createuserid = #{createuserid},</if>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user