HTML视频如何自定义_CSS控制播放器样式

<div class="video-container">     <video id="myVideo" src="your-video-source.mp4" poster="video-poster.jpg" playsinline></video>     <div class="controls">         <button id="playPauseBtn" class="control-button">播放</button>         <div class="progress-bar-wrapper">             <div id="progressBar" class="progress-bar"></div>             <div id="progressHandle" class="progress-handle"></div>         </div>         <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="1" class="volume-slider">         <button id="fullscreenBtn" class="control-button">全屏</button>     </div> </div>

.video-container {     position: relative;     width: 100%;     max-width: 800px; /* 示例宽度 */     margin: 20px auto;     background-color: #000;     overflow: hidden; /* 确保内容不溢出 */ }  .video-container video {     width: 100%;     height: auto;     display: block; /* 移除底部空白 */ }  /* 隐藏原生控件 */ .video-container video::-webkit-media-controls {     display: none !important; } .video-container video::-moz-media-controls {     display: none !important; } .video-container video::-ms-media-controls {     display: none !important; } .video-container video::--webkit-media-controls-enclosure {     display: none !important; } /* 最简单直接的方式是移除 controls 属性 */  .controls {     position: absolute;     bottom: 0;     left: 0;     width: 100%;     background: rgba(0, 0, 0, 0.7);     padding: 10px;     display: flex;     align-items: center;     justify-content: space-between;     transition: opacity 0.3s ease;     opacity: 1; /* 默认显示，可根据需求做成hover显示 */ }  /* 播放/暂停按钮样式 */ .control-button {     background-color: #f00;     color: white;     border: none;     padding: 8px 12px;     cursor: pointer;     border-radius: 4px;     font-size: 14px;     margin: 0 5px; } .control-button:hover {     background-color: #c00; }  /* 进度条样式 */ .progress-bar-wrapper {     flex-grow: 1; /* 占据剩余空间 */     height: 8px;     background-color: rgba(255, 255, 255, 0.3);     border-radius: 4px;     margin: 0 10px;     position: relative;     cursor: pointer; }  .progress-bar {     height: 100%;     width: 0%; /* JS会更新这个宽度 */     background-color: #f00;     border-radius: 4px; }  .progress-handle {     position: absolute;     top: 50%;     left: 0%; /* JS会更新这个位置 */     transform: translate(-50%, -50%);     width: 16px;     height: 16px;     background-color: #fff;     border-radius: 50%;     cursor: grab;     display: none; /* 默认隐藏，hover时显示 */ } .progress-bar-wrapper:hover .progress-handle {     display: block; }  /* 音量滑块样式 */ .volume-slider {     width: 80px;     margin: 0 5px;     /* 更多自定义样式需要针对不同浏览器伪元素 */ }

const video = document.getElementById('myVideo'); const playPauseBtn = document.getElementById('playPauseBtn'); const progressBarWrapper = document.getElementById('progressBarWrapper'); // 修正ID const progressBar = document.getElementById('progressBar'); const progressHandle = document.getElementById('progressHandle'); const volumeSlider = document.getElementById('volumeSlider'); const fullscreenBtn = document.getElementById('fullscreenBtn');  let isPlaying = false; let isDraggingProgress = false;  // 播放/暂停 playPauseBtn.addEventListener('click', () => {     if (video.paused || video.ended) {         video.play();         playPauseBtn.textContent = '暂停';     } else {         video.pause();         playPauseBtn.textContent = '播放';     } });  // 视频时间更新 video.addEventListener('timeupdate', () => {     if (!isDraggingProgress) { // 拖拽时不更新进度条，避免冲突         const progress = (video.currentTime / video.duration) * 100;         progressBar.style.width = progress + '%';         progressHandle.style.left = progress + '%';     } });  // 点击进度条跳转 progressBarWrapper.addEventListener('click', (e) => {     const clickX = e.offsetX; // 相对于元素左边缘的X坐标     const width = progressBarWrapper.offsetWidth;     const newTime = (clickX / width) * video.duration;     video.currentTime = newTime; });  // 拖拽进度条 progressHandle.addEventListener('mousedown', (e) => {     isDraggingProgress = true;     document.addEventListener('mousemove', dragProgress);     document.addEventListener('mouseup', stopDragProgress); });  function dragProgress(e) {     if (isDraggingProgress) {         const rect = progressBarWrapper.getBoundingClientRect();         let newX = e.clientX - rect.left;         if (newX < 0) newX = 0;         if (newX > rect.width) newX = rect.width;          const progress = (newX / rect.width);         progressBar.style.width = (progress * 100) + '%';         progressHandle.style.left = (progress * 100) + '%';         video.currentTime = progress * video.duration;     } }  function stopDragProgress() {     isDraggingProgress = false;     document.removeEventListener('mousemove', dragProgress);     document.removeEventListener('mouseup', stopDragProgress); }   // 音量控制 volumeSlider.addEventListener('input', () => {     video.volume = volumeSlider.value; });  // 全屏 fullscreenBtn.addEventListener('click', () => {     if (video.requestFullscreen) {         video.requestFullscreen();     } else if (video.mozRequestFullScreen) { /* Firefox */         video.mozRequestFullScreen();     } else if (video.webkitRequestFullscreen) { /* Chrome, Safari & Opera */         video.webkitRequestFullscreen();     } else if (video.msRequestFullscreen) { /* IE/Edge */         video.msRequestFullscreen();     } });  // 视频播放结束 video.addEventListener('ended', () => {     playPauseBtn.textContent = '播放';     progressBar.style.width = '0%';     progressHandle.style.left = '0%'; });  // 视频加载元数据后，才能获取duration video.addEventListener('loadedmetadata', () => {     // 可以在这里显示总时长等信息 });