上传视频
1. 上传按钮事件
- 点击上传按钮事件 --这个地方为案例，我就简单使用了一个a标签
<a @click="uploadVideo(record)">上传视频</a>
2. 上传按钮触发
- 点击上传按钮触发，打开上传视频弹窗
record当前点击列表中的哪一行，把数据传过来
uploadVideo(record) { console.log('record', record) this.assessment = record this.visible_uploadVideov = true },
3. 声明变量visible_uploadVideov
- 在data return下声明变量visible_uploadVideov
visible_uploadVideov: false, //默认为false关闭状态
4. 上传视频弹窗
- 上传视频弹窗代码如下
<a-modal v-model="visible_uploadVideov" title="上传视频" :footer="null" :width="600"> <a-form-model :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }"> <a-form-model-item label="点击上传视频："> <j-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :multiple="true" v-model="assessment.assessmentVideo"> <a-button> <a-icon type="upload"/> 上传 </a-button> </j-upload> </a-form-model-item> <a-form-model-item :wrapper-col="{ span: 14, offset: 9 }"> <a-button @click="uploadVideovCancel"> 取消</a-button> <a-button type="primary" @click="uploadVideovSubmit" style="margin-left: 10px"> 保存</a-button> </a-form-model-item> </a-form-model> </a-modal>
5. 保存视频
- 将上传的视频路径保存到数据库的assessment.assessmentVideo这个字段下
- 点击保存按钮，触发保存上传视频方法，说白了就是去更新assessment.assessmentVideo字段值
uploadVideovSubmit() { postAction('/chx/chxAssessmentRecord/edit', this.assessment).then((res) => { console.log('res', res) if (res.success) { this.$message.success('保存成功!') } else { this.$message.error('保存失败!') } this.visible_uploadVideov = false }) this.loadData()//调用查询方法刷新页面 },
6. 关闭上传视频弹窗
uploadVideovCancel() { this.visible_uploadVideov = false },
以上是上传视频案例，下面来分享如何播放上传的视频
播放视频
1. 获取上传后的视频
- 上传后的视频我是在列表中进行显示，使用插槽进行处理
{ title: '视频', align: 'center', dataIndex: 'assessmentVideo', scopedSlots: {customRender: 'assessment_videoSlot'}, },
1.1 插槽
- 插槽代码如下
这段代码的意思是，如果assessmentVideo这个字段也就是text有值的话呢显示一个svg的图标，并添加了一个playVideo事件
<span slot="assessment_videoSlot" slot-scope="text, record"> <template v-if="text != null"> <a @click="playVideo(text)"> <svg t="1672388588867" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2538" width="20" height="20"> <path d="M512 64c126.72 3.328 232.192 47.168 316.48 131.456C912.832 279.872 956.672 385.344 960 512c-3.328 126.72-47.168 232.192-131.52 316.48C744.192 912.832 638.72 956.672 512 960c-126.72-3.328-232.192-47.168-316.544-131.52C111.232 744.192 67.392 638.72 64 512c3.328-126.72 47.168-232.192 131.456-316.544C279.872 111.232 385.344 67.392 512 64z m0 832c108.672-2.688 199.168-40.192 271.488-112.512S893.312 620.672 896 512c-2.688-108.672-40.192-199.168-112.512-271.488S620.672 130.688 512 128c-108.672 2.688-199.168 40.192-271.488 112.512S130.688 403.328 128 512c2.688 108.672 40.192 199.168 112.512 271.488S403.328 893.312 512 896z m-48-248L668.992 512 464 376v272z m11.008-341.952l248.96 165.952a46.848 46.848 0 0 1 21.056 40.064c0 16.64-7.04 29.952-21.056 40l-248.96 166.016a47.936 47.936 0 0 1-24.96 8.448 45.248 45.248 0 0 1-24.512-6.016 51.84 51.84 0 0 1-18.56-17.472 45.76 45.76 0 0 1-6.976-24.96V346.048a45.44 45.44 0 0 1 7.04-24.96 52.16 52.16 0 0 1 18.432-17.536c7.68-4.352 15.872-6.4 24.576-6.016 8.64 0.32 16.96 3.2 24.96 8.512z" fill="#0ebaaa" p-id="2539"> </path> </svg> </a> </template> <template v-else> <svg t="1672388588867" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2538" width="20" height="20"> <path d="M512 64c126.72 3.328 232.192 47.168 316.48 131.456C912.832 279.872 956.672 385.344 960 512c-3.328 126.72-47.168 232.192-131.52 316.48C744.192 912.832 638.72 956.672 512 960c-126.72-3.328-232.192-47.168-316.544-131.52C111.232 744.192 67.392 638.72 64 512c3.328-126.72 47.168-232.192 131.456-316.544C279.872 111.232 385.344 67.392 512 64z m0 832c108.672-2.688 199.168-40.192 271.488-112.512S893.312 620.672 896 512c-2.688-108.672-40.192-199.168-112.512-271.488S620.672 130.688 512 128c-108.672 2.688-199.168 40.192-271.488 112.512S130.688 403.328 128 512c2.688 108.672 40.192 199.168 112.512 271.488S403.328 893.312 512 896z m-48-248L668.992 512 464 376v272z m11.008-341.952l248.96 165.952a46.848 46.848 0 0 1 21.056 40.064c0 16.64-7.04 29.952-21.056 40l-248.96 166.016a47.936 47.936 0 0 1-24.96 8.448 45.248 45.248 0 0 1-24.512-6.016 51.84 51.84 0 0 1-18.56-17.472 45.76 45.76 0 0 1-6.976-24.96V346.048a45.44 45.44 0 0 1 7.04-24.96 52.16 52.16 0 0 1 18.432-17.536c7.68-4.352 15.872-6.4 24.576-6.016 8.64 0.32 16.96 3.2 24.96 8.512z" fill="#bdbfbf" p-id="2539"></path> </svg> </template> </span>
2. 触发播放视频事件
playVideo(text) { this.videoSrc = this.videoSrc += text console.log('this.videoSrc==========>', this.videoSrc) this.playVideoVisible = true },
3. 播放视频弹窗
视频存放地址
上传视频Api地址
根据你的地址替换一下
<a-modal v-model="playVideoVisible" title="播放视频" :width="800" @cancel="disposeVideo"> <video width="100%" v-if="playVideoVisible" height="400" controls ref="videoPlayer"> <source :src="'视频存放地址' + videoSrc" type="video/mp4"> <source :src="'上传视频Api地址' + videoSrc" type="video/mp4"> </video> </a-modal>
4. 暂停视频
disposeVideo() { this.$refs.videoPlayer.pause(); },
