如何在JavaScript自定义视频播放器中点击空格键控制视频播放/暂停且阻止页面滚动

这个问题很典型——浏览器默认会把空格键当作“向下翻页”的指令，你的代码虽然实现了视频的播放/暂停切换，但没有阻止浏览器的默认行为，所以才会出现按下空格时视频状态改变的同时页面还会滚动的情况。

只需要在处理Space键的逻辑里添加一行代码，阻止浏览器的默认动作即可：

window.onkeydown = vidCtrl;
function vidCtrl(e){
 const vid = document.querySelector('video')
 const key = e.code;
 if (key === 'ArrowLeft') {
  vid.currentTime -= 5;
  if (vid.currentTime < 0) {
   vid.pause();
   vid.currentTime = 0;
  }
 } else if (key === 'ArrowRight') {
  vid.currentTime += 5;
  if (vid.currentTime > vid.duration) {
   vid.pause();
   vid.currentTime = 0;
  }
 } else if (key === 'Space') {
  // 阻止浏览器默认的滚动行为
  e.preventDefault();
  
  if (vid.paused || vid.ended) {
   vid.play();
  } else {
   vid.pause();
  }
 }
}

补充优化建议 #

如果页面可能存在没有视频元素的情况，建议先判断视频是否存在，避免影响正常的空格滚动功能：

else if (key === 'Space') {
  // 如果未找到视频元素，直接返回，保留默认行为
  if (!vid) return;
  
  e.preventDefault();
  if (vid.paused || vid.ended) {
   vid.play();
  } else {
   vid.pause();
  }
 }

这样修改后，按下空格键就只会控制视频的播放/暂停，页面不会再触发滚动了。

内容的提问来源于stack exchange，提问作者Soliman