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

深碍√TFBOYSˉ_ 2023-02-25 08:36 58阅读 0赞

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

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

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

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

项目效果图:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70 1]

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

上传视频 采用 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  
赶快动起来… 不要在左思右想了…

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70]: /images/20230209/b87bfdd6d99f45808e9bd60d023c79e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/202007111448427.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA==,size_16,color_FFFFFF,t_70