title: Pressing spacebar do not toggle video play or pause
body: <p>I'm trying to set rewrite some shortcut function for <code>video</code>. Everything works fine except when pressing spacebar. Here's my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let video = document.getElementById("video")
  video.addEventListener("keydown", (e) =&gt; {
    if (e.which == 32 || e.which == 80) {
      e.preventDefault();
      e.stopPropagation();
      video.paused ? video.play() : video.pause();
      return false;
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;video id="video" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" width="300" controls&gt;&lt;/video&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here I use <code>spacebar</code> and <code>P</code> to toggle play and pause. Using <code>spacebar</code> somehow toggled two times while using <code>P</code> not.</p>
  <p>I try adding event listener of <code>keyup</code> and <code>keypress</code> to reject the <code>spacebar</code> input. But It doesn't work too.</p>
  <p>Is there anything about the HTML5 Video I am missing?</p>