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)


相关推荐

  • linux查看端口状态相关命令

    linux查看端口状态相关命令

  • 数据库索引的作用和长处缺点

    数据库索引的作用和长处缺点

    2021年11月29日
  • 如何写软件项目技术标

    如何写软件项目技术标技术标作为一个初期评价软件供应商的重要标准之一,需要覆盖多方面的考虑因素,从需求的理解,到系统的设计,到项目的实施与管理,以及项目的验收与后期支持。那么我们如何来编写一个完整的技术标呢?第一,项目概述   项目情况的一个综合介绍,这是一个综述,通过这个综述说明项目的背景

  • swoole是如何实现任务定时自动化调度的?

    swoole是如何实现任务定时自动化调度的?

    2021年10月31日
  • 国内能用的国际邮箱推荐哪个?公司邮箱号码大全「建议收藏」

    国内能用的国际邮箱推荐哪个?公司邮箱号码大全「建议收藏」在网上看到大家一直在讨论国际邮箱哪个好用,TOM、163、gmail等,在国内用哪个邮箱呢?外贸公司需要跟客户沟通合同信息、物流货代公司需实时沟通货柜清关进展、电商公司采购出口需跟国外办事处或客户沟通、软件信息公司老板是老外,也必须用国际邮箱,这些使用邮箱的人90%都会在国内用邮箱,所以在国内能的国际邮箱是刚需。国内能用的国际邮箱推荐常用个人邮箱,但进了公司用企业邮箱才发现真的不一样。TOM企业邮箱是我在大学里看到老师用过的,现在公司分配了一个给我,之前的个人邮箱Facebook验证码都收不到,公司的这

  • .NET-OOP:.文件读写与XML

    .NET-OOP:.文件读写与XML
            文件读写分五个步骤:
    1.        //创建文件流
    FileStreammyFs=newFileStream(path,FileMode.CreateNew);
    2.         //创建写(读)入器
    StreamWritermySw=newStreamWriter(myFs);
    StreamReadermySf=newStreamReader(mtFs);
    3.       

发表回复

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

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