20200529-zlp-3

优化视频播放列表

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"
   },

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" });

ruoyi-ui/src/views/benyi_train/video/index.vue

@@ -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="title" :show-overflow-tooltip="true" />
-      <el-table-column label="视频简介" align="center" prop="information" />
+      <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;

ruoyi-ui/src/views/benyi_train/video_study/index.vue

@@ -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
+          <video-player
-            controls="controls"
+            class="vjs-custom-skin"
-            controlslist="nodownload"
+            :playsinline="true"
-            oncontextmenu="return false"
+            :options="playerOptions[index]"
-            :src="[qiniuUrl + '/' + o.videourl]"
+            ref="videoPlayer"
-            class="videoavatar"
+          ></video-player>
-          ></video>
+          <div class="to-detail" @click="toDetail(o)">
-          <div style="padding: 14px;">
             <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 {
+.to-detail {
-  padding: 0;
+  cursor: pointer;
-  float: right;
+  padding: 14px;
 }
 
-.info-title{
+.info-title {
   width: 100%; /*根据自己项目进行定义宽度*/
   overflow: hidden; /*设置超出的部分进行影藏*/
   text-overflow: ellipsis; /*设置超出部分使用省略号*/
-	white-space:nowrap ;    /*设置为单行*/
+  white-space: nowrap; /*设置为单行*/
 }
 
-.videoavatar {
+.info-title-name {
-  width: 100%;
+  font-size: 12px;
-  display: block;
-}
-
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-}
-
-.clearfix:after {
-  clear: both;
 }
 </style>

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())

ruoyi/src/main/resources/mybatis/benyi/ByTrainVideoMapper.xml

@@ -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>