当前位置：首页 > news >正文

一、点击视频下载（通过视频url实现）；二、点击下载视频按钮，视频以压缩包形式下载（但未实现压缩视频）

news 2025/9/6 22:50:30

一、点击视频下载（通过视频url实现）

<div class="video-list" v-for="(item,index) in videoList" :key="index"><span class="video-title" >{{item.title}}</span><span class="video-content" >{{item.content}}</span><div class="video-show" ><video@click="choseDownload(item.url)"muted="muted"preload="load"autoplay="autoplay"loop="loop"webkit-playsinlineplaysinlinex5-video-player-type="h5"class="efficient-video"style="cursor: pointer;"><source :src="item.url" type="video/mp4"></video></div></div>

  created() {this.videoListSelect();},
// 视频管理分页查询videoListSelect(){let data = {type:2,//查视频管理的所有数据fileType:'v',//v:视频pageNum: 1,pageSize: 8,};let url = '/ArDownLoad/getAllDownLoad';this.$request.post(url, data).then(data =>{this.videoList = data.obj.list;console.log("this.videoList-------", this.videoList)})},
//视频点击时的下载事件choseDownload(url) {fetch(url).then(res => res.blob()).then(blob => {const a = document.createElement('a')const objectUrl = window.URL.createObjectURL(blob)a.download = namea.href = objectUrla.click()window.URL.revokeObjectURL(objectUrl)a.remove()})},

二、点击下载视频按钮，视频以压缩包形式下载（但未实现压缩视频）
直接下载视频文件，并将其以ZIP格式保存

<div class="video-list" v-for="(item,index) in videoList" :key="index"><span class="video-title" >{{item.title}}</span><span class="video-content" >{{item.content}}</span><div class="video-button"><el-button @click="choseDownload(item.url)" color="#73767a"><el-icon style="margin: 0 4px 0 0"><Download /></el-icon>下载</el-button></div><div class="video-show" ><videomuted="muted"preload="load"autoplay="autoplay"loop="loop"webkit-playsinlineplaysinlinex5-video-player-type="h5"class="efficient-video"style="cursor: pointer;"><source :src="item.url" type="video/mp4"></video></div></div>

choseDownload(videoUrl) {// 创建JSZip实例const zip = new JSZip();// 发起请求获取视频文件的Blob数据this.getVideoBlob(videoUrl).then(blob => {// 将视频文件添加到ZIP中，假设视频文件名为'video.mp4'zip.file('video.mp4', blob, { binary: true });// 生成ZIP文件的Blob数据zip.generateAsync({ type: 'blob' }).then(content => {// 使用file-saver保存ZIP文件saveAs(content, 'video.zip');// 提示用户下载完成this.$message.success('视频压缩包下载完成');}).catch(error => {// 压缩或保存失败时的处理this.$message.error('视频压缩包下载失败');});}).catch(error => {// 获取视频Blob数据失败时的处理this.$message.error('获取视频文件失败');});},// 获取视频文件的Blob数据getVideoBlob(url) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();xhr.open('GET', url, true);xhr.responseType = 'blob';xhr.onload = () => {if (xhr.status === 200) {resolve(xhr.response);} else {reject(new Error(`请求视频文件失败: ${xhr.status}`));}};xhr.onerror = () => {reject(new Error('网络错误'));};xhr.send();});},