1、复制依赖文件

1.1 示例通过 webpack 插件自动复制依赖

copy node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf 到 www 根目录

copy node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml 到 www 根目录

copy node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js 到 www 根目录

以上 copy 操作可以借助 webpack 插件完成

安装 copy-webpack-plugin 插件, npm install copy-webpack-plugin@4.6.0

1.1.1、编辑你的 webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');......// copy js lib and swf files to dist dirnew CopyWebpackPlugin([{ from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},{ from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'},{ from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'}]),
......

1.1.2、若使用 vue-cli, 编辑你的 vue.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');module.exports = {configureWebpack: {plugins: [new CopyWebpackPlugin([{ from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},{ from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'}{ from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'},])]}}

2、 html模板中引入依赖js

在 html 中引用 www 根目录 liveplayer-lib.min.js

<!DOCTYPE HTML>
<html><head><title>template</title>......<script src="js/liveplayer-lib.min.js"></script><!-- 如果正在使用 vue-cli:<script src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script>--></head><body>......</body>
</html>

3、编辑你的 Vue 组件

......import LivePlayer from '@liveqing/liveplayer'......components: {LivePlayer}
......<LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer>

4、H5直播点播播放器

vue-cli 集成 LivePlayer H5 播放器 Github 示例
下载集成入口
使用说明

如何在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器相关推荐

vue 打开html流_在vue项目中添加一个html页面，开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
如何在vue项目中使用Highmaps(vue+Highmaps)
如何在vue项目中使用Highmaps 功能需求思路分析实现第一步:引入第二步:介绍一下这个world是个啥. 第三步:调用注意点(十分重要) 写在最后功能需求近日我接到了这么一个需求 ...
如何在vue项目中系统的使用iconfont字体图标
如何在vue项目中系统的使用iconfont字体图标前言 iconfont的特色官网注册在项目中使用的方式前言今天聊一下前端iconfont的使用方式,前端的图标经过这些年的发展,变得更系统 ...
如何在vue项目中修改less变量，多主题项目解决方案
如何在vue项目中修改less变量,多主题项目解决方案参考文章: (1)如何在vue项目中修改less变量,多主题项目解决方案 (2)https://www.cnblogs.com/niubilit ...
如何在vue项目中设置首页
如何在vue项目中设置首页 1.首先创建一个vue为后缀名的文件,最好在新建的文件夹下面创建,如下图所示: 说明:一般我们的主要页面代码都是写在vue 项目中的这个src文件夹下,项目中所会引用到的组 ...
iMovie教程：如何在iMovie项目中添加照片？
在 Mac 自带的 iMovie 里,你可以导入照片和静态图,充分利用你的图片库存,可以制作出动感大片的感觉,那么如何在iMovie项目中添加照片?具体教程如下: 1.打开iMove软件,点击添加按钮 ...
如何在vue项目中使用lodop打印插件
如何在vue项目中使用lodop打印插件 - 简书先写了个webdemo <%--Created by IntelliJ IDEA.User: AdministratorDate: 2018/ ...
vux 显示 html,如何在vue项目中使用vux
编者:只需6步,教你如何在vue项目中使用vux, 1.在项目里安装vuxnpm install vux --save2.安装vux-loader (这个vux文档中没有明文跟你说要安装的啦) np ...
在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」页面「创建新应用 ...

如何在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器

在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器

1、复制依赖文件

1.1 示例通过 webpack 插件自动复制依赖

1.1.1、编辑你的 webpack.config.js

1.1.2、若使用 vue-cli, 编辑你的 vue.config.js

2、 html模板中引入依赖js

3、编辑你的 Vue 组件

4、H5直播点播播放器

如何在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器相关推荐

最新文章

热门文章

如何在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器

在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器

1、复制依赖文件

1.1 示例 通过 webpack 插件自动复制依赖

1.1.1、编辑你的 webpack.config.js

1.1.2、若使用 vue-cli, 编辑你的 vue.config.js

2、 html模板中引入依赖js

3、编辑你的 Vue 组件

4、H5直播点播播放器

如何在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器相关推荐

最新文章

热门文章

1.1 示例通过 webpack 插件自动复制依赖