From abf9dc0b1b53aa9f493dc865288b3fb401eacce2 Mon Sep 17 00:00:00 2001 From: paidaxing444 <12qwaszx> Date: Fri, 29 May 2020 23:31:22 +0800 Subject: [PATCH] =?UTF-8?q?20200529-zlp-3=20=E4=BC=98=E5=8C=96=E8=A7=86?= =?UTF-8?q?=E9=A2=91=E6=92=AD=E6=94=BE=E5=88=97=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/package.json | 1 + ruoyi-ui/src/main.js | 9 +- .../src/views/benyi_train/video/index.vue | 8 +- .../views/benyi_train/video_study/index.vue | 98 ++++++++++++------- .../project/benyi/domain/ByTrainVideo.java | 15 +++ .../mybatis/benyi/ByTrainVideoMapper.xml | 7 +- 6 files changed, 93 insertions(+), 45 deletions(-) diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json index 943ed301b..559037656 100644 --- a/ruoyi-ui/package.json +++ b/ruoyi-ui/package.json @@ -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" }, diff --git a/ruoyi-ui/src/main.js b/ruoyi-ui/src/main.js index c955a87b6..27a0c112f 100644 --- a/ruoyi-ui/src/main.js +++ b/ruoyi-ui/src/main.js @@ -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" }); diff --git a/ruoyi-ui/src/views/benyi_train/video/index.vue b/ruoyi-ui/src/views/benyi_train/video/index.vue index e2ce865a6..441a60176 100644 --- a/ruoyi-ui/src/views/benyi_train/video/index.vue +++ b/ruoyi-ui/src/views/benyi_train/video/index.vue @@ -70,8 +70,8 @@ - - + + @@ -119,6 +119,7 @@ + - + - -
+ +
- {{o.title+" (讲师:"+o.lecturername+")"}} +
+

{{o.title}}

+
-
+

讲师:{{o.lecturername}}

+
- 进入详情页 +
@@ -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 { \ No newline at end of file diff --git a/ruoyi/src/main/java/com/ruoyi/project/benyi/domain/ByTrainVideo.java b/ruoyi/src/main/java/com/ruoyi/project/benyi/domain/ByTrainVideo.java index dd5b61bf7..bb6886b9e 100644 --- a/ruoyi/src/main/java/com/ruoyi/project/benyi/domain/ByTrainVideo.java +++ b/ruoyi/src/main/java/com/ruoyi/project/benyi/domain/ByTrainVideo.java @@ -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()) diff --git a/ruoyi/src/main/resources/mybatis/benyi/ByTrainVideoMapper.xml b/ruoyi/src/main/resources/mybatis/benyi/ByTrainVideoMapper.xml index bd1601314..91bb3bf57 100644 --- a/ruoyi/src/main/resources/mybatis/benyi/ByTrainVideoMapper.xml +++ b/ruoyi/src/main/resources/mybatis/benyi/ByTrainVideoMapper.xml @@ -11,6 +11,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" + @@ -18,7 +19,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" - 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