上传文件至 /

video.js

@@ -0,0 +1,54 @@
+/* 简易视频播放器 */  
+var video = document.getElementById('myVideo');  
+                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 myVideo = document.getElementById("myVideo");  
+                    myVideo.volume = 0.5; // 设置默认音量为50%  

视频布局.css

@@ -0,0 +1,33 @@
+/*简易的视频布局*/
+/* 视频播放器容器样式 */  
+.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;  
+}