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%