文章目录
- 上传视频
- 1. 上传按钮事件
- 2. 上传按钮触发
- 3. 声明变量visible_uploadVideov
- 4. 上传视频弹窗
- 5. 保存视频
- 6. 关闭上传视频弹窗
- 播放视频
- 1. 获取上传后的视频
- 1.1 插槽
- 2. 触发播放视频事件
- 3. 播放视频弹窗
- 4. 暂停视频
上传视频
1. 上传按钮事件
- 点击上传按钮事件 --这个地方为案例，我就简单使用了一个a标签
<a @click="uploadVideo(record)">上传视频</a>
2. 上传按钮触发
- 点击上传按钮触发，打开上传视频弹窗
record当前点击列表中的哪一行，把数据传过来
uploadVideo(record) {console.log('record', record)this.assessment = recordthis.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"><pathd="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"><pathd="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 += textconsole.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();
},
