H5 video player (livePlayer.js)

1. Official website

LivePlayer H5播放器 | 青柿视频流媒体服务解决方案青柿流媒体服务解决方案包含：LiveQing RTMP直播点播流媒体服务，LiveGBS国标GB28181无插件流媒体服务，LiveNVR安防Onvif/RTSP监控流媒体；国网B接口服务 电网B接口；支持本地、内网、私有云部署；为企业视频能力建设，提供了视频点播转码、手机直播推流、云端录像存储计划、RTMP拉流推流服务、RTSP拉流推流服务、设备GB28181接入、Onvif云台控制等等能力，同时提供性能强大稳定的WebRTC/RTMP/HLS/RTSP/HTTP-FLV分发，支持H5页面无插件直播，强大的后台管理，详细的二次开发接口文档，服务搭建简单解压后一键启动，支持Windows和Linux环境部署https://www.liveqing.com/docs/manuals/LivePlayer.html

2. Install and use (Install)

1. Installation: npm install @liveqing/liveplayer

2. Edit webpack.xxx.config.js

​
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. Introduce dependency js

Introduce in index.html:

  <script src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script>

4. use

......

import LivePlayer from '@liveqing/liveplayer'

......
  components: {
    LivePlayer
  }
......

<LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer>