vue中使用EasyPlayer.js教程[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

0 前言

github: EasyPlayer.js
~~一定要是legacy分支哦，master分支是EasyWasmPlayer.js，有些功能不支持的~~ （2022-03-26：作者已调整仓库结构，只保留了master）

1 教程

首先npm安装EasyPlayer、copy-webpack-plugin ps：copy-webpack-plugin版本一定一定一定不能大于6.0，否则会出很多很多问题，具体原因可以去看这个插件的更新记录，或者百度

代码语言：javascript复制

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

copy三个文件到静态目录下，这里通过copy-webpack-plugin插件来完成这个工作，vue.config.js中配置插件copy-webpack-plugin，这里的to根目录是静态目录（build时就是dist文件夹，./libs/EasyPlayer/就是dist/libs/EasyPlayer/) ps: 修改了vue.config.js，记得重新运行npm run dev哦，否则不生效的

代码语言：javascript复制

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

代码语言：javascript复制

<!DOCTYPE html>
<html>
  <head>
    ...
    <script src="./libs/EasyPlayer/EasyPlayer-lib.min.js"></script>
    ...
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

使用组件

代码语言：javascript复制

...
<easy-player :video-url="..."></easy-player>
...

import EasyPlayer from '@easydarwin/easyplayer'

...
components: { 
   
  EasyPlayer
}
...

相关属性和方法请去github查看官方文档

后语

可以看看LivePlayer.js教程，这个插件给我的第一印象就是跟EasyPlayer.js太像了？然而EasyPlayer.js并没有开源啊
参考文章： EasyPlayer.js 在VUE中使用

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/149882.html原文链接：https://javaforall.cn

webpack javascript 打包 https npm

0 人点赞