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

vue中使用EasyPlayer.js教程[通俗易懂]0前言github:EasyPlayer.js一定要是legacy分支哦,master分支是EasyWasmPlayer.js,有些功能不支持的1教程首先npm安装EasyPlayer、copy-webpack-pluginps:copy-webpack-plugin版本不能大于6.0,否则会出很多很多问题npminstall@easydarwin/easyplayer–savenpminstallcopy-webpack-plugin@5.1.2–save

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

0 前言

  • github: EasyPlayer.js
  • 一定要是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查看官方文档

后语

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/149882.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 美国城市地名简称_外国地名英文

    美国城市地名简称_外国地名英文近期在做某个项目要用到美国的地名,上网查了一圈都没有比較具体的、专业的,仅仅好自己复制了一个大概有500多个城市、城镇的英文,用谷歌翻译一下,结果例如以下:谷歌翻译结果,非常多是错误的,边用边改美国地

  • 2021版idea激活码99年【2021.8最新】

    (2021版idea激活码99年)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~S…

  • 记忆化搜索简介「建议收藏」

    记忆化搜索简介「建议收藏」记忆化搜索:算法上依然是搜索的流程,但是搜索到的一些解用动态规划的那种思想和模式作一些保存。一般说来,动态规划总要遍历所有的状态,而搜索可以排除一些无效状态。更重要的是搜索还可以剪枝,可能剪去大量不必要的状态,因此在空间开销上往往比动态规划要低很多。记忆化算法在求解的时候还是按着自顶向下的顺序,但是每求解一个状态,就将它的解保存下来,以后再次遇到这个状态的时候,就不必重新求解了。

  • Java中violate关键字详解(2)?真正了解violate

    Java中violate关键字详解(2)?真正了解violate一、Java内存模型想要理解volatile为什么能确保可见性,就要先理解Java中的内存模型是什么样的。Java内存模型规定了所有的变量都存储在主内存中。每条线程中还有自己的工作内存,线程的工作内存中保存了被该线程所使用到的变量(这些变量是从主内存中拷贝而来)。线程对变量的所有操作(读取,赋值)都必须在工作内存中进行。不同线程之间也无法直接访问对方工作内存中的变量,线程间变量值的传递均需要通过主内

  • linux添加防火墙规则_linux如何查看防火墙状态

    linux添加防火墙规则_linux如何查看防火墙状态linux防火墙对于我们来说是非常重要的!那么我们要怎么样去配置呢?下面由学习啦小编给你做出详细的linux防火墙配置方法介绍!希望对你有帮助!linux防火墙配置方法一:1./sbin/iptables-AINPUT-ptcp–dport80-jACCEPT2./sbin/iptables-AINPUT-ptcp–dport25-jACCEPT3.ech…

  • spring mvc 控制器方法传递一些经验对象的数组

    spring mvc 控制器方法传递一些经验对象的数组

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号