EasyPlayer.js在vue项目中的使用

最新推荐文章于 2025-04-21 14:24:46 发布

带大星

最新推荐文章于 2025-04-21 14:24:46 发布

阅读量9.1k

点赞数 2

文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_50515020/article/details/123731544

版权

本文介绍了如何在Vue项目中使用EasyPlayer.js，一个支持HTTP、RTMP、HTTP-FLV、HLS等协议的H5播放器。首先通过npm安装copy-webpack-plugin，然后在vue.config.js和public/index.html中配置，注意引用EasyPlayer-lib.min.js和EasyPlayer.wasm文件。由于EasyPlayer.js基于video.js，因此还需要安装video.js。最后在Vue组件中引入并使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在整视频监控的东西，要用H.265的编码，因为是第一次所以记录一下

使用的是EasyPlayer.js，它功能很强大，集播放http-flv, hls, websocket 于一身的H5视频直播/视频点播播放器

怎么在vue项目中使用呢？

首先第一步

npm install @easydarwin/easyplayer --save

按常规到这步然后全局引用就可以了，但是EasyPlayer.js还需要配置一些文件才能使用

需要再下个依赖，不要大于6.0版本的，不然会有bug

npm install copy-webpack-plugin@5.1.2 --save-dev

然后在vue.config.js配置一下代码

const CopyWebpackPlugin = require('copy-webpack-plugin')
configureWebpack: {
  plugins:[
        new CopyWebpackPlugin([
          {
            from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf',
            to: './libs/EasyPlayer/'
          },
          {
            from: 'node_modules/@easydarwin/easyplayer/d