前言

  • github: EasyPlayer.js
  • 仅支持vue2.x，作者未兼容3.x
  • 一定要是legacy分支哦，master分支是EasyWasmPlayer.js，有些功能不支持的 （2022-03-26：作者已调整仓库结构，只保留了master）
    在这里插入图片描述

1 教程

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

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
<!DOCTYPE html>
<html>
  <head>
    ...
    <script src="./libs/EasyPlayer/EasyPlayer-lib.min.js"></script>
    ...
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
  • 使用组件
...
<easy-player :video-url="..."></easy-player>
...

import EasyPlayer from '@easydarwin/easyplayer'

...
components: {
  EasyPlayer
}
...
  • 相关属性和方法请去github查看官方文档

后语

Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届开放原子大赛open-eBackup/Cantian两大赛项火热开启

第二届开放原子大赛open-eBackup/Cantian两大赛项火热开启

avatar 开放原子开发者工作坊

人民邮电报：“开源”到底是什么？为啥热度越来越高？

人民邮电报：“开源”到底是什么？为啥热度越来越高？

avatar 开放原子开发者工作坊

第二届开放原子大赛——vivo蓝河操作系统创新赛火热进行中

第二届开放原子大赛——vivo蓝河操作系统创新赛火热进行中

avatar 开放原子开发者工作坊