通过EasyPlayer在浏览器中实现H.264视频流播放

Vue项目实战：通过EasyPlayer在浏览器中实现H.264视频流播放

目的

在浏览器中展示并播放第三方的 HLS 视频流，以下步骤详细介绍了如何使用 EasyPlayer 来实现此功能，并提供了优化和规范化集成的指南。

1.安装必要的包

为了集成 EasyPlayer 到您的项目中，首先需要安装两个包：

 npm install @easydarwin/easyplayer --save
 npm install copy-webpack-plugin@5.1.2 --save-dev

• @easydarwin/easyplayer: 这个包包含 EasyPlayer 组件，用于在 Vue 应用中播放视频。
• copy-webpack-plugin: 用于将特定文件复制到设定的路径，以确保 EasyPlayer 的依赖可以在构建后的项目中正确访问。

下面是官方文档的解释

• Vue 集成调用(添加在vue.config.js文件 对应第二步)

copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf 到 静态文件 根目录

copy node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml 到 静态文件 根目录

copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js 到 静态文件 根目录

注意： 没有调用会出现无法加载对应插件的报错

在 html 中引用 dist/component/EasyPlayer-lib.min.js（引入js文件 对应第三步）

###H.265 copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.wasm 到 静态文件 根目录

2.Vue 配置 (vue.config.js)

接下来，在项目的 vue.config.js 文件中进行如下配置，以确保 EasyPlayer 组件的依赖被正确复制到静态资源目录中：

const CopyWebpackPlugin