From be322b86a9a304b90ec3d5e9cd98c5d1cbc1769e Mon Sep 17 00:00:00 2001 From: skimrme Date: Sun, 27 Jul 2025 22:26:48 +0800 Subject: [PATCH] =?UTF-8?q?video.js=E5=92=8Cvideo.css=E9=80=BB=E8=BE=91?= =?UTF-8?q?=E5=85=A8=E5=BF=98=E8=AE=B0=E4=BA=86=EF=BC=8C=E5=B7=B2=E7=BB=8F?= =?UTF-8?q?=E5=88=A0=E6=8E=89=E4=BA=86=EF=BC=8C=E6=9C=89=E7=A9=BA=E9=87=8D?= =?UTF-8?q?=E6=96=B0=E9=85=8D=E7=BD=AE=EF=BC=8C=E5=BD=93=E5=B9=B4=E6=89=BE?= =?UTF-8?q?=E6=96=87=E5=BF=83=E4=B8=80=E8=A8=80=E9=85=8D=E7=BD=AE=E7=9A=84?= =?UTF-8?q?=EF=BC=8C=E4=BD=86=E6=98=AF=E7=8E=B0=E5=9C=A8=E6=88=91=E8=BF=98?= =?UTF-8?q?=E6=98=AF=E7=9C=8B=E4=B8=8D=E6=87=82=E5=95=8A=EF=BC=8C=E5=A4=A7?= =?UTF-8?q?=E6=82=B2=EF=BC=8C=E4=B8=8D=E8=BF=87=E7=8E=B0=E5=9C=A8=E6=88=91?= =?UTF-8?q?=E5=BA=94=E8=AF=A5=E5=8F=AF=E4=BB=A5=E5=9C=A8genmini=E7=9A=84?= =?UTF-8?q?=E5=B8=AE=E5=8A=A9=E4=B8=8B=E6=90=9E=E5=AE=9A=E4=BA=86=E5=90=A7?= =?UTF-8?q?=EF=BC=8Ccss=E6=88=91=E6=83=B3=E6=B2=A1=E9=97=AE=E9=A2=98?= =?UTF-8?q?=E7=9A=84=EF=BC=8C=E4=B8=8D=E8=BF=87js=E5=A5=BD=E9=9A=BE?= =?UTF-8?q?=E5=95=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/message/static/css/video.css | 33 ------------------ public/message/static/js/video.js | 54 ----------------------------- 2 files changed, 87 deletions(-) diff --git a/public/message/static/css/video.css b/public/message/static/css/video.css index ff2f9e9..e69de29 100755 --- a/public/message/static/css/video.css +++ b/public/message/static/css/video.css @@ -1,33 +0,0 @@ -/*简易的视频布局*/ -/* 视频播放器容器样式 */ -.video-container { - position: relative; - width: 640px; -} - -/* 自定义进度条容器样式 */ -.custom-progress-bar { - position: absolute; - bottom: 10px; - left: 0; - width: 100%; - height: 10px; - background: #444; - cursor: pointer; -} - -/* 自定义进度条填充样式 */ -.custom-progress-bar .fill { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 0; - background: #f00; - transition: width .2s; /* 平滑过渡效果 */ -} - -/* 隐藏默认的浏览器进度条 */ -video::-webkit-media-controls-timeline { - display: none; -} diff --git a/public/message/static/js/video.js b/public/message/static/js/video.js index ce7c47e..e69de29 100755 --- a/public/message/static/js/video.js +++ b/public/message/static/js/video.js @@ -1,54 +0,0 @@ -/* 简易视频播放器 */ -var video = document.getElementById("Video"); -var progressBar = document.getElementById("customProgressBar"); -var fill = document.querySelector(".custom-progress-bar .fill"); - -// 监听mousedown事件开始拖动 -progressBar.addEventListener("mousedown", function (e) { - // 防止默认行为 - e.preventDefault(); - - // 开始拖动 - document.addEventListener("mousemove", onDrag); - document.addEventListener("mouseup", onDragEnd); - - // 获取初始点击位置 - var startX = e.pageX - progressBar.offsetLeft; -}); - -function onDrag(e) { - // 计算新的进度位置 - var newPercent = (e.pageX - progressBar.offsetLeft) / progressBar.offsetWidth; - newPercent = Math.min(Math.max(0, newPercent), 1); // 限制在0到1之间 - - // 更新视频播放位置 - video.currentTime = video.duration * newPercent; - - // 更新进度条宽度 - fill.style.width = newPercent * 100 + "%"; -} - -function onDragEnd() { - // 停止拖动 - document.removeEventListener("mousemove", onDrag); - document.removeEventListener("mouseup", onDragEnd); -} - -// 视频加载元数据后初始化进度条 -video.addEventListener("loadedmetadata", function () { - // 设置初始进度 - updateProgressBar(); -}); - -// 更新进度条 -function updateProgressBar() { - var percent = (video.currentTime / video.duration) * 100; - fill.style.width = percent + "%"; -} - -// 监听视频播放过程中的时间更新 -video.addEventListener("timeupdate", updateProgressBar); - -//调节控制音量初始化 -var Video = document.getElementById("Video"); -Video.volume = 0.5; // 设置默认音量为50%