szxc-player-vue3

简介

江西电信数字乡村研发团队封装的基于 vue3.0 的视频播放器

安装

npm install szxc-player-vue3 --save
or
yarn add szxc-player-vue3

使用

• 在项目 main.js 中导入szxc-player-vue3

import { createApp } from "vue";
import App from "./App.vue";
import axios from "axios";

// 导入 szxc-player-vue3和样式
import "szxc-player-vue3/style.css";
import SzxcPlayer from "szxc-player-vue3";

// 可自定义options
const videoPlayOption = {
  // 加载视频信息函数（此项必须配置）
  loadVideoInfo: (videoId, resolve, reject) => {
    axios
      .get(
        "https://mobile.nccxgh.com/gswg/api/backstage/tFacilityMonitor/get",
        {
          params: {
            monitorId: videoId
          }
        }
      )
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err);
      });
  }
};

const app = createApp(App);

app.use(SzxcPlayer, videoPlayOption);

app.mount("#app");

• 在 vue 组件中使用

<template>
  <div class="video-wrap" style="width: 400px;height: 300px;">
    <szxc-player :id="videoId" />
  </div>
</tempate>

props

| 名称 | 说明 | 类型 | 默认值 | | ------------------ | -------------------------------- | ------------- | --------------------- | | id | 视频监控的 id-必传 | number/string | - | | index | 视频的 key 需保证唯一 | number | 0 | | showErrorMessage | 是否顶部显示错误信息 | boolean | true | | options | 同上述全局配置的 videoPlayOption | object | defaualtConfigOptions |

events

| 名称 | 说明 | 回调参数 | 默认值 | | ------------------ | -------------------------------- | ------------- | --------------------- | | fullScreen | 全屏事件(仅西瓜视频) | {id, state: false/true} | - |

• 默认全局配置项

const defaultConfigOptions = {
  // 新天翼云眼metaPlayer播放器地址
  metaPlayerUrl:
    "https://vcp.21cn.com/metaplayer/static/template/2.0.0/player.html?appId=3891e8&streamSrc=",
  // ffmpeg转码推流服务端地址
  webSocketUrl: "ws://106.225.209.148:9991",
  // 视频对象属性映射
  props: {
    no: "deviceNo",
    name: "deviceName",
    model: "deviceModel",
    protocol: "videoProtocol",
    url: "videoUrl",
    urls: "videoUrls"
  },
  // 网络请求配置项
  networkOptions: {
    retryCount: 3, // 重试次数
    retryDelay: 1000, // 每次重试间隔
    loadTimeout: 15000, // 请求超时时间
    keepAliveInterval: 0, // 保活间隔
    tyyy: {
      retryCount: 2,
      loadTimeout: 10000
    },
    slefarmer: {
      retryCount: 3,
      retryDelay: 5000,
      keepAliveInterval: 45000
    }
  }
};

支持

• 如果项目对你有帮助，请点颗星:star:，谢谢。
• 如果你对项目有想法、问题、BUG，欢迎讨论。