基于SSM的学生选课考勤成绩权限新闻发布系统之课程视频章

各位小伙伴，大家好，今天给大家说一说 《学生选课考勤成绩新闻发布权限管理系统之课程的视频章》，可能一听这个名字，很多人蒙了，第一个反应，怎么怎么这么长的名字。哎，其实我也没有办法，这些其实都是系统的核心的模块。

这个系统分为 单体系统版本 前后端分离版本，移动版本 … 实在是全全全。一篇文章不能足够的说明所有东西，今天只给大家说一下 课程模块的 视频功能。 如果需要下载的小伙伴。去码云.

需要的下载源码，文档地址
https://gitee.com/soul_PreCoder/dashboard/projects 这个里面。自己慢慢看

项目需求： 给每一个课程添加一个介绍视频，然后可以查看视频功能。这个功能需求很简单，相信大家都明白。废话少说，先说一下 这个课程视频这个模块

项目效果图:

核心关键点：上传视频，保存数据，查看视频

上传视频 采用 vue+elementui的 el-upload组件
查看视频 通过video标签处理.

<el-col :span="24">
            <el-form-item @submit.native.prevent  prop="videoUrl" label="视频介绍" >
          <div class="album albumvideo">
            <div>

              <div class="pic_img">
                <div class="pic_img_box">
                  <el-upload class="avatar-uploader"
                             action="http://localhost/course/file/uploadVideo"
                             v-bind:on-progress="uploadVideoProcess"
                             v-bind:on-success="handleVideoSuccess"
                             v-bind:before-upload="beforeUploadVideo"
                             :headers="headers"
                             v-bind:show-file-list="false"
                             >
                    <video  v-if="form.videoUrl !=undefined && !videoFlag"
                           id="showVideoId"
                           :src="getVideo(form.videoUrl,'showVideoId')"
                           class="avatar video-avatar"
                           controls="controls">

                      您的浏览器不支持视频播放
                    </video>
                    <i v-else-if="!form.videoUrl && !videoFlag"
                       class="el-icon-plus avatar-uploader-icon"></i>
                    <el-progress v-if="videoFlag == true"
                                 type="circle"
                                 v-bind:percentage="videoUploadPercent"
                                 style="margin-top:7px;"></el-progress>
                  </el-upload>
                </div>
              </div>
            </div>
            <p class="Upload_pictures">
              <span></span>
              <span>最多可以上传1个视频，建议大小50M，推荐格式mp4</span>
            </p>
          </div>
            </el-form-item>
          </el-col>

--------js代码---------------------------------
//上传前回调
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 50;
      if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb',   'video/mov'].indexOf(file.type) == -1) {
        Message.info("请上传正确的视频格式");
        return false;
      }
      if (!fileSize) {
        Message.info("视频大小不能超过50MB");
        return false;
      }
      this.isShowUploadVideo = false;
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    //上传成功回调
    handleVideoSuccess(res, file) {

      this.isShowUploadVideo = true;
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      this.form.videoUrl = res.data.fileUrl

    },

兄弟 看明白没有，如果没有看明白，需要源代码 上上上
https://gitee.com/soul_PreCoder/dashboard/projects
赶快动起来… 不要在左思右想了…

本文地址：https://blog.csdn.net/coder1998/article/details/107284545