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");
<template>
<div class="video-wrap" style="width: 400px;height: 300px;">
<szxc-player :id="videoId" />
</div>
</tempate>
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
}
}
};