vue中使用EasyPlayer.js教程

云帆Plan

已于 2025-04-30 16:38:35 修改

阅读量1.7w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # Vue 文章标签： vue

于 2021-05-27 11:53:22 首次发布

本文链接：https://blog.csdn.net/a843334549/article/details/117323709

Vue 专栏收录该内容

11 篇文章

订阅专栏

前言

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查看官方文档

后语

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