前端web页面通过VUE集成H5直播点播播放器LivePlayer
Posted Kim的博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端web页面通过VUE集成H5直播点播播放器LivePlayer相关的知识，希望对你有一定的参考价值。
基于VUE和webpck的前端工程
这里可以参考 https://github.com/livegbs/GB28181-Server
1、安装@liveqing/liveplayer
npm -i @liveqing/liveplayer --save-dev2、webpack.config.js 添加配置
这里是配置webpack自动copy，当然也可以手动复制到待发布的web目录，如www
....
const CopyWebpackPlugin = require('copy-webpack-plugin');
....
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/'}
]),
...
]3、配置template.html
<!DOCTYPE HTML>
<html>
<head>
.....
<!--这里的路径是上一步copy，相对于www目录的相对路径，最终目的让浏览器可以访问到这个js-->
<script src="js/liveplayer-lib.min.js"></script>
</head>
<bodyr>
.....
</body>
</html>4、.vue中使用liveplayer
4.1、 import 引入
import LivePlayer from "@liveqing/liveplayer";4.2、 components 中添加
components: {
LivePlayer
}4.3 页面中添加组件
<div>
....
<LivePlayer :videoUrl="url" live muted stretch></LivePlayer>
....
</div>4.4 url设置
this.url = 播放的视频地址以上是关于前端web页面通过VUE集成H5直播点播播放器LivePlayer的主要内容，如果未能解决你的问题，请参考以下文章
支持H.265网页播放的H5播放器EasyPlayer.js发布了
集RTMPHLSFLV,WebSocket 于一身的网页直播/点播播放器方案EasyPlayer.js视频播放界面快照和拉伸按钮显示多个的处理流程