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

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());}

相关文章:

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

##文件预览组件 按照组件 解决展示pdf的问题 npm install pdfh5 npm install canvas2.8.0 --ignore-scripts npm install --save dommatrix npm install --save web-streams-polyfill解决excel和docx预览的问题 npm install vue-office/docx vue-demi0.14.6 npm inst…...

性能之巅:Go语言优化深度探索

引言 在Go语言中进行性能优化是一个涉及多方面的工作&#xff0c;它涵盖代码编写、编译器优化、运行时系统调优以及对应用程序的深入理解。以下是一些关键点&#xff0c;包括性能分析工具、内存管理、并发优化等方面的内容&#xff0c;并附带了简单案例源代码。 性能分析工具…...

react + antd desgin 使用form功能时upload,radio,checkbox不能回显的问题

最近使用react开发 遇到form回显的问题 &#xff0c;处理upload回显的问题&#xff0c;提示 react-refresh:160 Warning: [antd: Upload] value is not a valid prop, do you mean fileList? 查看文档后&#xff0c;在form.item 组件下有一个特殊属性 valuePropName 子节点的值…...

【08】MySQL复杂查询:子查询语句详解与示例

文章目录 一、子查询的基本概念子查询的基本结构子查询的类型 二、标量子查询示例 1&#xff1a;标量子查询示例 2&#xff1a;标量子查询与IN组合 三、多行子查询示例 1&#xff1a;多行子查询与IN示例 2&#xff1a;多行子查询与ANY 四、多列子查询示例 1&#xff1a;多列子查…...

Unity 相机旋转及角度限制

前言 由于欧拉角具有直观的可读性&#xff0c;做相机旋转时选择修改eulerAngles 来实现旋转&#xff0c;但实际效果与预期稍有不同&#xff0c;这是因为欧拉角受到万向锁&#xff08;Gimbal Lock&#xff09;的影响&#xff0c;在赋值时需要对输入的角度进行调整。 if (value…...

error=‘null‘], commandType=io.lettuce.core.RedisPublisher$SubscriptionCommand]

问题 查看java应用启动日志输出下面错误&#xff1a; errornull], commandTypeio.lettuce.core.RedisPublisher$SubscriptionCommand] Completing command LatencyMeteredCommand [typeINFO, outputStatusOutput [output# Server redis_version:4.0.14 redis_git_sha1:000…...

Golang 字符串字面量表示方法

文章目录 1.普通字符串字面量&#xff08;Double-Quoted String Literals&#xff09;2.原始字符串字面量&#xff08;Raw String Literals&#xff09;3.字节字符串字面量&#xff08;Byte Slice Literals&#xff09;4.码值表示字符串字面量Unicode 转义序列UTF8 转义序列十六…...

03_Webpack模块打包工具

03_Webpack模块打包工具 目录 知识点自测 以下哪个选项是 ECMAScript 默认导出和导入的语法&#xff1f; A&#xff1a;export 和 require B&#xff1a;module.exports {} 和 import 变量名 C&#xff1a;export default 和 import 变量名 D&#xff1a;export 和 import {…...

【目标跟踪】AntiUAV600数据集详细介绍

AntiUAV600数据集的提出是为了适应真实场景&#xff0c;即无人机可能会随时随地出现和消失。目前提出的Anti-UAV任务都只是将其看做与跟踪其他目标一样的任务&#xff0c;没有结合现实情况考虑。 论文链接&#xff1a;https://arxiv.org/pdf/2306.15767https://arxiv.org/pdf/…...

十、JavaScript的应用的习题

题目一 在网页中显示一个工作中的 “ 数字时钟 ”&#xff0c;如图所示 运行效果 代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>动态时钟</title><style>.all{width: 660px;height: 350px;margin: 60p…...

【Spring】AOP

AOP&#xff08;Aspect Oriented Programming&#xff0c;面向切面编程&#xff09;是一种编程范式&#xff0c;用来帮助开发者更好地组织程序结构。它的主要作用是为现有功能添加增强&#xff0c;而不需要修改原始代码。这与 Spring 框架提倡的“无侵入式编程”相符&#xff0…...

三维地图,智慧城市,商业智能BI,数据可视化大屏(Cesiumjs/UE)

绘图工具 三维地图&#xff1a;Cesiumjs 建模方式&#xff1a;激光点云建模、航拍倾斜摄影建模、GIS建模、BIM建模、手工建模 建模工具&#xff1a;C4D Blender GeoBuilding ArcGIS Cesiumjs <!DOCTYPE html> <html lang"en"> <head><meta …...

鸿蒙Next通过oss上传照片到阿里云

前言 最近在写纯血鸿蒙的APP&#xff0c;需要用到oss上传照片&#xff0c;之前的客户端 Android 和 IOS 都已经实现了&#xff0c;获取的阿里云签名的上传地址是服务端实现的&#xff0c;相信大部分公司都是这样的模式&#xff0c;服务端也是调用阿里云的SDK来实现的&#xff…...

小白爬虫——selenium入门超详细教程

目录 一、selenium简介 二、环境安装 2.1、安装Selenium 2.2、浏览器驱动安装 三、基本操作 3.1、对页面进行操作 3.1.1、初始化webdriver 3.1.2、打开网页 3.1.3、页面操作 3.1.4、页面数据提取 3.1.5、关闭页面 3.1.6、综合小案例 3.2、对页面元素进行操作 3.2.…...

nlp培训重点

1. SGD梯度下降公式 当梯度大于0时&#xff0c;变小&#xff0c;往左边找梯度接近0的值。 当梯度小于0时&#xff0c;减去一个负数会变大&#xff0c;往右边找梯度接近0的值&#xff0c;此时梯度从负数到0上升 2.Adam优化器实现原理 #coding:utf8import torch import torch.n…...

什么是多模态和模态

文章目录 前言一、定义1. 模态 (Modal)2. 非模态 (Non-modal) 二、GUI中1. 模态&#xff08;Modal&#xff09;对话框2. 非模态&#xff08;Modeless&#xff09;对话框 三、模态 vs 非模态 的对比四、何时使用模态和非模态对话框&#xff1f;五、Qt 中 exec() 与 show() 的区别…...

apache中的Worker 和 Prefork 之间的区别是什么?

文章目录 内存使用稳定性兼容性适用场景 Apache中的Worker和Prefork两种工作模式在内存使用、稳定性以及兼容性等方面存在区别 内存使用 Worker&#xff1a;由于使用线程&#xff0c;内存占用较少。Prefork&#xff1a;每个进程独立运行&#xff0c;内存消耗较大。 稳定性 W…...

系统监控——分布式链路追踪系统

摘要 本文深入探讨了分布式链路追踪系统的必要性与实施细节。随着软件架构的复杂化&#xff0c;传统的日志分析方法已不足以应对问题定位的需求。文章首先解释了链路追踪的基本概念&#xff0c;如Trace和Span&#xff0c;并讨论了其基本原理。接着&#xff0c;文章介绍了SkyWa…...

【Python]深入Python日志管理:从logging到分布式日志追踪的完整指南

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 日志是软件开发中的核心部分,尤其在分布式系统中,日志对于调试和问题定位至关重要。本篇文章将从Python标准库的logging模块出发,逐步探讨日志管理的最佳实践,涵盖日志配置、日志分层、日志格式化等基…...

DHCP Client的工作方式

【运作方式】 一开始Client没有IP资料 DHCPDISCOVER Client发出DHCPDISCOVER广播封包&#xff08;UDP port 67&#xff09;&#xff0c;寻找DHCP Server。 DHCPOFFER Client开始监听UDP port 68 &#xff08;任何&#xff09;DHCP Server收到DHCPDISCOVER封包后&#xff…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...