H5视频播放器（livePlayer.js）

1.官网

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)

一、安装：npm install @liveqing/liveplayer

二、编辑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.引入依赖js

在index.html中引入：

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

4.使用

......

import LivePlayer from '@liveqing/liveplayer'

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

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