react 移动端视频、音频、pdf预览

react移动端视频、音频、pdf预览总结

一、音视频预览给大家推荐一个比较好用的react插件，xgplayer。
安装：npm install xgplayer
使用：

import Player from 'xgplayer'//实例化，注意这里只能实例化一次哦，如果多次，播放器会出现重叠。需要在元素挂载之后进行实例化。
let player = new Player({id: 'mse',url: '//abc.com/**/*.mp4'
});// 占位符
<div id="mse"></div>

url为视频播放路径，这就可以播放啦。官方文档提供了丰富的api以及支持自定义样式等等。这也是我找了很多插件尝试，这个是功能相当齐全的了。
xgplayer官方文档
例子都写的很清楚，我就不复述啦。他们还有对应的音频播放器xgplayer-music。相关文档都在上面的链接里哦。
我使用的时候遇到了小问题，因为使用的是TS，安装插件之后报错：
解决方法：1、根据提示将插件安装到@types/下面
即：npm install @types/[moduleName]
moduleName指需要安装的插件名称哦。
但是这种方式大多数时候不行，安装不成功。暂时不知道为什么。
2、根据提示，在项目根目录src下面新建declaration.d.ts文件，然后在declaration.d.ts文件里写：declare module [moduleName]，这样就可以正常使用啦。

pdf预览：
我也尝试了很多插件react-pdf，react-pdf.js、React-read-pdf等等。尝试了很多，但是都不是很符合预期，因为我使用的是ionic框架写的app应用。目前比较正常预览的是react-pdf。安装方法都一样的，npm install react-pdf or yarn add react-pdf.
react-pdf文档
使用：

import { Document, Page, pdfjs } from 'react-pdf'
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;//numPages 是pdf文件的总页数，加载完成时触发函数。function onDocumentLoadSuccess(numPages: any) {setNumPages(numPages)}<DocumentclassName={pdfClassName}file={pdfUrl}loading={<div>加载中，请稍等...</div>}onLoadSuccess={onDocumentLoadSuccess}error={'转码未完成，无法预览！'}><Page pageNumber={pageNumber} /></Document>

react 移动端视频、音频、pdf预览相关推荐

React 移动端项目之pdf预览
因为项目需要,需要在在项目中实现pdf文件遇见功能,众所周知,安卓老大哥貌似不怎么支持,所以采用的react-pdf插件实现方式,实现方式很简单: 一:引入react-pdf包: yarn add r ...
pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。
pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件. 注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决. svg模式渲染存在缺陷,只能渲染普通pd ...
c#中实现Word、Excel、Pdf预览及音频和视频播放
如果你做的系统和OA有关的,那肯定需要一个功能,就是附件预览.附件可能是text文本文件.image图片文件.Office文件.音频或视频文件等等.如果都能在程序里预览,绝对是系统的一个亮点.今天就来 ...
实现Vue移动端的PDF预览
最近做到一个功能,PDF预览:这个功能看着蛮简单的,结果搞了两个下午,真是欲哭无泪.记录一下所查到的预览方法. 我在网上找了蛮多教程的,大致都是以下几个方法实现预览: 使用 iframe 标签使用 ...
Vue实现word、pdf、视频文件的预览
1.Vue2.0 (1)预览word 首先需要安装mammoth.1.5.1,预览原理其实就是使用xhr下载word文件,然后使用mammoth将字符流转换为html用于预览 npm install ...
react pdf预览
pdf预览很强大的插件是pdf.js,这是原生js实现的插件,能兼容大部分浏览器,对于它的使用方法,在传统的web项目中就是viewer.html?file="文件名称",但是对于 ...
PDF 预览和下载你是怎么实现的？
在开发过程中要求对 PDF 类型的发票提供预览和下载功能,**PDF** 类型文件的来源又包括 H5 移动端和 **PC 端**,而针对这两个不同端的处理会有些许不同,下文会有所提及. 针对 ...
直播视频跨浏览器预览方案（ffmpeg+VideoJS+H5）
直播视频跨浏览器预览方案(ffmpeg+VideoJS+H5)附源码 1.概述 2.前言 3.思路 4.详解 4.1.ffmpeg 4.1.1.配置方法 4.1.2.验证方法 4.1.3.启动方法 4 ...
Vue前端JavaScript实现PDF预览与图片预览
Vue前端JavaScript实现PDF预览与图片预览说明 PDF.JS 代码实现预览测试 embed与iframe标签 `<embed>` `<iframe>` 浏览器预 ...
vue移动端实现excel在线预览
上篇博客我提到了ios手机不能实现下载功能,但是可以实现预览,图片预览和pdf预览我已经在前篇博客做了讲解,但是,在工作中大家上传最多的应该是excel的文件,今天我就讲解一下excel移动端的预览实 ...

react 移动端视频、音频、pdf预览

react移动端视频、音频、pdf预览总结

react 移动端视频、音频、pdf预览相关推荐

最新文章

热门文章