vue2播放视频和预览文件的组件以及使用方法

##文件预览组件

  1. 按照组件
        解决展示pdf的问题
    npm install pdfh5
    npm install  canvas@2.8.0 --ignore-scripts
    npm install --save dommatrix     
    npm install --save web-streams-polyfill解决excel和docx预览的问题
    npm install @vue-office/docx vue-demi@0.14.6
    npm install @vue-office/excel vue-demi@0.14.6
    npm install @vue/composition-api  
    
  2. 使用方法
    1. 前端:
    页面引入组件:
    import VueOfficeDocx from '@vue-office/docx'
    import Pdfh5 from "pdfh5";
    import VueOfficeExcel from '@vue-office/excel'import '@vue-office/excel/lib/index.css'
    import '@vue-office/docx/lib/index.css'pdf预览:
    <div id="pdf" v-if="nowItem.fileFormat === '.pdf'" style="width: 100%; height: 100%; border: none;"></div>docx预览:
    <vue-office-docx
    :key="new Date().getTime()"
    v-if="nowItem.fileFormat === '.docx'"
    :src="preViewUrl"
    @rendered="rendered"
    />
    excel预览:
    <vue-office-excel
    :key="new Date().getTime()"
    v-if="nowItem.fileFormat === '.xls' || nowItem.fileFormat === '.xlsx'"
    :src="preViewUrl"
    @rendered="rendered"
    />
    txt预览:
    <iframe v-if="nowItem.fileFormat === '.txt'" :src="preViewUrl" style="width: 100%; height: 98%; border: none;"/>
    
     js部分:  downLoadLibrary(item.id).then(res => { //请求接口获取文件流if (item.fileFormat === '.txt') {this.preViewUrl = window.URL.createObjectURL(res) //将文件流转化为urlthis.loading = false;} else if (item.fileFormat === '.pdf') {let prePdfUrl = window.URL.createObjectURL(res) //将文件流转化为url
    //使用id  #pdf 获取pdfh5实例this.pdfh5 = new Pdfh5('#pdf', {pdfurl: prePdfUrl,pageNum: false, //不显示页码backTop: false,  //不显示回到顶部zoomEnable: false, //禁止缩放maxZoom: 1, //点击屏幕缩放1倍 也就是禁止缩放的});//完成let that = this;this.pdfh5.on('complete', function (status, msg, time) {that.rendered(); //渲染完成回调方法 可以自己定义业务逻辑});} else {this.preViewUrl = res //docx和excel}})请求接口:export function downLoadLibrary(id){return request({url: '/manager/library/downLoadLibrary/' + id,method: 'get',responseType: 'blob',})}
    1. 后端:这里就是service层的接口,根据id获取文件流并返回给前端,前端根据文件格式进行不同的处理。
    public void downLoadLibrary(Long id, HttpServletResponse response) {TInstructionResourceLibrary instructionResourceLibrary = this.selectInstructionResourceLibraryById(id);if (Objects.isNull(instructionResourceLibrary)) {throw new ServiceException("资源不存在");}String configByKey = sysConfigService.selectConfigByKey("sys.upload.file");String resourcePath = configByKey + instructionResourceLibrary.getResourcePath();File file = new File(resourcePath);if (!file.exists()) {throw new ServiceException("文件不存在:" + resourcePath);}try {if (instructionResourceLibrary.getFileFormat().equals(".txt")) {response.setContentType("text/plain");} else if (instructionResourceLibrary.getFileFormat().equals(".pdf")) {response.setContentType("application/pdf");} else {response.setContentType("application/octet-stream");}FileUtils.writeBytes(resourcePath, response.getOutputStream());} catch (Exception e) {throw new ServiceException("下载文件失败:" + e.getMessage());}
    }
    

视频预览组件

  1. 使用自带的video组件即可,无需额外的组件。
  2. 前端:
<videoref="video":controls="true"controlslist="nodownload noplaybackrate disablepictureinpicture":src="preViewUrl"webkit-playsinline="true"playsinline="true"x-webkit-airplay="allow"x5-playsinlinestyle="width: 100%"@play="onPlayerPlay"@pause="onPlayerPause"@seeking="seeking"@seeked="seeked"@canplay="onPlayerCanPlay"@timeupdate="onPlayerTimeUpdate":autoplay="false"/>

js部分:

    playVideo(row) { // 打开视频弹出层 并且设置视频播放的src的url路径this.videoName = row.videoName;this.preViewOpen = true;this.preViewUrl = "http://域名:端口/路径"this.videoId = row.id;},handleClosePreView() { //关闭弹出层,并且清除播放记录 ,里面的字段可更具需要自定义console.log("关闭弹出层");this.addRecord("close")this.recordId = null; //播放记录idthis.videoId = null; //播放的视频idthis.currentTime = 0; //视频的当前播放进度时间this.tempTime = 0; //临时记录当前播放进度时间,防止拖动进度条时,时间不准确this.viewDuration = 0; //播放时长,单位秒,是根据开始播放到关闭弹出层的视频非暂停时间的总时长this.seconds = 0; //js计时器,大致计算播放时长 大概50多s 触发一次保存接口,之后清零this.setIntervalId && clearInterval(this.setIntervalId); // 清除定时器this.viewDurationInterval && clearInterval(this.viewDurationInterval); // 清除定时器this.duration = 0; //视频实际的时长this.videoName = ""; //视频每次this.$refs.video.load(); //重新加载视频this.preViewOpen = false; //关闭弹出层},//新增播放记录addRecord(option) { //要记录播放的时长let data = {"id": this.recordId, // 记录id"videoId": this.videoId, // 视频id"viewDuration": this.viewDuration, // 播放时长};addTrainVideoRecord(data).then(response => {console.log(response);this.recordId = response.msg;if (option === "close") {this.recordId = null;}});},onPlayerCanPlay() { //回调函数 视频准备好可以播放console.log("可以播放");},onPlayerPlay() { //回调函数 点击播放按钮,视频开始播放if (this.playerPauseFlag) {return;}//新增一条播放记录this.addRecord();this.setIntervalId = setInterval(() => {this.tempTime = this.currentTime + 0.01;this.seconds += 0.01;}, 1); // 定时器,每隔1ms获取一次播放时间this.viewDurationInterval = setInterval(() => {this.viewDuration += 1;}, 950)},onPlayerTimeUpdate(e) { //回调函数 视频播放进度变化 基本每秒触发一次this.currentTime = e.target.currentTime;this.duration = e.target.duration;//每播放1左右分钟秒保存一次播放记录if (this.seconds >= 140) {this.addRecord()this.seconds = 0;}},onPlayerPause() { //回调函数 视频暂停播放if (this.playerPauseFlag) {return;}//记录一次 下次开始是新的记录this.addRecord()this.setIntervalId && clearInterval(this.setIntervalId);this.viewDurationInterval && clearInterval(this.viewDurationInterval);},seeking() { //回调函数 拖动进度条console.log("拖动进度条");},seeked() { //回调函数 拖动进度条结束this.playerPauseFlag = truesetTimeout(function () {this.playerPauseFlag = false}, 1000)// 只允许向后拖动if (this.tempTime < this.currentTime) {this.$refs.video.currentTime = this.tempTime;}},

后端接口:流式返回的 每次2m的视频流

@GetMapping(value = "/viewVideo/{id}", produces = MediaType.TEXT_EVENT_STREAM_VALUE)public void viewVideo(@PathVariable("id") Long id, HttpServletResponse response) throws IOException {// 获取视频地址File videoFile = videoService.findVideoUrl(id);StreamingResponseBody stream = out -> {try (InputStream inputStream = Files.newInputStream(videoFile.toPath())) {byte[] bytes = new byte[1024 * 1024 * 2]; // 2Mint length;while ((length = inputStream.read(bytes)) != -1) {out.write(bytes, 0, length);}System.out.println("视频下载成功");out.flush();} catch (final Exception e) {throw new RuntimeException(e);}};stream.writeTo(response.getOutputStream());}

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

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

相关文章

本地windows环境下,在vscode里将go项目打成docker镜像,并运行访问

此处只展示一个简单go代码实例. #前提:需要装好docker和golang环境,本地docker启动且配置好镜像源地址: # 容器镜像加速服务-云港网络 1.首先在vscode中写一个简单输出的demo go mod init &#xff0b;go mod tidy编译一下,命令运行如下: 2.使用命令生成Dockerfile文件 $ g…

GIT的使用方法以及汉化方法

1.下载git软件&#xff0c;可以从官网下载 下载后默认安装即可。 2.找到一个文件夹&#xff0c;或者直接打开gitbash gitbash可以使用cd指令切换目录的 打开后输入 git clone https:[git仓库的网页]即可克隆仓库 就是这个地址 克隆后即可使用代码 如果忘记了命令可以使用 -…

【Linux】Linux安全与密钥登录指南

在使用Linux服务器时&#xff0c;确保服务器的安全至关重要。本文将为你介绍一些关键的Linux安全措施&#xff0c;包括开启密钥登录、查看登录日志、限制登录IP以及查看系统中能够登录的账号。以下内容适合小白用户&#xff0c;通过简单的操作就能有效提升服务器的安全性。 目录…

前缀和(四)除自身以外数组的乘积

238. 除自身以外数组的乘积 给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&…

C# 13 中的新增功能

C# 12 中的新增功能C# 11 中的新增功能C# 10 中的新增功能C# 9.0 中的新增功能C# 8.0 中的新增功能C&#xff03;7.0中有哪些新特性&#xff1f;C#6.0中10大新特性的应用和总结C# 5.0五大新特性 将C#语言版本升级为预览版 C# 13 包括一些新增功能。 可以使用最新的 Visual Stu…

图解RabbitMQ七种工作模式生产者消费者模型的补充

文章目录 1.消费者模型2.生产者-消费者模型注意事项2.1资源释放顺序问题2.2消费者的声明问题2.3虚拟机和用户的权限问题 3.七种工作模式3.1简单模式3.2工作模式3.3发布/订阅模式3.4路由模式3.5通配符模式3.6RPC通信3.7发布确认 1.消费者模型 之前学习的这个消息队列的快速上手…

如果模块把http改成了https请求,测试方案应该怎么制定

首先确定要测试的模块、接口、功能等&#xff0c;以及测试的目标&#xff0c;确保HTTPS请求能够正常进行、数据传输安全等。 1.功能测试 回归相应的功能模块以及业务逻辑&#xff0c;是否正常 2.兼容测试 测试不同浏览器和操作系统是否能够正常支持HTTPS连接。 验证模块在各种设…

编写按层次顺序(同一层自左至右)遍历二叉树的算法。或:按层次输出二叉树中所有结点;

解&#xff1a;思路&#xff1a;既然要求从上到下&#xff0c;从左到右&#xff0c;则利用队列存放各子树结点的指针是个好办法。 这是一个循环算法&#xff0c;用while语句不断循环&#xff0c;直到队空之后自然退出该函数。 技巧之处&#xff1a;当根结点入队后&#xff0c;会…

头歌 Linux之线程管理

第1关&#xff1a;创建线程 任务描述 通常我们编写的程序都是单进程&#xff0c;如果在一个进程中没有创建新的线程&#xff0c;则这个单进程程序也就是单线程程序。本关我们将介绍如何在一个进程中创建多个线程。 本关任务&#xff1a;学会使用C语言在Linux系统中使用pthrea…

Leetcode101. 对称二叉树(HOT100)

链接 我的错误代码&#xff1a; class Solution { public:bool isSymmetric(TreeNode* root) {if(!root)return true;if(!root->left&&!root->right)return true;if(!(root->left&&root->right))return false;if(root->left->val!root->…

Java 集合:强大的数据管理工具

在 Java 编程中&#xff0c;集合是一种非常重要的工具&#xff0c;它提供了一种方便的方式来存储和操作一组对象。本文将深入探讨 Java 集合框架&#xff0c;包括其主要类型、特点、用法以及一些最佳实践。 一、引言 在软件开发过程中&#xff0c;我们经常需要处理一组数据。…

qtcanpool 知 09:测试框架

文章目录 前言不满改进优化后语 前言 很久以前&#xff0c;作者写的代码都没有测试用例&#xff0c;最多就是写个 demo 验证一下&#xff0c;毕竟不是专业出身&#xff0c;也没经过大公司的洗礼。 后来&#xff0c;参与到一些项目才知道有专门的测试&#xff0c;而且开发也要测…

网络安全系列 之 SQL注入学习总结

目录 1. sql注入概述2. sql注入测试工具3. sql注入防御方法 3.1 问题来源3.2 防御方法4. SQL注入防御举例 4.1 使用JDBC时&#xff0c;SQL语句进行了拼接 1. 使用statement的executeQuery、execute、executeUpdate等函数时&#xff0c;传入的SQL语句拼接了来自外部的不可信参数…

《平衡之策:C++应对人工智能不平衡训练数据的数据增强方法》

在人工智能的广袤领域中&#xff0c;数据是驱动模型学习与成长的核心燃料。然而&#xff0c;不平衡的训练数据却如同一颗隐藏的暗礁&#xff0c;常常使模型的训练之船偏离正确航道&#xff0c;导致性能不佳与偏差增大。当我们聚焦于 C这一强大的编程语言时&#xff0c;又有哪些…

完整指南:在Ubuntu 20.04 ROS 1环境中配置和使用Orbbec SDK

完整指南&#xff1a;在Ubuntu 20.04 ROS 1环境中配置和使用Orbbec SDK 要在Ubuntu 20.04系统中使用ROS 1环境配置和使用Orbbec SDK&#xff0c;可以遵循以下详细且系统化的步骤。这些步骤将引导您从下载必要的工具和SDK到学习如何使用这些资源&#xff0c;确保您能有效地利用…

使用 Selenium 和 Python 爬取腾讯新闻:从基础到实践

使用 Selenium 和 Python 爬取腾讯新闻&#xff1a;从基础到实践 在这篇博客中&#xff0c;我们将介绍如何利用 Selenium 和 Python 爬取腾讯新闻的内容&#xff0c;并将结果保存到 CSV 文件中。本教程包含以下内容&#xff1a; 项目简介依赖安装实现功能的代码实现中的关键技…

element ui 自定义文件上传二进字流传值问题

1.封装的post请求 import axios from ./axios.js //引入axios文件 export function post (url, data) {return axios({method: post,url,data: {...data}}) }//修改后 正常了 export function post (url, data) {return axios({method: post,url,data: data}) } 2.api文件里面…

【设计模式系列】单例模式(二十)

一、什么是单例模式 单例模式&#xff08;Singleton Pattern&#xff09;是一种常用的软件设计模式&#xff0c;属于创建型模式。它的目的是确保一个类只有一个实例&#xff0c;并提供一个全局访问点来获取这个实例。 单例模式的主要特点包括&#xff1a; 唯一性&#xff1a…

在 SpringBoot 集成了 Mybatis 的基础上添加 Mybatis-Plus

SpringBoot 集成了 Mybatis 可以参考前一篇文章 《SpringBoot 项目快速集成 Mybatis》 在 SpringBoot 集成了 Mybatis 的基础上添加 Mybatis-Plus 步骤&#xff1a; 引入 mybatis-plus 依赖&#xff1a; <dependency><groupId>com.baomidou</groupId><…

BioDeepAV:一个多模态基准数据集,包含超过1600个深度伪造视频,用于评估深度伪造检测器在面对未知生成器时的性能。

2024-11-29, 由罗马尼亚布加勒斯特大学创建BioDeepAV数据集&#xff0c;它专门设计来评估最先进的深度伪造检测器在面对未见过的深度伪造生成器时的泛化能力&#xff0c;这对于提高检测器的鲁棒性和适应性具有重要意义。 数据集地址&#xff1a;biodeep 一、研究背景&#xff1…