基于SSM的学生选课考勤成绩权限新闻发布系统之课程视频章
程序员文章站
2022-06-09 20:46:17
各位小伙伴,大家好,今天给大家说一说 《学生选课考勤成绩新闻发布权限管理系统之课程的视频章》,可能一听这个名字,很多人蒙了,第一个反应,怎么怎么这么长的名字。哎,其实我也没有办法,这些其实都是系统的核心的模块。这个系统分为 单体系统版本 前后端分离版本,移动版本 … 实在是全全全。一篇文章不能足够的说明所有东西,今天只给大家说一下 课程模块的 视频功能。 如果需要下载的小伙伴。去码云.需要的下载源码,文档地址https://gitee.com/soul_PreCoder/dashboard/proj...
各位小伙伴,大家好,今天给大家说一说 《学生选课考勤成绩新闻发布权限管理系统之课程的视频章》,可能一听这个名字,很多人蒙了,第一个反应,怎么怎么这么长的名字。哎,其实我也没有办法,这些其实都是系统的核心的模块。
这个系统分为 单体系统版本 前后端分离版本,移动版本 … 实在是全全全。一篇文章不能足够的说明所有东西,今天只给大家说一下 课程模块的 视频功能。 如果需要下载的小伙伴。去码云.
需要的下载源码,文档地址
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