企业官网建设流程全解析

1. 从“能播”到“好用”：为什么播放器必须要有按键控制？

一个只能播放和暂停的视频播放器，就像一辆没有方向盘和刹车的汽车。它能动，但你完全无法驾驭它。在上一节，我们可能已经让视频在屏幕上跑起来了，但用户只能被动观看，无法快进到精彩片段，无法回看错过的细节，也无法调整音量。这离一个“可用”甚至“好用”的播放器，还差得很远。

按键控制，就是赋予用户这辆“汽车”的方向盘、油门和刹车。它不仅仅是几个按钮的UI堆砌，背后是一整套对媒体播放状态（播放、暂停、停止）、播放进度（跳转、快进、快退）以及播放体验（音量、静音、全屏）的精细管理。没有它，播放器就失去了交互的灵魂，只是一个自动运行的展示窗口。因此，这一节我们要做的，就是为这个播放器注入灵魂，让它真正听命于用户。

从技术实现上看，添加按键控制会涉及到几个核心层面：首先是事件监听，我们需要捕获用户的键盘或鼠标点击事件；其次是状态管理，每一个按键操作都会改变播放器的内部状态（如currentTime,volume,paused等）；最后是UI反馈，状态改变后需要即时、准确地反映在进度条、时间显示和按钮图标上。这三者环环相扣，任何一环的延迟或错误都会导致糟糕的用户体验。接下来，我们就从最基础、最核心的播放/暂停功能开始，一步步搭建起完整的控制体系。

2. 基石功能：实现播放与暂停的可靠切换

播放和暂停是播放器最基础、最频繁的操作。实现它听起来很简单——不就是调用一下videoElement.play()和videoElement.pause()吗？但实际做起来，你会发现里面有不少细节需要处理，才能保证稳定和良好的用户体验。

2.1 核心原理与API调用

HTML5的<video>元素原生提供了play()和pause()方法，以及一个paused只读属性来反映当前状态。我们的任务就是创建一个函数，根据当前paused的状态，来调用对应的方法。

// 获取video元素 const videoPlayer = document.getElementById('myVideo'); function togglePlayPause() { if (videoPlayer.paused) { videoPlayer.play().catch(error => { console.error("播放失败:", error); // 这里可以添加UI提示，如“播放失败，请检查网络或文件” }); } else { videoPlayer.pause(); } }

这里有一个至关重要的细节：video.play()方法返回的是一个 Promise。在现代浏览器中，由于自动播放策略的限制，如果用户没有与页面交互（比如先点击一下页面），直接调用play()可能会被拒绝并抛出异常。因此，必须使用.catch()来处理可能的错误，否则未处理的Promise拒绝可能导致程序静默失败，给调试带来困难。一个健壮的实现应该像上面那样，至少把错误打印出来，更好的做法是给用户一个友好的提示。

2.2 绑定事件与UI同步

有了切换函数，我们需要把它绑定到播放/暂停按钮的点击事件上。同时，按钮的图标（比如一个“播放”三角或“暂停”两条竖线）需要与视频的实际状态同步。

// 获取播放/暂停按钮 const playPauseBtn = document.getElementById('playPauseBtn'); const playPauseIcon = playPauseBtn.querySelector('i'); // 假设图标用<i>标签包裹 // 点击按钮触发切换 playPauseBtn.addEventListener('click', togglePlayPause); // 监听视频的播放和暂停事件，同步按钮图标 videoPlayer.addEventListener('play', () => { playPauseIcon.classList.remove('icon-play'); playPauseIcon.classList.add('icon-pause'); // 或者直接修改textContent，如果用的是字体图标 // playPauseIcon.textContent = '⏸'; }); videoPlayer.addEventListener('pause', () => { playPauseIcon.classList.remove('icon-pause'); playPauseIcon.classList.add('icon-play'); });

为什么要在play和pause事件里更新UI，而不是在togglePlayPause函数里？这是一个关键的设计考量。视频的播放状态可能通过多种方式改变：用户点击按钮、按键盘空格键、或者通过代码直接调用API。如果只在按钮点击函数里更新图标，那么当用户按空格键时，按钮图标就会与实际状态不同步。监听视频元素自身的play/pause事件，可以保证无论状态如何改变，UI都能获得唯一的、权威的通知源，从而实现可靠的同步。这是一种“状态驱动UI”的思想。

2.3 键盘快捷键的支持

对于桌面端用户，键盘快捷键是提升效率的关键。通常，空格键用于播放/暂停。

document.addEventListener('keydown', (event) => { // 避免在输入框等元素内触发播放器快捷键 if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') { return; } switch (event.code) { case 'Space': // 空格键 event.preventDefault(); // 防止页面滚动 togglePlayPause(); break; // 其他快捷键后续添加 } });

这里注意event.preventDefault()的调用。空格键的默认行为是滚动页面，我们在播放器场景下需要阻止这个行为，将空格键完全交给播放器控制。同时，加入了条件判断，当焦点在输入框或文本域时，不触发播放器快捷键，这是一个良好的用户体验细节。

3. 掌控播放进度：跳转、快进与快退的实现

用户不可能总是从头看到尾。跳转到特定时间点、快速前进或后退几秒钟，是观看视频时的刚性需求。这部分的实现，核心在于操作<video>元素的currentTime属性（单位：秒）。

3.1 精准跳转：进度条与时间输入

最直接的进度控制是跳转到指定时间。这通常通过一个可拖拽的进度条（<input type="range">）来实现。

<input type="range" id="progressBar" min="0" max="100" value="0" step="0.1"> <span id="currentTime">0:00</span> / <span id="duration">0:00</span>

const progressBar = document.getElementById('progressBar'); const currentTimeDisplay = document.getElementById('currentTime'); const durationDisplay = document.getElementById('duration'); // 1. 视频元数据加载后，获取总时长并设置进度条最大值 videoPlayer.addEventListener('loadedmetadata', () => { progressBar.max = videoPlayer.duration; // 将最大值设为视频总秒数 durationDisplay.textContent = formatTime(videoPlayer.duration); }); // 2. 视频播放时，持续更新进度条和当前时间显示 videoPlayer.addEventListener('timeupdate', () => { if (!isNaN(videoPlayer.duration)) { progressBar.value = videoPlayer.currentTime; currentTimeDisplay.textContent = formatTime(videoPlayer.currentTime); } }); // 3. 当用户拖动进度条时，跳转到对应时间 progressBar.addEventListener('input', () => { // 注意：这里用'input'事件而非'change'，以实现拖动时实时预览（有些播放器会小窗预览） // 但直接跳转会卡顿，通常做法是标记一个“正在拖拽”的状态，在拖拽结束（change）时再跳转 }); progressBar.addEventListener('change', () => { videoPlayer.currentTime = parseFloat(progressBar.value); }); // 时间格式化函数：将秒转换为“分:秒”或“时:分:秒” function formatTime(seconds) { const hrs = Math.floor(seconds / 3600); const mins = Math.floor((seconds % 3600) / 60); const secs = Math.floor(seconds % 60); if (hrs > 0) { return `${hrs}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; } else { return `${mins}:${secs.toString().padStart(2, '0')}`; } }

这里有一个经典的“拖拽体验”优化点：如果直接在input事件里设置currentTime，视频会随着你的每一次微小拖动而疯狂跳帧，导致卡顿和性能问题。标准的做法是：

1. 在input事件触发时，只更新一个“预览时间”的UI显示，并暂停视频（可选）。
2. 在change事件（即用户松开鼠标，拖拽结束）时，才真正执行videoPlayer.currentTime = ...进行跳转。
3. 更高级的实现还会在拖拽时，在进度条上方或旁边显示一个当前拖动位置对应视频帧的缩略图。

3.2 快捷操作：快进与快退

快进（Forward）和快退（Rewind）通常以固定的时间间隔（如5秒、10秒）来调整当前时间。实现起来很简单，但交互设计上有讲究。

// 假设有快退和快进按钮 const rewindBtn = document.getElementById('rewindBtn'); const forwardBtn = document.getElementById('forwardBtn'); const SKIP_TIME = 10; // 快进/快退的秒数 rewindBtn.addEventListener('click', () => { videoPlayer.currentTime = Math.max(0, videoPlayer.currentTime - SKIP_TIME); }); forwardBtn.addEventListener('click', () => { videoPlayer.currentTime = Math.min(videoPlayer.duration, videoPlayer.currentTime + SKIP_TIME); }); // 添加快捷键支持：左右方向键 document.addEventListener('keydown', (event) => { switch (event.code) { case 'ArrowLeft': event.preventDefault(); videoPlayer.currentTime = Math.max(0, videoPlayer.currentTime - SKIP_TIME); break; case 'ArrowRight': event.preventDefault(); videoPlayer.currentTime = Math.min(videoPlayer.duration, videoPlayer.currentTime + SKIP_TIME); break; } });

注意Math.max(0, ...)和Math.min(duration, ...)的使用。这是边界保护，防止用户快退到0秒之前或快进到总时长之后，导致currentTime被设为非法值。虽然现代浏览器可能会自动修正，但显式地进行边界处理是更严谨的做法。

提示：很多播放器（如YouTube）在按住左/右键不放时，会持续快退/快进，并伴随加速效果。这需要监听keydown并配合定时器来实现，逻辑会更复杂一些。对于初级实现，上面这种点按一次跳一段的方式已经足够。

4. 调节视听体验：音量与静音控制

音量控制是另一个影响体验的关键。它包括一个音量滑块和一個静音按钮，两者状态需要联动。

4.1 音量滑块的实现

<video>元素的volume属性范围是 0.0（静音）到 1.0（最大音量）。

<div class="volume-control"> <button id="muteBtn"><i class="icon-volume-high"></i></button> <input type="range" id="volumeSlider" min="0" max="1" step="0.05" value="1"> </div>

const muteBtn = document.getElementById('muteBtn'); const volumeSlider = document.getElementById('volumeSlider'); const volumeIcon = muteBtn.querySelector('i'); // 初始化：同步滑块与视频音量 volumeSlider.value = videoPlayer.volume; // 滑块拖动改变音量 volumeSlider.addEventListener('input', () => { const volume = parseFloat(volumeSlider.value); videoPlayer.volume = volume; videoPlayer.muted = (volume === 0); // 如果音量为0，自动设置为静音状态 updateVolumeIcon(volume); }); // 音量变化时（也可能是通过其他方式改变的），更新滑块和图标 videoPlayer.addEventListener('volumechange', () => { volumeSlider.value = videoPlayer.volume; updateVolumeIcon(videoPlayer.volume); }); function updateVolumeIcon(volume) { let iconClass = 'icon-volume-high'; if (volume === 0 || videoPlayer.muted) { iconClass = 'icon-volume-mute'; } else if (volume < 0.5) { iconClass = 'icon-volume-low'; } volumeIcon.className = iconClass; }

这里我们监听了视频的volumechange事件。这是一个很好的实践，因为它能响应任何改变音量的操作，无论是拖动滑块、点击静音按钮，还是通过键盘快捷键。

4.2 静音功能的逻辑与状态记忆

静音不仅仅是把音量设为0，它还有一个独立的布尔属性muted。并且，好的播放器在取消静音时，应该恢复到静音前的音量，而不是直接跳到100%。

let lastVolume = videoPlayer.volume; // 记录静音前的音量 muteBtn.addEventListener('click', () => { if (videoPlayer.muted) { // 取消静音，恢复之前的音量 videoPlayer.muted = false; videoPlayer.volume = lastVolume; volumeSlider.value = lastVolume; } else { // 开启静音，记录当前音量 lastVolume = videoPlayer.volume; videoPlayer.muted = true; volumeSlider.value = 0; } updateVolumeIcon(videoPlayer.volume); });

这个逻辑的巧妙之处在于状态分离：muted属性控制静音状态，volume属性存储实际的音量值。当muted为true时，无论volume是多少，都没有声音。这样设计使得“静音/取消静音”成为一个独立的、可逆的操作，用户体验非常自然。同时，将音量滑块的值设为0或恢复值，提供了即时的视觉反馈。

4.3 键盘快捷键扩展

为音量控制也添加快捷键，通常是上下方向键。

document.addEventListener('keydown', (event) => { switch (event.code) { case 'ArrowUp': event.preventDefault(); videoPlayer.volume = Math.min(1, videoPlayer.volume + 0.05); break; case 'ArrowDown': event.preventDefault(); videoPlayer.volume = Math.max(0, videoPlayer.volume - 0.05); break; case 'KeyM': // M键切换静音 event.preventDefault(); muteBtn.click(); // 直接模拟点击静音按钮，复用其逻辑 break; } });

5. 全屏切换：沉浸式观看的实现与陷阱

全屏功能能提供沉浸式的观看体验。HTML5提供了全屏API，但它的使用有一些兼容性细节和陷阱需要注意。

5.1 全屏API的基本使用

全屏API主要作用于具体的元素（如我们的videoPlayer容器），而不是整个文档。

const fullscreenBtn = document.getElementById('fullscreenBtn'); const playerContainer = document.getElementById('playerContainer'); // video元素的父容器 async function toggleFullscreen() { try { // 检查当前是否已处于全屏状态（需要考虑带前缀的旧API） if (!document.fullscreenElement) { // 请求进入全屏 if (playerContainer.requestFullscreen) { await playerContainer.requestFullscreen(); } else if (playerContainer.webkitRequestFullscreen) { /* Safari */ await playerContainer.webkitRequestFullscreen(); } else if (playerContainer.msRequestFullscreen) { /* IE/Edge */ await playerContainer.msRequestFullscreen(); } } else { // 退出全屏 if (document.exitFullscreen) { await document.exitFullscreen(); } else if (document.webkitExitFullscreen) { await document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { await document.msExitFullscreen(); } } } catch (err) { console.error(`全屏操作失败: ${err.message}`); } } fullscreenBtn.addEventListener('click', toggleFullscreen);

关键点：我们通常对播放器的容器元素调用requestFullscreen，而不是直接对<video>元素。这样可以把控制栏、标题等UI也一并带入全屏模式。另外，全屏API是异步的，返回一个Promise，使用async/await或.then().catch()可以更好地处理可能发生的错误（例如用户未交互就触发全屏请求会被拒绝）。

5.2 监听全屏状态变化与UI同步

用户不仅可以通过我们的按钮，还可以按键盘的F11键或浏览器的全屏菜单进入/退出全屏。因此，我们需要监听全屏状态变化事件来同步按钮的图标和功能。

function updateFullscreenButton() { const isFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement); fullscreenBtn.querySelector('i').className = isFullscreen ? 'icon-contract' : 'icon-expand'; // 也可以改变按钮的title提示文字 fullscreenBtn.title = isFullscreen ? '退出全屏 (Esc)' : '进入全屏'; } // 监听全屏变化事件（注意带前缀的版本） document.addEventListener('fullscreenchange', updateFullscreenButton); document.addEventListener('webkitfullscreenchange', updateFullscreenButton); // Safari document.addEventListener('MSFullscreenChange', updateFullscreenButton); // IE/Edge // 添加Esc键退出全屏的说明（浏览器通常已支持，但我们可以强化提示）

5.3 全屏下的样式与交互陷阱

进入全屏后，浏览器会为全屏元素应用默认样式（如黑色背景、元素居中）。但你可能需要自定义全屏时的样式，这可以通过CSS伪类:fullscreen来实现。

#playerContainer:fullscreen { background-color: black; display: flex; justify-content: center; align-items: center; } #playerContainer:-webkit-full-screen { /* Safari */ background-color: black; display: flex; justify-content: center; align-items: center; } #playerContainer:-ms-fullscreen { /* IE/Edge */ background-color: black; width: 100%; height: 100%; }

一个常见的陷阱是：全屏状态下的控件隐藏/显示逻辑。很多播放器在全屏时，鼠标不动几秒后会自动隐藏控制栏，鼠标移动再显示。这个功能需要你自己用JavaScript实现：

let hideControlsTimer; playerContainer.addEventListener('mousemove', () => { // 鼠标移动，显示控制栏 controlsBar.style.opacity = '1'; controlsBar.style.visibility = 'visible'; clearTimeout(hideControlsTimer); // 3秒后隐藏 hideControlsTimer = setTimeout(() => { controlsBar.style.opacity = '0'; // 使用visibility而非display，避免布局抖动 setTimeout(() => { controlsBar.style.visibility = 'hidden'; }, 300); }, 3000); });

注意，控制栏的隐藏/显示需要平滑的过渡（opacity+transition），并且最好使用visibility: hidden而不是display: none，因为后者会导致布局重新计算，可能引起视频尺寸的轻微跳动。

6. 键盘快捷键的完整集成与冲突处理

我们已经零散地添加了一些键盘快捷键。现在，我们需要一个集中、健壮的管理方案，并处理好快捷键冲突。

6.1 构建统一的快捷键映射表

将所有的快捷键逻辑集中到一个处理函数中，使用清晰的映射表，便于维护和扩展。

const KEYBOARD_SHORTCUTS = { 'Space': { action: () => togglePlayPause(), description: '播放/暂停', preventDefault: true }, 'ArrowLeft': { action: () => { videoPlayer.currentTime -= SKIP_TIME; }, description: '快退10秒', preventDefault: true }, 'ArrowRight': { action: () => { videoPlayer.currentTime += SKIP_TIME; }, description: '快进10秒', preventDefault: true }, 'ArrowUp': { action: () => { videoPlayer.volume = Math.min(1, videoPlayer.volume + 0.05); }, description: '增加音量', preventDefault: true }, 'ArrowDown': { action: () => { videoPlayer.volume = Math.max(0, videoPlayer.volume - 0.05); }, description: '降低音量', preventDefault: true }, 'KeyM': { action: () => muteBtn.click(), description: '静音/取消静音', preventDefault: true }, 'KeyF': { action: () => toggleFullscreen(), description: '切换全屏', preventDefault: true }, 'Digit0': { action: () => { videoPlayer.currentTime = 0; }, description: '跳转到开头', preventDefault: true }, 'Digit9': { action: () => { videoPlayer.currentTime = videoPlayer.duration; }, description: '跳转到结尾', preventDefault: true }, }; document.addEventListener('keydown', (event) => { // 1. 排除在可输入元素内触发 if (event.target.matches('input, textarea, [contenteditable="true"]')) { return; } // 2. 查找对应的快捷键配置 const shortcut = KEYBOARD_SHORTCUTS[event.code]; if (shortcut) { // 3. 执行阻止默认行为（如果需要） if (shortcut.preventDefault) { event.preventDefault(); } // 4. 执行动作 shortcut.action(); // 可选：给用户一个轻微的视觉反馈，比如在角落显示“⏸ 已暂停” showShortcutHint(shortcut.description); } });

6.2 处理与浏览器及系统快捷键的冲突

有些快捷键是浏览器或操作系统保留的（如Ctrl+R刷新，Ctrl+T新建标签页）。我们的播放器快捷键不应该覆盖这些。上面的代码通过检查event.code并只处理我们定义的键，已经部分避免了冲突。但对于Ctrl、Alt、Shift组合键，需要额外小心。

通常，媒体播放器会避免使用Ctrl和Alt修饰键，以免与浏览器快捷键冲突。Shift键有时会用于增强功能（如Shift+ArrowLeft快退更多）。如果你需要支持组合键，可以检查event.ctrlKey、event.altKey、event.shiftKey属性。

// 例如，支持 Shift+左右键进行更大步进的跳转 if (event.code === 'ArrowLeft' && event.shiftKey) { event.preventDefault(); videoPlayer.currentTime -= SKIP_TIME * 3; // 快退30秒 return; }

6.3 提供快捷键帮助面板

对于普通用户，快捷键是隐藏功能。一个好的做法是提供一个帮助面板（通常通过按?键触发），列出所有可用的快捷键及其功能。这能极大提升高级用户的体验。

KEYBOARD_SHORTCUTS['Slash'] = { // 通常“?”键的code是“Slash”，需要配合Shift action: () => toggleHelpPanel(), description: '显示/隐藏快捷键帮助', preventDefault: true }; // 在keydown事件处理中增加对Shift+Slash（即?）的判断 if (event.code === 'Slash' && event.shiftKey) { event.preventDefault(); toggleHelpPanel(); return; }

7. 状态反馈与用户体验打磨

功能实现后，细节决定成败。播放器的状态反馈需要及时、准确、无干扰。

7.1 缓冲状态的显示

当网络速度跟不上播放速度时，视频会缓冲。告诉用户正在加载，而不是卡住，能缓解焦虑。我们可以监听<video>的waiting（开始等待）和playing（结束等待）事件，并配合buffered属性来显示缓冲进度。

const bufferingIndicator = document.getElementById('bufferingIndicator'); // 一个旋转的加载图标 const bufferBar = document.getElementById('bufferBar'); // 进度条下方另一条表示已缓冲区域的条 videoPlayer.addEventListener('waiting', () => { bufferingIndicator.style.display = 'block'; }); videoPlayer.addEventListener('playing', () => { bufferingIndicator.style.display = 'none'; }); // 定期或在timeupdate中更新缓冲进度 function updateBufferDisplay() { if (videoPlayer.buffered.length > 0) { const bufferedEnd = videoPlayer.buffered.end(videoPlayer.buffered.length - 1); const bufferPercentage = (bufferedEnd / videoPlayer.duration) * 100; bufferBar.style.width = `${bufferPercentage}%`; } } videoPlayer.addEventListener('progress', updateBufferDisplay); // progress事件在缓冲区间变化时触发

7.2 操作反馈与防抖

当用户点击按钮或按快捷键时，应立即给出反馈。对于按钮，可以添加一个轻微的点击动画（CSS:active伪类或简单的JS类切换）。对于音量、进度调整，数值变化要实时显示。

对于timeupdate这类高频率触发的事件，直接更新DOM可能引发性能问题。可以使用“防抖”或“节流”技术来限制更新频率。

let isUpdatingProgress = false; videoPlayer.addEventListener('timeupdate', () => { if (!isUpdatingProgress) { isUpdatingProgress = true; // 使用requestAnimationFrame来节流，使其与屏幕刷新率同步 requestAnimationFrame(() => { progressBar.value = videoPlayer.currentTime; currentTimeDisplay.textContent = formatTime(videoPlayer.currentTime); isUpdatingProgress = false; }); } });

7.3 错误处理与降级方案

网络错误、格式不支持、解码错误都可能发生。我们需要监听error事件并提供友好的提示。

videoPlayer.addEventListener('error', () => { // videoPlayer.error 属性包含了错误详情 switch(videoPlayer.error.code) { case MediaError.MEDIA_ERR_ABORTED: console.log('用户取消了加载'); break; case MediaError.MEDIA_ERR_NETWORK: showErrorMessage('网络错误，请检查连接'); break; case MediaError.MEDIA_ERR_DECODE: showErrorMessage('视频解码错误，文件可能已损坏'); break; case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED: showErrorMessage('不支持的视频格式或MIME类型'); break; default: showErrorMessage('无法加载视频'); } // 隐藏播放按钮，显示错误状态UI playPauseBtn.style.display = 'none'; });

一个健壮的播放器还应该有降级方案，比如提供不同清晰度的源（<source>标签），或者在HLS/DASH流播放失败时尝试切换到MP4回退。

8. 移动端触摸交互的特殊考量

在手机和平板上，没有鼠标悬停，也没有键盘。交互完全依赖于触摸。这意味着我们的控制栏设计需要调整。

8.1 控制栏的显示与隐藏

移动端通常采用“点击视频区域切换控制栏显示/隐藏”的模式，而不是桌面端的鼠标悬停。

playerContainer.addEventListener('click', (event) => { // 如果点击的是控制栏本身，不触发切换（防止事件冒泡导致控制栏刚显示就被隐藏） if (event.target.closest('.controls-bar')) { return; } toggleControls(); }); function toggleControls() { const isHidden = controlsBar.style.visibility === 'hidden'; if (isHidden) { showControls(); // 显示后，3秒自动隐藏 setTimeout(hideControls, 3000); } else { hideControls(); } }

8.2 进度拖拽与音量控制

移动端没有“鼠标拖动”，只有“触摸滑动”。对于进度条，我们需要监听touchstart,touchmove,touchend事件来模拟拖拽行为。同样，音量控制在小屏幕上可能被简化成一个按钮，点击后在屏幕一侧弹出垂直滑块，或者干脆取消滑块，只保留静音按钮。

8.3 防止全屏下的页面滚动

在移动端浏览器中，视频全屏时，手指上下滑动可能会触发页面的滚动（在iOS的“画中画”或某些浏览器全屏模式下）。我们需要在全屏时阻止触摸事件的默认行为。

playerContainer.addEventListener('touchmove', (event) => { if (document.fullscreenElement) { event.preventDefault(); // 在全屏时阻止滚动 } }, { passive: false }); // 注意：必须设置 passive: false 才能使用 preventDefault

注意：passive: false可能会影响滚动性能，请谨慎使用，并确保只在全屏状态下应用。

8.4 双击快进/快退

许多移动端播放器支持双击视频左侧区域快退，右侧区域快进。这可以通过在touchend事件中计算两次点击的时间间隔和位置来实现，逻辑类似于桌面端的“双击”事件，但要基于触摸点。

为播放器添加按键控制，是一个将静态播放功能转化为动态交互体验的过程。从最基本的播放暂停开始，到进度控制、音量调节、全屏切换，再到键盘快捷键的集成和移动端适配，每一步都围绕着“如何让用户更自如地控制内容”这一核心目标。在这个过程中，我最大的体会是，可靠性比炫酷的功能更重要。一个在任何情况下（网络波动、频繁操作、跨平台）都能正确响应、状态同步无误的播放器，远比一个功能繁多但bug频出的播放器来得有价值。在实现时，务必多思考边界情况：进度拖到尽头怎么办？音量调到0和静音有什么区别？全屏API调用失败如何降级？把这些细节处理好，你的播放器才能真正称得上“好用”。