React 项目中如何使用 easyPlayer-pro.js

于 2024-08-02 21:04:34 发布
阅读量303 收藏 8
点赞数 7
分类专栏： React + Antd 文章标签： javascript react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42728767/article/details/140874262
版权

目录

背景

项目中要使用 easyplayer-pro.js 播放视频，查了下资料，网上基本都是 在 Vue 项目中的使用，很少有在 React 项目中使用，即使找到一篇在 React 项目中使用的记录，那也是牛头不对马嘴，前面写的是 React ，后面就是 Vue 的写法，这不扯淡嘛。

所以在经过一番努力学习验证后，写上一篇日记来记录一下，便于自己也方便大家。

EasyPlayer.js H5播放器简单介绍

不愿意看这部分的可以跳过，直接从 【下载 EasyPlayer.js】 查看。

EasyPlayer.js 简介

EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）、WS、WEBRTC、FMP4视频直播与视频点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持MSE、WASM、WebCodec等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器，使用简单, 功能强大。

EasyPlayer.js 功能说明：

  • 支持 MSE H264和H265硬解码;
  • 支持 WebCodec H264和H265硬解码;
  • 支持 WASM H264和H265硬解码/软解码;
  • 支持 m3u8/HLS (H265/H265)播放;
  • 支持 Mpeg4格式(H264)播放;
  • 支持 HTTP-FLV/WS-FLV (H265/H265)播放;
  • 支持 HTTP-FMP4/WS-FMP4 (H265/H265)播放;
  • <支持 WEBRTC(easy支持H264/H265、其他流媒体支持H264)播放;
  • 支持 裸流(H264/H265) 播放;
  • 支持 直播和点播播放;
  • 支持 点播多清晰度播放;
  • 支持 全屏或比例显示;
  • 支持 电子放大;
  • 支持 水印(动态水印、幽灵水印);
  • 支持 显示上一个视频最后一帧;
  • 支持 播放器快照截图;
  • 支持 视频录制(WebM格式(音频+视频)、Mp4格式(视频),Flv格式(音频+视频));
  • 支持 超时、断网重连、异常暂停播放等

额外介绍：这个仅支持 Vue 和 普通引入使用。

配置属性

参数说明类型默认值
container播放器容器--
decoderwasm解码地址String-
isResize是否拉伸Booleantrue
loadingText加载显示的文字String加载中
videoBuffer加载显设置最小缓冲时长，单位秒，播放器会自动消除延迟。示的文字Number1
hasAudio是否解析音频Booleantrue
useMSEMSE模式Booleanfasle
useWCSWCS模式Booleanfasle
useSIMD强制使用wasm模式Booleanfalse
background视频封面图片String-
qualityConfig配置清晰Array[‘普清’, ‘高清’, ‘超清’, ‘4K’, ‘8K’]
defaultStreamQuality默认显示的清晰度，如果不设置，会显示第一个清晰度String-
isNotMute是否渲染音频Booleanfalse
recordType视频录制默认mp4格式Stringmp4,flv
playbackForwardMaxRateDecodeIFrame录像倍数Number-
debug控制台日志打印Boolean false
debugLevel打印日志级别默认warnStringdebug,warn

事件回调

事件名说明
play播放事件
pause暂时事件
videoInfo视频信息
audioInfo音频信息
mute音频
error播放异常
kBps当前网速， 单位KB 每秒1次,
recordEnd录制结束的事件
recordStart录制开始的事件
fullscreen当前是否全屏
streamQualityChange清晰度回调
playbackSeek录像时间轴跳转回调
playbackPreRateChange录像倍数的回调
currentPts监听当前渲染帧的时间戳（流里面的）

方法

方法名说明参数
play播放‘url’
playback播放录像
pause暂停播放
isPause返回是否暂停中状态
setBufferTime设置最大缓冲时长 1
setVolume设置音量
getVolume获取音量
exitFullscreen退出全屏
mute静音
cancelMute取消静音
isMute返回是否静音
screenshot获取快照
setFullscreen全屏(取消全屏)播放视频
setStreamQuality设置分辨率必须是qualityConfig里面的数据
forward设置录像倍数
setPlaybackStartTime设置录像跳转时间/s
getVideoInfo获取视频信息
getAudioInfo获取音频信息
destroy关闭视频，释放底层资源

在这里插入图片描述

下载 EasyPlayer.js

按照下面的地址去下载下来，简单。

EasyPlayer.js 访问地址

引入使用

  1. 将下载的文件拷贝到 React 项目的 public 目录下

    注意：不能拷贝到其他文件，只能在这里，有兴趣的同学也可以尝试一下其他地址

    在这里插入图片描述

  2. 然后在 index.html 文件中引入 easyplayer-pro.js

    <!DOCTYPE html>
<html lang="en">
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
		<title>你的爱豆</title>
	</head>

	<body>
	
		<!-- easyplayer-pro.js 文件 -->
		<script type="text/javascript" src="./js/easyplayer-pro.js"></script>
		
		<!-- react 挂载根节点 -->
		<div id="root"></div>
	
	</body>
	
	<script>
		// 将 EasyPlayerPro 挂载到 window 上，便于全局使用
		window.EasyPlayerPro = EasyPlayerPro;
	</script>
</html>

  3. 将下载的文件再次拷贝一份到需要使用的组件下

    在这里插入图片描述

  4. 创建视频播放组件，并在组件中添加播放内容

import React, { useEffect, useImperativeHandle, useRef } from "react";
import { Button, Icon, Modal } from "antd";
import { useState } from "react";

// 根据自己的需要定义样式
import './index.less';

// 调用接口
import { getVideoManagerPlay } from "server/video.api";

const _myWindow:any = window;

const EasyPlayerVideoDialog = ({onRef}:any) => {

    const easyPlayerRef:any = useRef(null);

    const [open, setOpen] = useState<boolean>(false);
    const [videoUrl, setVideoUrl] = useState<string>('');
    

    useImperativeHandle(onRef, () => ({
        showModal: (record:any) => {
            
            const {deviceId} = record;
            getVideoUrlFn(deviceId);
            
            setOpen(true);
        }
    }));


    // 获取播放视频地址
    const getVideoUrlFn = async (deviceId:string|undefined) => {
        if (!deviceId) return;
        
        try {
            const params = {
                deviceId,
            };
            const res = await getVideoManagerPlay(params);
            const {code, data}:any = res;
            if (code === 200 && data && typeof data === 'string' && data.length > 0) {
                setVideoUrl(data);
            } else {
                setVideoUrl(''); 
            }
            
        } catch (error) {
            setVideoUrl('');
        }
    };


    useEffect(() => {
        if (!videoUrl) return;
        playCreate();
    }, [videoUrl])


    const playCreate = () => {

        const EasyPlayerPro = _myWindow?.['EasyPlayerPro'];

        if (EasyPlayerPro) {

			// 可以根据自己的需要自行配置
            const easyplayer = new EasyPlayerPro({
                container: document.getElementById('player_box1'),
				
				// 这里需要注意，根据自己打包需求设定
                decoder: process.env.NODE_ENV === 'development' ? './js/decoder-pro.js' : './static/js/easyPlayerPro/decoder-pro.js',  // wasm解码地址
                videoBuffer: 2, // 加载显设置最小缓冲时长，单位秒，播放器会自动消除延迟。
                isResize: false, // 是否拉伸
                text: "",
                loadingText: "加载中",
                // debug: true,
                // debugLevel: 'debug',
                useMSE: true, // MSE模式
                useWCS: true, // WCS模式
                isMulti: true,
                useSIMD: false, // 强制使用wasm模式
                hasAudio: true, // 是否解析音频
                showBandwidth: false, // 显示网速
                showPerformance: false,
                operateBtns: {
                    fullscreen: true,
                    screenshot: true,
                    play: true,
                    audio: true,
                    record: true,
                    quality: true,
                    performance: true,
                },
                watermarkConfig: {
                text: {
                    content: ''
                },
                right: 10,
                top: 10
                },
                playbackForwardMaxRateDecodeIFrame: 1,
                isWebrtcForOthers:true,
                demuxUseWorker: true,
                supportHls265:true,
            });

			// 一些监听事件
            easyplayer.on("fullscreen", function (flag:any) {
                console.log('is fullscreen', flag)
            })

            easyplayer.on('playbackPreRateChange', (rate:any) => {
                easyplayer.forward(rate);
            })

            easyplayer.on('playbackSeek', (data:any) => {
                easyplayer.setPlaybackStartTime(data.ts);
            })

            if (easyPlayerRef.current) easyPlayerRef.current = null;
            easyPlayerRef.current = easyplayer;

            // 开启自动播放
            easyplayer.play(videoUrl);
        }
    }

	// 隐藏弹框重置数据
    const onCancelFn = () => {
        easyPlayerRef.current?.pause();
        easyPlayerRef.current?.destroy();
        easyPlayerRef.current = null;
        setVideoUrl('');
        setOpen(false);
    };

    return (
        <Modal
            className="easyPlayerModal"
            // title="视频监控"
            getContainer={false}
            visible={open}
            footer={null}
            width={1200}
            centered={true}
            maskClosable={true}
            onCancel={onCancelFn}
        >
            <div className="easy-player-wrp">
                <div className="easy-player-box" id="player_box1"/>
            </div>

        </Modal>
    )
};

export default EasyPlayerVideoDialog;

重写webpack

因为我项目中使用 customize-cra 插件，根据插件要求，在项目根目录创建 config-overrides.js 文件重写 webpack 配置。

点击此处可以查看 customize-cra 插件 的所有api及相关解释。

// 引入插件 customize-cra
const {
  override,
  fixBabelImports,
  addLessLoader,
  addWebpackPlugin,
  addWebpackAlias,
  disableEsLint,
  setWebpackOptimizationSplitChunks,
  useBabelRc,
  addBundleVisualizer,
  adjustWorkbox,
  overrideDevServer,
} = require('customize-cra');

// 引入css分离插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 下载拷贝文件插件
const CopyWebpackPlugin = require('copy-webpack-plugin');


// 输出文件配置
const appBuildOutput = () => (config) => {
	// 可以根据环境自定义配置输出文件
	
	switch(process.env.NODE_ENV){
		case 'development':
			break;
		case 'product':
			// 关闭sourceMap
		    config.devtool = false;
			
			// 更改生产模式输出的文件名
		    // main.js 不带hash
		    // 按需引入的文件带有hash
		    config.output = {
		      ...config.output,
		      path: paths.appBuild,
		      filename: 'static/js/[name].js',
		      chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
		    };
		    
		    config.optimization.runtimeChunk = false;

			// 针对 css 拆包
		    config.plugins.forEach((item, index, self) => {
		      if (item instanceof MiniCssExtractPlugin) {
		        self[index] = new MiniCssExtractPlugin({
		          filename: 'static/css/[name].css',
		          chunkFilename: 'static/css/[name].[contenthash:4].chunk.css',
		          ignoreOrder: true,
		        });
		      }
		    });

			// 拷贝 easyPlayer-pro.js到指定目录
			config.plugins.push(
		      new CopyWebpackPlugin(
		        [
		          {
		            from: 'public/js/*.js', // 指定public目录下js文件夹中的所有.js文件
		            to: 'static/js/easyPlayerPro/[name].[ext]', // 指定目标路径，[name]和[ext]是文件名和扩展名的占位符
		          },
		        ]
		      )
		    );
			break;
		// 其他...
	}
	
}


module.exports = {
  	webpack: override(
		// 其他配置...
		appBuildOutput(),
	),
	devServer: overrideDevServer((config) => {
		return {
			...config
			// 其他配置...
		}
	})
}

到这里就结束了吗，就能够正常运行了吗，不一定，请接着往下看。

在这里插入图片描述

问题处理

将打包好的文件放到线上测试环境部署，一运行就报如下错误，这是个啥呀，点击进去一看，都到人家的插件里面去了，那铁定不能去改啊，对吧，那就是我们自身的代码出了问题，继续排查排查。

在这里插入图片描述

经过不断地努力排除，最终定位到 easyPlayer-pro.js 解码视频还需要一个二进制的文件，这个文件没有拷贝进去，所以继续如下操作即可。

经过查找，缺失的这个二进制文件就是以 *.wasm 结尾的文件，问题找到了，那么只要将这个文件在打包的时候拷贝进去就好，所以继续修改我们的 config-overrides.js 文件。
在这里插入图片描述

// 其他...

// 拷贝 easyPlayer-pro.js到指定目录
config.plugins.push(
	new CopyWebpackPlugin(
		[
			// ********** 原来的 **********
			{
				from: 'public/js/*.js', // 指定public目录下js文件夹中的所有.js文件
				to: 'static/js/easyPlayerPro/[name].[ext]', // 指定目标路径，[name]和[ext]是文件名和扩展名的占位符
			},
			
			// ********** 重要 **********
			// 新增：一定要拷贝这里的 *.wasm 格式的文件，否则播放视频一定报错
			{
				from: 'public/js/*.wasm', // 指定public目录下js文件夹中的所有.wasm文件
				to: 'static/js/easyPlayerPro/[name].[ext]', // 指定目标路径，[name]和[ext]是文件名和扩展名的占位符
			}
		]
	)
);

// 其他...

证清白

在这里插入图片描述

因项目保密，就只展示这么一部分。

最后

关于在 React 项目中引用 EasyPlayer.js 到这里就结束了，希望能够对有需要的朋友一些帮助。

如果这篇文章对你还有点儿作用，麻烦点赞，搜藏，如果有哪里不对，可以评论，私信。

在这里插入图片描述

赵花花5070
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react项目配置less(配置config-overrides.js）
weixin_49684995的博客
10-13 1802
1、安装 yarn add react-app-rewired customize-cra 2、在根目录下创建config-overrides.js文件 3、安装 yarn add babel-plugin-import less less-loader 4、在config-overrides.js里配置 const {override,addLessLoader} = require('customize-cra') module.exports = override( addLessLo
react项目中使用react-particles-js实现粒子动态背景
努力是为了站在万人中央成为别人的光
08-16 2795
由于最近写了一个基于react+antd design react的一个后台管理系统，刚好要实现登录页面，但是无奈感觉页面设置背景色太单一，所以找到了 一个第三方库react-particle.js，本人还是觉得比较强大的.所以有需要的小伙伴们可以尝试使用，挺简单的。 要在react中使用，首先得先下载。 npm i react-particle --save 在页面Login.js使用 import React from 'react' import { Form, Input, Button } fr
react项目配置config-overrides.js
斗师——Ace
07-15 2534
const { override, fixBabelImports, addWebpackAlias, adjustStyleLoaders } = require('customize-cra'); const path = require("path"); module.exports = override( //按需加载antd fixBabelImports('import', { libraryName: 'antd', libraryDirectory.
react项目所需的js文件：prop-types.js，react.development.js，react-dom.development.js，
M_SSY的博客
02-24 2416
https://unpkg.com/prop-types@15.6.2/prop-types.js https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js https://unpkg.com/babel-standalone@6.26.0/babel.min.js
Failed to resolve: react-native-0.71.0-rc.0-debug
weixin_44132277的博客
11-07 5079
Failed to resolve: react-native-0.71.0-rc.0-debug
使用config-overrides.js修改react项目的大包路径的正确方式
tianbiancai1的博客
10-28 1244
react使用config-overrides修改打包目录
at Object.injectIntoGlobalHook (react-refresh-runtime.development.js:465)
null
09-02 1179
at Object.injectIntoGlobalHook (react-refresh-runtime.development.js:465)问题处理 解决方案： 您安装了 Chrome 扩展程序 [React Developer Tools]。 禁用它，然后重新运行项目。
react.development.js、React-dom.development.js、babel.min.js 下载
聪明不喝牛奶的博客
11-01 4139
在写这个博客之前好像也停更了半年之久，去实习鞭打了一波。现在回来继续开始学习新的知识。废话不多说，刚学react之前还是一样准备一个js配件很麻烦下这三个js包就给我碰壁了，全是要钱。所以没办法只能另辟蹊径了。
react.js、react-dom.js、browser.js文件包下载（github链接）
热门推荐
weixin_37861326的博客
08-30 1万+
React.js与React-dom.js版本号均为V0.14.7，链接：github:https://github.com/cirsyou/plugins/tree/master/react-packages 用法示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...
react配置config-overrides.js
菜菜鸟的博客
05-11 2190
下载依赖 cnpm i customize-cra react-app-rewired -S cnpm i less@3.11.1 less-loader@5 -S cnpm i babel-plugin-import -S 根目录下新建config-overrides.js文件 const {override,fixBabelImports,addLessLoader} =require('customize-cra'); module.exports = override( // 针对a
react.js、react-dom.js、babel.js文件包下载
02-22
首先，开发者会在源代码中使用React.js的JSX语法编写组件。然后，通过配置Babel，将包含JSX的源代码转换成普通的JavaScript。最后，使用react-dom.js将转换后的React组件渲染到网页上。 在开发环境中，我们通常会...
react下载,包括react.development.js;babel.min.js;react-dom.development.js
11-20
Babel允许我们在项目中使用最新最酷的语法，同时确保代码在各种浏览器中都能正常运行。 3. **react-dom.development.js**: 这个文件是React与浏览器DOM交互的桥梁。它提供了API来操作DOM，如渲染React组件到页面上...
react-highlight.js:Highlight.js库周围的简单React包装器
04-28
安装使用NPM安装react-highlight.js： npm install react-highlight.js --save 选择highlight.js主题，并确保它包含在索引文件中。 < link rel =' stylesheet ' href =' ...
使用umiJs框架搭建的react项目react-umi-master.zip
07-03
使用umiJs框架搭建的react项目react-umi-master.zip
react下的react.min.js和react-dom.js
04-24
React是Facebook开发的一个用于构建用户界面的JavaScript库，尤其适合构建单页应用（SPA）。...在实际项目中，还可以结合其他库如Redux进行状态管理，或者使用React Router进行路由控制，以实现更复杂的功能。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 861
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 268
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 199
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
RN高级interview
最新发布
流星雨的博客
07-31 409
RN高级interview
react.js、react-dom.js、babel.js
04-30
React.js是一个由Facebook开发维护的JavaScript库，用于构建用户界面。它采用组件化的开发方式，将UI拆分成小的、独立的部分，并且可以嵌套和组合成复杂的UI结构。React.js通过高效的DOM更新和虚拟DOM的使用，实现了快速的渲染和优异的性能。 React-dom.js是React.js库的其中一个组件，主要用于将React组件渲染到具体的DOM元素上。在React中，组件本身只是一些JavaScript对象，它们需要由ReactDOM来解析并渲染成实际的DOM元素。ReactDOM还提供了一些API，例如ReactDOM.render()，可以将组件渲染到指定的DOM节点上。 Babel.js是一个JavaScript编译器，可以将ES6+的JavaScript代码转换为浏览器可以执行的ES5代码。在React开发中，通常会使用类似于JSX这样的语法，它并不是标准的JavaScript语法，因此需要使用Babel将其转换成浏览器能够识别的语法。除了转换语法外，Babel还可以进行代码压缩、内联样式和静态类型检查等工作，可以大大提升React应用的性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值