一、点击视频下载(通过视频url实现);二、点击下载视频按钮,视频以压缩包形式下载(但未实现压缩视频)

一、点击视频下载(通过视频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();});},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/789235.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

go root和go path

在 Go 语言中&#xff0c;GOPATH 和 GOROOT 是两个重要的环境变量&#xff0c;它们分别用于指定工作区和 Go 的安装路径。 GOPATH&#xff1a; GOPATH 是指定 Go 工作区&#xff08;workspace&#xff09;的环境变量。工作区是指包含 Go 源代码、库以及生成的可执行文件等的目…

Qt使用opencv打开摄像头

1.效果图 2.代码 #include "widget.h"#include <QApplication>#include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp>#include <QImage> #include <QLabel> #incl…

hadoop 高可用(HA)、HDFS HA、Yarn HA

目录 hadoop 高可用(HA) HDFS高可用 HDFS高可用架构 QJM 主备切换&#xff1a; Yarn高可用 hadoop 高可用(HA) HDFS高可用 HDFS高可用架构 QJM 主备切换&#xff1a; Yarn高可用

Gtest 和VLD一起使用报内存泄漏

这个问题已知&#xff1a; Memory Leaks on Windows using VLD Issue #2255 google/googletest GitHub 那么解决办法是什么呢&#xff1f;一个折中的办法是这样的。 TEST() {VLDMarkAllLeaksAsReported();{/// 待测代码std::string s ...;}VLDReportLeaks(); }class MyT…

【威胁情报综述阅读3】Cyber Threat Intelligence Mining for Proactive Cybersecurity Defense

【威胁情报综述阅读1】Cyber Threat Intelligence Mining for Proactive Cybersecurity Defense: A Survey and New Perspectives 写在最前面一、介绍二、网络威胁情报挖掘方法和分类A. 研究方法1&#xff09; 第 1 步 - 网络场景分析&#xff1a;2&#xff09; 第 2 步 - 数据…

python文件处理:解析docx/word文件文字、图片、复选框

前言 因为一些项目原因&#xff0c;我需要提供解析docx内容功能。本来以为这是一件比较简单的工作&#xff0c;没想到在解析复选框选项上吃了亏&#xff0c;并且较长一段时间内通过各种渠道都没有真正解决这一问题&#xff0c;反而绕了远路。 终于&#xff0c;我在github pytho…

2024最新telegram电报模块化机器人TG飞机混合开发的机器人框架

更新日记&#xff1a;24-03-10 优化服务框架回复地址 金额 等交互模式优化修复一些免费莫名被卸载模块问题修复收费模块续费后未到期被卸载问题框架增加一些方法,详细最近会出各种开发教程TRX兑换增加机器人上管理功能,自动开会员上线,能量即将上线 更新日志24-02-25 增加电…

深入了解Flutter中Overlay的介绍以及使用

Flutter Overlay 介绍 在 Flutter 中&#xff0c;Overlay 是一种特殊的 Widget&#xff0c;它可以用来在应用程序的其他部分之上显示内容。Overlay 非常适合用于显示模态对话框、弹出菜单、工具提示等。 Overlay 的工作原理 Overlay 位于 Flutter 的渲染树之外&#xff0c;这…

golang和Java的简单介绍和对比

一、golang 1、Golang简介 Golang&#xff0c;也称为Go&#xff0c;是由Google公司在2009年推出的开源编程语言&#xff0c;由罗伯特格瑞史莫(Rob Pike)、肯汤普逊(Ken Thompson)、罗勃派克(Robert Griesemer)等人设计。Go语言的目标是在保持简单高效的编程模型的同时&#xf…

Golang Context是什么

一、这篇文章我们简要讨论Golang的Context有什么用 1、首先说一下Context的基本作用&#xff0c;然后在讨论他的实现 (1)数据传递&#xff0c;子Context只能看到自己的和父Context的数据&#xff0c;子Context是不能看到孙Context添加的数据。 (2)父子协程的协同&#xff0c;比…

android AndroidAutoSize 取消第三方库适配问题(两个步骤)

比如第三方库的Activity是&#xff1a;PictureSelectorSupporterActivity、PictureSelectorTransparentActivity、CropImageActivity 1.在自定义Application 的 onCreate 方法设置&#xff1a; Overridepublic void onCreate() {super.onCreate();this.mAppthis;registerActi…

华为OD机试 - 最大社交距离(Java 2024 C卷 100分)

华为OD机试 2024C卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测试…

2024.2.29力扣每日一题——统计可能的树根数目

2024.2.29 题目来源我的题解方法一 深度搜索&#xff08;暴力&#xff09; 超时方法二 树形动态规划 题目来源 力扣每日一题&#xff1b;题序&#xff1a;2581 我的题解 方法一 深度搜索&#xff08;暴力&#xff09; 超时 以每个节点node为跟进行深度搜索&#xff0c;并在搜…

Onedrive技巧与问题

初级代码游戏的专栏介绍与文章目录-CSDN博客 这是onedrive使用过程中的各种技巧和问题的记录&#xff0c;随时更新。 目录 一、可在在手机上使用吗&#xff1f; 二、注意&#xff1a;同步完成再关机 三、C盘不够大&#xff0c;Onedrive文件太多放不下怎么办&#xff1f; 四…

基于单片机便携式测振仪的研制系统设计

**单片机设计介绍&#xff0c;基于单片机便携式测振仪的研制系统设计 文章目录 一 概要二、功能设计三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机便携式测振仪的研制系统设计概要主要涉及利用单片机作为核心控制器件&#xff0c;结合测振原理和技术&#x…

15.Python访问数据库

如果数据量较少&#xff0c;则我们可以将数据保存到文件中&#xff1b;如果数据量较 大&#xff0c;则我们可以将数据保存到数据库中。 1 SQLite数据库 SQLite是嵌入式系统使用的关系数据库&#xff0c;目前的主流版本是SQLite 3。SQLite是开源的&#xff0c;采用C语言编写而…

KV260 BOOT.BIN更新 ubuntu22.04 netplan修改IP

KV260 2022.2设置 BOOT.BIN升级 KV260开发板需要先更新BOOT.BIN到2022.2版本&#xff0c;命令如下&#xff1a; sudo xmutil bootfw_update -i “BOOT-k26-starter-kit-202305_2022.2.bin” 注意BOOT.BIN应包含全目录。下面是更新到2022.1 FW的示例&#xff0c;非更新到2022.…

Autosar-从0到1构建Autosar最小系统(免费)-1

1建立Ecu最小系统 1.1Ecu最小系统组成 Ecu最小系统至少需要&#xff1a;SWC、Com、ComM、EcuM、BswM、Os、RTE等。 Autosar各模块的配置以arxml文件形式保存&#xff0c;因此生成以上模块需要以下各个arxml文件。 模块 所需的arxml文件 准备好以上arxml文件后&#xff0c;就可…

前端三剑客 —— HTML (下)

目录 HTML 多媒体标签 Img*** a标签*** 第一种用法&#xff1a;超链接 第二种用法&#xff1a;锚点 audio标签 video标签 表格标签 带标题的表格 跨行跨列标签 表格嵌套 列表标签 ul --- 它是无序列表标签 ol --- 它是有序列表 dl --- 它是数据列表 表单标签***…

java学习之路-数组定义与使用

目录 ​编辑 1.什么是数组 2.数组的创建及其初始化 2.1数组的创建 2.2数组的初始化 3.数组的使用 3.1数组元素访问 3.2遍历数组 4.数组是引用类型 4.1jvm的内存分布 4.2基本类型变量与引用类型变量的区别 4.3引用变量详解 4.4 null 5.数组的使用场景 5.1存储数据 5…