【无标题】

最新推荐文章于 2024-07-19 15:07:45 发布

ting_cute

最新推荐文章于 2024-07-19 15:07:45 发布

阅读量2.7k

点赞数 1

分类专栏：使用视频插件遇到的问题文章标签： vue.js javascript npm

本文链接：https://blog.csdn.net/ting_cute/article/details/121757702

版权

使用视频插件遇到的问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue使用EasyPlayer.js视频播放插件遇到的问题

在使用插件的时候总会出现以下的报错问题 Uncaught ReferenceError: videojs is not defined

1.第一步：首先需要安装插件，用npm安装EasyPlayer、copy-webpack-plugin
注意：copy-webpack-plugin版本一定不能大于6.0，不然会出现很多问题，具体原因可以去看这个插件的更新记录。

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

EasyPlayer.js可以根据需求装不同的版本，例如 npm install @easydarwin/easyplayer@3.3.8 --save，因为安装泰信可能会因为版本不兼容报错
2.安装成功后开始引入文件和配置环境变量

webpack.dev.conf.js

## 引入
const CopyWebpackPlugin = require('copy-webpack-plugin')

在 module  plugins 配置 上述
    new CopyWebpackPlugin([

     { from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},
     { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'},
     { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'},
     {from :'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf'},
     {from :'node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml'},
     {from :'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js'},
     {
       from: path.resolve(__dirname, '../static'),
       to: config.dev.assetsSubDirectory,
       ignore: ['.*']
     },
    ])

如果没有 webpack.dev.conf.js，可以在vue.config.js中配置插件copy-webpack-plugin，这里的to根目录是静态目录（build时就是dist文件夹，./libs/EasyPlayer/就是dist/libs/EasyPlayer/)
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/dist/component/crossdomain.xml',
            to: './libs/EasyPlayer/'
          },
          {
            from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js',
            to: './libs/EasyPlayer/'
          }
        ])
  ]
}

public/index.html中引入EasyPlayer-lib.min.js，文件位置取决于你怎么配置copy-webpack-plugin，我配置的to是./libs/EasyPlayer/，那么就引用./libs/EasyPlayer/EasyPlayer-lib.min.js
如果有static文件，引入EasyPlayer文件，如果没有放在public里面
在这里插入图片描述