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

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() {