flv-live-replay

flv-live-replay

视频播放vue组件

安装

npm i --save iot-video-component --registry=http://npm.yummy.tech/

用法

// main.js
import { FlvPlayer, CameraList, FlvPlayerWithTimeLocate } from 'iot-video-component'

Vue.use(FlvPlayer)
Vue.use(CameraList)
Vue.use(FlvPlayerWithTimeLocate)

// 页面
// 摄像头列表， list形式
 <camera-list
    v-if="curShopMdCode && userInfo"
    :shop-md-code="curShopMdCode"
    :emp-code="userInfo.empCode"
    :env="env"
    @channelChange="handleChannelChange"
  />

  // 带顶部 日期时间定位 的播放器
  <flv-player-with-time-locate
    v-if="userInfo"
    :shop-md-code="curShopMdCode"
    :emp-code="userInfo.empCode"
    :channel-no="curChannelNo"
    :is-live="isLive"
    :init-play-back-query-date-time="initPlayBackQueryDateTime"
    :env="env"
  />

  // 播放器
  <flv-player
    v-if="userInfo"
    :shop-md-code="shopMdCode"
    :emp-code="userInfo.empCode"
    :channel-no="curChannelNo"
    :is-live="isLive"
    :play-back-query-date-time="playBackQueryDateTime"
    :env="env"
  />


// env: dev|test1|pre|production ***
// shop-md-code: 门店编号
// emp-code: 用户编号，用于之后验签
// channel-no: 摄像头编号
// is-live: 是否直播
// init-play-back-query-date-time | play-back-query-date-time: 回放定位时间

目前只支持PC端浏览器，不支持移动端浏览器播放视频

播放回放视频，默认有录屏、截图、倍速功能。录屏与截图默认下载到本地，倍速默认只有【1，2，3，4】。可通过传参修改默认行为，如下：

  <flv-player
    v-if="userInfo"
    :shop-md-code="shopMdCode"
    :emp-code="userInfo.empCode"
    :channel-no="curChannelNo"
    :is-live="isLive"
    :play-back-query-date-time="playBackQueryDateTime"
    :env="env"
    :screen-shot="{save: false}"
    :record="{save: false}"
    @screenShot="handleScreenShot"
    @record="handleRecord"
  />