xzzn/movecheck
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

播放器回放版本

Browse Source
This commit is contained in:
吉浩茹
2025-12-08 10:56:20 +08:00
parent 2cb78c4155
commit 29f44ad12c
6 changed files with 409 additions and 1057 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
src/components/EnvironmentCard.vue Normal file
View File

@ -0,0 +1,302 @@
<template>
<view
class="detail-card"
:class="[cardClass, { 'disconnected': connectionStatus === 0 }]"
@click="$emit('click')"
>
<view class="detail-header">
<view class="detail-icon-container">
<view class="detail-icon">{{ icon }}</view>
<text class="detail-label">{{ label }}</text>
</view>
<view class="detail-value-container">
<view class="value-unit-wrapper">
<text
class="detail-value"
:class="valueClass"
>{{ displayNumber }}</text>
<text class="detail-unit">{{ displayUnit }}</text>
</view>
<!-- <view
class="detail-status"
:class="getStatusClass()"
></view> -->
</view>
</view>
<view class="detail-progress-bar">
<view
class="detail-progress-fill"
:class="progressClass"
:style="{ width: progress + '%' }"
></view>
</view>
</view>
</template>
<script>
export default {
name: 'EnvironmentCard',
props: {
// 卡片类型
type: {
type: String,
required: true,
validator: value => ['temperature', 'humidity', 'cleanliness'].includes(value)
},
// 数值
value: {
type: Number,
default: 0
},
// 连接状态 (0: 未连接, 1: 连接成功, 2: 异常)
connectionStatus: {
type: Number,
default: 0
},
// 进度百分比 (0-100)
progress: {
type: Number,
default: 0
},
// 是否超限
isOutOfRange: {
type: Boolean,
default: false
},
// 是否数据异常
isAbnormal: {
type: Boolean,
default: false
}
},
computed: {
// 根据类型返回图标
icon() {
const iconMap = {
temperature: '🌡️',
humidity: '💧',
cleanliness: '✨'
}
return iconMap[this.type]
},
// 根据类型返回标签
label() {
const labelMap = {
temperature: '温度',
humidity: '湿度',
cleanliness: '洁净度'
}
return labelMap[this.type]
},
// 显示的数值
displayNumber() {
if (this.type === 'cleanliness' && this.value <= 0) {
return '-';
}
return this.value;
},
// 显示的单位
displayUnit() {
const unitMap = {
temperature: '°C',
humidity: '%',
cleanliness: 'μg/m³'
};
return unitMap[this.type];
},
// 根据类型返回卡片类名
cardClass() {
const classMap = {
temperature: 'temperature-detail-card',
humidity: 'humidity-detail-card',
cleanliness: 'cleanliness-detail-card'
}
return classMap[this.type]
},
// 根据类型返回进度条类名
progressClass() {
const classMap = {
temperature: 'temperature-progress',
humidity: 'humidity-progress',
cleanliness: 'cleanliness-progress'
}
return classMap[this.type]
},
// 数值的类
valueClass() {
if (this.isOutOfRange) {
return 'out-of-range';
}
if (this.isAbnormal || this.connectionStatus === 2) {
return 'abnormal';
}
return '';
}
},
methods: {
// 获取状态点类名
getStatusClass() {
if (this.connectionStatus === 1) {
return 'active'
} else if (this.connectionStatus === 2) {
return 'warning'
} else {
return 'inactive'
}
}
}
}
</script>
<style lang="scss" scoped>
// 卡片基础样式 - 严格按照原样式恢复
.detail-card {
background: #ffffff;
border-radius: 8rpx;
padding: 20rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
border: 1rpx solid #e1e5e9;
transition: box-shadow 0.2s ease;
cursor: pointer;
&:hover {
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
}
/* 断线状态样式 */
&.disconnected {
border-color: #95a5a6 !important;
border-left-color: #95a5a6 !important;
opacity: 0.7;
}
}
// 头部样式
.detail-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
}
.detail-icon-container {
display: flex;
align-items: center;
gap: 12rpx;
}
.detail-icon {
font-size: 32rpx;
}
.detail-label {
font-size: 28rpx;
color: #2c3e50;
font-weight: 600;
}
.detail-value-container {
display: flex;
align-items: center;
gap: 8rpx;
}
.value-unit-wrapper {
display: flex;
align-items: baseline;
justify-content: space-between; /* 改为 space-between */
gap: 4rpx;
flex-grow: 1; /* 让其填充剩余空间 */
// min-width: 120rpx;
}
.detail-value {
font-size: 28rpx;
font-weight: 600;
&.out-of-range {
color: #e74c3c;
}
&.abnormal {
color: #f1c40f;
}
}
.detail-unit {
font-size: 24rpx;
color: #7f8c8d;
width: 60rpx;
}
// 状态指示器
.detail-status {
width: 12rpx;
height: 12rpx;
border-radius: 50%;
&.active {
background: #27ae60;
}
&.inactive {
background: #bdc3c7;
}
&.warning {
background: #f1c40f;
}
}
// 进度条样式
.detail-progress-bar {
height: 16rpx;
background: #ecf0f1;
border-radius: 8rpx;
overflow: hidden;
}
.detail-progress-fill {
height: 100%;
border-radius: 8rpx;
transition: width 0.3s ease;
&.temperature-progress {
background: #e74c3c;
}
&.humidity-progress {
background: #3498db;
}
&.cleanliness-progress {
background: #f39c12;
}
}
// 特定卡片样式 - 左侧边框颜色
.temperature-detail-card {
border-left: 4rpx solid #e74c3c;
}
.humidity-detail-card {
border-left: 4rpx solid #3498db;
}
.cleanliness-detail-card {
border-left: 4rpx solid #f39c12;
}
// 断线状态下的文字颜色
.detail-card.disconnected .detail-label {
color: #95a5a6;
}
.detail-card.disconnected .detail-value {
color: #95a5a6;
}
.detail-card.disconnected .detail-progress-fill {
background: #95a5a6 !important;
}
</style>

236
src/pages/environment/index.vue
View File

@ -9,67 +9,40 @@
<view class="tabbar-content">
<!-- 环境参数详情 -->
<view class="parameter-details">
<!-- 温度卡片 -->
<view class="detail-card temperature-detail-card" :class="{ 'disconnected': wdisConnected === 0 }" @click="navigateToParameterRecord">
<view class="detail-header">
<view class="detail-icon-container">
<view class="detail-icon temperature-icon">🌡️</view>
<text class="detail-label">温度</text>
</view>
<view class="detail-value-container">
<text class="detail-value">{{ temperature }}°C</text>
<view class="detail-status" :class="wdisConnected === 1 ? 'active' : (wdisConnected === 2 ? 'warning' : 'inactive')"></view>
</view>
</view>
<view class="detail-progress-bar">
<view class="detail-progress-fill temperature-progress" :style="{ width: temperatureProgress + '%' }"></view>
</view>
<!-- <view class="detail-range">
<text class="detail-range-text">{{ 0 }}°C - {{ 100 }}°C</text>
</view> -->
<!-- 温度卡片 -->
<EnvironmentCard
type="temperature"
:value="temperature"
:connection-status="wdisConnected"
:progress="temperatureProgress"
:is-out-of-range="temperature > tempSettings.max || temperature < tempSettings.min"
:is-abnormal="isTempAbnormal"
@click="navigateToParameterRecord"
/>
<!-- 湿度卡片 -->
<EnvironmentCard
type="humidity"
:value="humidity"
:connection-status="sdisConnected"
:progress="humidityProgress"
:is-out-of-range="humidity > humiditySettings.max || humidity < humiditySettings.min"
:is-abnormal="isHumidityAbnormal"
@click="navigateToParameterRecord"
/>
<!-- 洁净度卡片 -->
<EnvironmentCard
type="cleanliness"
:value="cleanliness"
:connection-status="pmisConnected"
:progress="cleanlinessProgress"
:is-out-of-range="false"
:is-abnormal="isCleanlinessAbnormal"
@click="navigateToParameterRecord"
/>
</view>
<!-- 湿度卡片 -->
<view class="detail-card humidity-detail-card" :class="{ 'disconnected': sdisConnected === 0 }" @click="navigateToParameterRecord">
<view class="detail-header">
<view class="detail-icon-container">
<view class="detail-icon humidity-icon">💧</view>
<text class="detail-label">湿度</text>
</view>
<view class="detail-value-container">
<text class="detail-value">{{ humidity }}%</text>
<view class="detail-status" :class="sdisConnected === 1 ? 'active' : (sdisConnected === 2 ? 'warning' : 'inactive')"></view>
</view>
</view>
<view class="detail-progress-bar">
<view class="detail-progress-fill humidity-progress" :style="{ width: humidityProgress + '%' }"></view>
</view>
<!-- <view class="detail-range">
<text class="detail-range-text">{{ 0 }}% - {{ 100 }}%</text>
</view> -->
</view>
<!-- 洁净度卡片 -->
<view class="detail-card cleanliness-detail-card" :class="{ 'disconnected': pmisConnected === 0 }" @click="navigateToParameterRecord">
<view class="detail-header">
<view class="detail-icon-container">
<view class="detail-icon cleanliness-icon">✨</view>
<text class="detail-label">洁净度</text>
</view>
<view class="detail-value-container">
<text class="detail-value">{{ cleanliness > 0 ? cleanliness + 'μg/m³' : '-μg/m³' }}</text>
<view class="detail-status" :class="pmisConnected === 1 ? 'active' : (pmisConnected === 2 ? 'warning' : 'inactive')"></view>
</view>
</view>
<view class="detail-progress-bar">
<view class="detail-progress-fill cleanliness-progress" :style="{ width: cleanlinessProgress + '%' }"></view>
</view>
<!-- <view class="detail-range">
<text class="detail-range-text">{{ 0 }}% - {{ 100 }}%</text>
</view> -->
</view>
</view>
<!-- 空调设置 -->
<view class="air-conditioner-settings">
<view class="ac-header">
@ -268,8 +241,12 @@
import mqttDataManager from '@/utils/mqttDataManager.js'
import { manualReconnect, sendMqttData } from '@/utils/sendMqtt.js'
import { thDataApi, alertApi, eventApi, wsdApi, statusApi } from '@/utils/api.js'
import EnvironmentCard from '@/components/EnvironmentCard.vue'
export default {
components: {
EnvironmentCard
},
data() {
return {
temperature: 0,
@ -278,6 +255,9 @@ export default {
temperatureProgress: 0,
humidityProgress: 0,
cleanlinessProgress: 0,
isTempAbnormal: false,
isHumidityAbnormal: false,
isCleanlinessAbnormal: false,
lastUpdate: '暂无数据',
temperatureRange: {
min: 0,
@ -1514,141 +1494,7 @@ button:disabled {
margin-bottom: 20rpx;
}
.detail-card {
background: #ffffff;
border-radius: 8rpx;
padding: 20rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
border: 1rpx solid #e1e5e9;
transition: box-shadow 0.2s ease;
}
.detail-card:hover {
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
}
/* 断线状态样式 */
.detail-card.disconnected {
border-color: #95a5a6 !important;
border-left-color: #95a5a6 !important;
opacity: 0.7;
}
.detail-card.disconnected .detail-label {
color: #95a5a6;
}
.detail-card.disconnected .detail-value {
color: #95a5a6;
}
.detail-card.disconnected .detail-progress-fill {
background: #95a5a6 !important;
}
/* 温度详情卡片 */
.temperature-detail-card {
border-left: 4rpx solid #e74c3c;
}
/* 湿度详情卡片 */
.humidity-detail-card {
border-left: 4rpx solid #3498db;
}
/* 洁净度详情卡片 */
.cleanliness-detail-card {
border-left: 4rpx solid #f39c12;
}
.detail-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
}
.detail-icon-container {
display: flex;
align-items: center;
gap: 12rpx;
}
.detail-icon {
font-size: 32rpx;
}
.detail-label {
font-size: 28rpx;
color: #2c3e50;
font-weight: 600;
}
.detail-value-container {
display: flex;
align-items: center;
gap: 8rpx;
}
.detail-value {
font-size: 28rpx;
// color: #34495e;
font-weight: 600;
}
.detail-status {
width: 12rpx;
height: 12rpx;
border-radius: 50%;
}
.detail-status.active {
background: #27ae60;
}
.detail-status.inactive {
background: #bdc3c7;
}
.detail-status.warning {
background: #f1c40f;
}
.detail-progress-bar {
height: 16rpx;
background: #ecf0f1;
border-radius: 8rpx;
overflow: hidden;
margin-bottom: 12rpx;
}
.detail-progress-fill {
height: 100%;
border-radius: 8rpx;
transition: width 0.3s ease;
}
.temperature-progress {
background: #e74c3c;
}
.humidity-progress {
background: #3498db;
}
.cleanliness-progress {
background: #f39c12;
}
.detail-range {
display: flex;
justify-content: flex-end;
}
.detail-range-text {
font-size: 24rpx;
color: #7f8c8d;
}
/* 空调目标参数设置样式 */
.air-conditioner-settings {
@ -2235,9 +2081,7 @@ button:disabled {
margin-top: 90rpx; /* 调整小屏幕下的顶部间距，增加距离 */
}
.detail-card {
padding: 16rpx;
}
.air-conditioner-settings {
padding: 16rpx;

34
src/pages/visual/index.vue
View File

@ -64,38 +64,8 @@ export default {
iframeUrl: '', // H5平台使用
webviewUrl: '', // APP平台使用
// 设备配置
playUrl: "ezopen://open.ys7.com/FT1718031/1.hd.live",
playUrl: "ezopen://open.ys7.com/GE9147469/1.hd.live",
accessToken: '',
cameraStatus: {
text: '离线',
class: 'offline'
},
recordingStatus: {
text: '未录制',
class: 'inactive'
},
qualityIndex: 1,
qualityOptions: ['低', '中', '高', '超高清'],
durationIndex: 2,
durationOptions: ['5分钟', '10分钟', '30分钟', '1小时', '持续录制'],
autoSave: true,
historyList: [
{
time: '2025-09-29 15:45:33',
duration: '10:30',
size: '125MB'
},
{
time: '2025-09-29 14:20:15',
duration: '5:45',
size: '68MB'
},
{
time: '2025-09-29 13:10:22',
duration: '15:20',
size: '189MB'
}
]
}
},
onLoad() {
@ -140,7 +110,7 @@ export default {
async checkDevice() {
console.log('🔍 开始检查设备状态...')
const playUrl = "ezopen://open.ys7.com/FT1718031/1.hd.live"
const playUrl = "ezopen://open.ys7.com/GE9147469/1.hd.live"
uni.showLoading({
title: '检查设备中...'

371
src/static/html/1ezviz-iframe.html
View File

@ -1,371 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>萤石云播放器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
/* background: #1a1a1a; */
position: relative;
}
#player-iframe {
width: 100%;
height: 50%;
border: none;
display: block;
object-fit: contain; /* 保持视频比例，不变形 */
}
/* 简化的控制按钮样式 */
.control-buttons {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 16px;
z-index: 999;
pointer-events: auto;
}
.control-btn {
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 25px;
padding: 12px 20px;
min-width: 100px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
color: white;
font-size: 14px;
font-weight: 500;
text-align: center;
}
.control-btn:active {
background: rgba(0, 0, 0, 0.8);
}
.play-btn {
background: rgba(76, 175, 80, 0.8);
border-color: rgba(76, 175, 80, 0.9);
}
.play-btn:active {
background: rgba(76, 175, 80, 0.9);
}
.refresh-btn {
background: rgba(33, 150, 243, 0.8);
border-color: rgba(33, 150, 243, 0.9);
}
.refresh-btn:active {
background: rgba(33, 150, 243, 0.9);
}
/* 按钮图标样式 */
.btn-icon {
margin-right: 6px;
font-size: 16px;
display: inline-block;
}
.btn-text {
font-weight: 500;
}
.loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 14px;
text-align: center;
background: rgba(0, 0, 0, 0.7);
padding: 15px 30px;
border-radius: 8px;
z-index: 10;
}
.loading::after {
content: '';
display: block;
width: 20px;
height: 20px;
margin: 10px auto 0;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* 简化的暂停占位符样式 */
.pause-placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background: #000000;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 5;
}
.pause-content {
text-align: center;
color: white;
}
.pause-title {
font-size: 18px;
font-weight: 400;
color: white;
}
</style>
</head>
<body>
<div class="loading" id="loading">正在加载播放器...</div>
<iframe id="player-iframe" allow="autoplay; fullscreen"></iframe>
<!-- 暂停时的占位符 -->
<div class="pause-placeholder" id="pause-placeholder">
<div class="pause-content">
<div class="pause-title">监控已暂停</div>
</div>
</div>
<!-- 控制按钮 -->
<div class="control-buttons" id="control-buttons" style="display: none;">
<div class="control-btn play-btn" id="play-btn">
<span class="btn-icon" id="play-icon">▶️</span>
<span class="btn-text" id="play-text">播放</span>
</div>
<div class="control-btn refresh-btn" id="refresh-btn">
<span class="btn-icon">🔄</span>
<span class="btn-text">刷新</span>
</div>
</div>
<script>
function log(message) {
console.log('[iframe播放器] ' + message);
}
// 从URL参数获取配置
function getConfig() {
const params = new URLSearchParams(window.location.search);
return {
accessToken: params.get('accessToken'),
playUrl: params.get('playUrl')
};
}
// 初始化播放器
function init() {
log('初始化开始');
const configData = getConfig();
if (!configData.accessToken || !configData.playUrl) {
log('配置参数不完整');
document.getElementById('loading').textContent = '配置参数错误';
return;
}
// 保存配置到全局变量
config = {
accessToken: configData.accessToken,
playUrl: configData.playUrl
};
log('AccessToken: ' + config.accessToken.substring(0, 20) + '...');
log('PlayUrl: ' + config.playUrl);
try {
// 使用萤石云官方iframe播放器（内存占用小）
const iframeUrl = 'https://open.ys7.com/ezopen/h5/iframe?' +
'url=' + encodeURIComponent(config.playUrl) +
'&accessToken=' + encodeURIComponent(config.accessToken) +
'&width=100%' +
'&height=100%' +
'&autoplay=1' +
'&audio=1' +
'&controls=1';
log('iframe URL: ' + iframeUrl);
const iframe = document.getElementById('player-iframe');
iframe.src = iframeUrl;
// 设置初始播放状态
isPlaying = true;
document.getElementById('play-text').textContent = '暂停';
document.getElementById('play-icon').textContent = '⏸️';
// 隐藏loading，显示控制按钮
setTimeout(() => {
document.getElementById('loading').style.display = 'none';
document.getElementById('control-buttons').style.display = 'flex';
log('播放器加载完成，显示控制按钮');
}, 2000);
} catch (error) {
log('初始化失败: ' + error.message);
document.getElementById('loading').textContent = '初始化失败';
}
}
// 全局状态
let isPlaying = true;
let config = null;
// 播放/暂停控制
function togglePlay() {
log('切换播放状态: ' + (isPlaying ? '暂停' : '播放'));
const iframe = document.getElementById('player-iframe');
const playText = document.getElementById('play-text');
const playIcon = document.getElementById('play-icon');
const pausePlaceholder = document.getElementById('pause-placeholder');
if (isPlaying) {
// 暂停：清空iframe，显示占位符
iframe.src = 'about:blank';
pausePlaceholder.style.display = 'flex';
playText.textContent = '播放';
playIcon.textContent = '▶️';
isPlaying = false;
log('已暂停播放，显示占位符');
} else {
// 播放：重新设置iframe URL，隐藏占位符
if (config) {
const iframeUrl = 'https://open.ys7.com/ezopen/h5/iframe?' +
'url=' + encodeURIComponent(config.playUrl) +
'&accessToken=' + encodeURIComponent(config.accessToken) +
'&width=100%' +
'&height=100%' +
'&autoplay=1' +
'&audio=1' +
'&controls=1';
iframe.src = iframeUrl;
pausePlaceholder.style.display = 'none';
playText.textContent = '暂停';
playIcon.textContent = '⏸️';
isPlaying = true;
log('已开始播放，隐藏占位符');
}
}
}
// 刷新播放器
function refreshPlayer() {
log('刷新播放器');
const iframe = document.getElementById('player-iframe');
const playText = document.getElementById('play-text');
const playIcon = document.getElementById('play-icon');
const pausePlaceholder = document.getElementById('pause-placeholder');
// 先清空，显示加载状态
iframe.src = 'about:blank';
pausePlaceholder.style.display = 'none';
// 延迟重新加载
setTimeout(() => {
if (config) {
const iframeUrl = 'https://open.ys7.com/ezopen/h5/iframe?' +
'url=' + encodeURIComponent(config.playUrl) +
'&accessToken=' + encodeURIComponent(config.accessToken) +
'&width=100%' +
'&height=100%' +
'&autoplay=1' +
'&audio=1' +
'&controls=1';
iframe.src = iframeUrl;
playText.textContent = '暂停';
playIcon.textContent = '⏸️';
isPlaying = true;
log('刷新完成');
}
}, 500);
}
// 页面加载完成后初始化
window.onload = function() {
log('页面加载完成');
// 绑定按钮事件
document.getElementById('play-btn').addEventListener('click', togglePlay);
document.getElementById('refresh-btn').addEventListener('click', refreshPlayer);
init();
};
// 页面卸载时清理资源
window.onbeforeunload = function() {
log('页面即将卸载，清理播放器资源');
try {
const iframe = document.getElementById('player-iframe');
if (iframe) {
iframe.src = 'about:blank'; // 清空iframe源
log('播放器资源已清理');
}
} catch (error) {
log('清理播放器资源失败: ' + error.message);
}
};
// 页面隐藏时暂停播放
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
log('页面隐藏，暂停播放');
try {
const iframe = document.getElementById('player-iframe');
if (iframe) {
iframe.style.display = 'none';
}
} catch (error) {
log('暂停播放失败: ' + error.message);
}
} else {
log('页面显示，恢复播放');
try {
const iframe = document.getElementById('player-iframe');
if (iframe) {
iframe.style.display = 'block';
}
} catch (error) {
log('恢复播放失败: ' + error.message);
}
}
});
</script>
</body>
</html>

96
src/static/html/ezviz-iframe.html
View File

@ -18,11 +18,29 @@
width: 100%;
height: 100vh;
}
/* 优化按钮样式 */
.demo {
/* padding: 0 12px; */
}
.btn {
display: block;
width: 100%;
padding: 10px 14px;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
/* margin-top: 12px; */
margin-bottom: 10px;
background-color: #fff;
}
</style>
</head>
<body>
<div className="demo">
<div class="demo">
<button class="btn reset-btn" onclick="resetPlayer()">刷新播放器</button>
<div id="video-container"></div>
</div>
<script>
@ -48,43 +66,28 @@
// 获取配置
const config = getConfig();
// 验证参数
if (!config.accessToken || !config.playUrl) {
console.error('❌ 缺少必要参数！请在URL中提供 accessToken 和 playUrl');
alert('缺少必要参数！\n需要: ?accessToken=xxx&playUrl=ezopen://...');
} else {
console.log('✅ 参数验证通过，开始创建播放器');
// 使用URL参数创建播放器
// 封装创建播放器逻辑，便于复用
function createPlayer(cfg) {
console.log('🎬 开始创建播放器');
player = new EZUIKit.EZUIKitPlayer({
id: "video-container", // 视频容器ID
url: config.playUrl,
accessToken: config.accessToken,
template: "voice", // simple: 极简版; pcLive: 预览; pcRec: 回放; security: 安防版; voice: 语音版;
// 官方demo token
// template: "voice",
// url: "ezopen://open.ys7.com/BC7900686/1.live",
// accessToken: "ra.84wglyar4c3r6hozd6u92ser0r854lbi-5c1dgl7mi6-1q2swlg-b0hpmwcqg",
url: cfg.playUrl,
accessToken: cfg.accessToken,
template: "mobileRec", // simple: 极简版; pcLive: 预览; pcRec: 回放; security: 安防版; voice: 语音版;
width: width,
height: (width * 9) / 16,
language: "zh", // zh | en
env: {
// https://open.ys7.com/help/1772?h=domain
// domain默认是 https://open.ys7.com, 如果是私有化部署或海外的环境，请配置对应的domain
domain: "https://open.ys7.com",
},
// 日志打印设置
loggerOptions: {
level: "INFO", // INFO LOG WARN ERROR
name: "ezuikit",
showTime: true,
},
// 视频流的信息回调类型
streamInfoCBType: 1,
// env: {
// domain: "https://open.ys7.com",
// },
// loggerOptions: {
// level: "INFO",
// name: "ezuikit",
// showTime: true,
// },
// streamInfoCBType: 1,
staticPath: "./ezuikit_static", // 使用本地静态资源
// 错误处理
handleError: (error) => {
console.error('❌ 播放器错误:', error);
}
@ -125,6 +128,15 @@
console.log('🎬 播放器初始化完成');
}
// 验证参数并创建初始播放器
if (!config.accessToken || !config.playUrl) {
console.error('❌ 缺少必要参数！请在URL中提供 accessToken 和 playUrl');
alert('缺少必要参数！\n需要: ?accessToken=xxx&playUrl=ezopen://...');
} else {
console.log('✅ 参数验证通过，开始创建播放器');
createPlayer(config);
}
// 控制函数
function fullScreen() {
if (player) {
@ -175,6 +187,28 @@
}
player = null;
}
// 重置播放器：销毁并重新创建
function resetPlayer() {
console.log('🔄 重置播放器：开始');
// 清空容器内容，确保干净的DOM
var container = document.getElementById('video-container');
if (container) {
container.innerHTML = '';
}
// 销毁旧实例
destroy();
// 重新获取配置（支持URL参数变更后刷新）
var latestConfig = getConfig();
if (!latestConfig.accessToken || !latestConfig.playUrl) {
console.error('❌ 重置失败：缺少必要参数');
alert('重置失败：缺少必要参数！\n需要: ?accessToken=xxx&playUrl=ezopen://...');
return;
}
// 重新创建播放器
createPlayer(latestConfig);
console.log('✅ 重置完成：播放器已重新创建');
}
// 页面卸载时清理
window.onbeforeunload = function() {