0
点赞
收藏
分享

微信扫一扫

如何在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直播点播播放器​​

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 dir
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/'}
]),
......

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 示例​​​​下载集成入口​​​​使用说明​​


举报

相关推荐

0 条评论