From 44c909c0957bf751ed26f0ebb66aa96174f908f2 Mon Sep 17 00:00:00 2001
From: xc <double72cheng@gmail.com>
Date: Thu, 15 Apr 2021 13:38:41 +0800
Subject: [PATCH] 新增历史监控时间轴
---
src/main/resources/public/index.html | 69 +++++++++++++++++++++++++++++++++-
1 files changed, 67 insertions(+), 2 deletions(-)
diff --git a/src/main/resources/public/index.html b/src/main/resources/public/index.html
index 67feea1..bf0bcc2 100755
--- a/src/main/resources/public/index.html
+++ b/src/main/resources/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
<html>
<head>
@@ -71,6 +71,71 @@
overflow-y: auto;
padding: 5px;
}
+
+ /* ================ 播放器控制面板样式 start ================ */
+ .controls-container {
+ width: 720px;
+ height: 40px;
+ position: absolute;
+ left: 0px;
+ bottom: -40px;
+ background-color: #000;
+ }
+
+ /* 播放/暂停 */
+ .controls-container .switch {
+ width: 20px;
+ height: 20px;
+ display: block;
+ font-size: 20px;
+ color: #fff;
+ position: absolute;
+ left: 10px;
+ top: 10px;
+ }
+ /* 全屏 */
+ .controls-container .expand {
+ width: 20px;
+ height: 20px;
+ display: block;
+ font-size: 20px;
+ color: #fff;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ }
+ /* 进度条 */
+ .controls-container .progress {
+ width: 430px;
+ height: 10px;
+ position: absolute;
+ left: 40px;
+ bottom: 15px;
+ background-color: #555;
+ }
+ .controls-container .progress .bar {
+ /*width: 100%;*/
+ width: 430px;
+ height: 100%;
+ border-radius: 3px;
+ cursor: pointer;
+ position: absolute;
+ left: 0;
+ top: 0;
+ opacity: 0;
+ z-index: 999;
+ }
+ .controls-container .progress .loaded {
+ width: 60%; /* 视频缓存的进度, 后期可动态变化 */
+ height: 100%;
+ background-color: #999;
+ border-radius: 3px;
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 2;
+ }
+ /* ================ 播放器控制面板样式 end ================ */
</style>
</head>
@@ -78,8 +143,8 @@
<div class="player-wrapper" id="container" style="background-color: #0D0E1B;width:900px;height:500px">
</div>
-<div id="progressTime"></div>
+<div id="progressTime"></div>
<div class="btn-wrapper" id="playDom">
<button class="btn" id="play">播放</button>
</div>
--
Gitblit v1.9.1