@layen-king/jx-cms-video-main-plugin NPM

jx-cms-video-main-plugin

Introduction

jx-cms-video 项目播放器主界面,支持 GB、PG 设备根据 NO 播放。后台需要 RTMB、RTSP 流转 webSocket-flv、http-flv 格式。 webSocket-flv 可以绕过浏览器同时播放 6 路限制。支持 1、4、9、16、36、64 分屏。 PG 摄像机支持 3D 云镜功能。支持窗格放大、全屏等。支持自定义播放器功能。

⬆ Back to Top

Features

⬆ Back to Top

Install

npm install @layen-king/jx-cms-video-main-plugin

或者

yarn add @layen-king/jx-cms-video-main-plugin

⬆ Back to Top

Usage

如果 .vue 页面使用

@vue/cli3 +

<template>
  <div id="app" style="min-height:400px;overflow:hidden">
    <jxCmsPluginVideoMain
      ref="videoMain"
      cmsUrl="http://192.168.7.119:8080"
      cmsWsUrl="ws://192.168.7.119:8080"
      userName="wangyl12345"
      passWord="12345"
      :isFloatMode="false"
      :isSimpleMode="false"
      :videoData="videoData"
      :defaultWindowNum="1"
      style="height:600px"
    >
      <template v-slot:waiting></template>
      <template v-slot:PTZ3D></template>
      <template v-slot:errorMessage></template>
      <template v-slot:toolBar></template>
    </jxCmsPluginVideoMain>
    <input type="button" @click="playList" value="播放列表" />
    <input type="button" @click="playOne" value="播放1个" />
  </div>
</template>

<script>
import jxCmsPluginVideoMain from "@layen-king/jx-cms-video-main-plugin";
export default {
  name: "app",
  components: { jxCmsPluginVideoMain },
  data() {
    return {
      maxWindowNum: 16,
      currentVideoIndex: 0,
      videoData: [],
      videoCommand: null
    };
  },
  created() {},
  mounted() {},
  methods: {
    playOne() {
      this.videoData = { videoNo: 1010010030100001, name: "#1高速球机(网络)" };
    },
    playList() {
      this.videoData = [
        { videoNo: 1010010030102002, name: "#1固定机(网络)" },
        { videoNo: 1010010030100001, name: "#1高速球机(网络)" },
        { videoNo: 1010010030102003, name: "#2固定机(网络)" },
        { videoNo: 1010010030102004, name: "#3固定机(网络)" },
        { videoNo: 1010010030102005, name: "#4固定机(网络)" },
        { videoNo: 1010010030102006, name: "#5固定机(网络)" }
      ];
    }
  }
};
</script>

如果直接使用在 html 页面，必须下载 video-main-plugin 和 video-plugin js 引入 .umd.js 文件并且安装缺失的全局函数：axios 等

配置项说明

参数	类型	是否必须	说明
cmsWsUrl	String	是	连接的服务器 webSocket 地址
cmsUrl	String	是	连接的服务器 http 请求地址
userName	String	是	登录服务器的用户名
passWord	String	是	登录服务器的密码
videoData	Array or Object	是	对象或者数据,默认数据参照上方 demo，需要播放设置 videoNo
defaultWindowNum	Number	否	默认选中窗口 Index,默认为 1
isSimpleMode	Boolean	否	是否简单模式,简单模式下无控制,分页,切换宫格，与悬浮模式互斥
isFloatMode	Boolean	否	是否悬浮模式，悬浮模式下可以拖动并且进行鼠标滚轮缩放,放置于页面 body 后
videoIcon	string	否	播放器背景显示的图标，必须base64格式字符串