如何在按下某个键时以 JavaScript 开始播放视频？

Question

我试图在按下键盘上的 'm' 键时触发视频播放。到目前为止，我已设法正确放置视频，但无法使 JavaScript 代码正常工作。

var video = document.getElementById('Experiment04');
document.addEventListener('keydown', (e) => {
  if (e.keycode === 77) {
    return video
  }
})

<!doctype html>
<html>

<head>
  <title></title>

  <style type="text/css">
    #Experiment04 {
      position: absolute;
      top: 0;
      left: 0;
      min-height: 80%;
      min-width: 80%;
      z-index: 0;
      mix-blend-mode: screen;
    }
  </style>

</head>

<body>

  <!--Experiment04-->


  <video id="Experiment04" preload="auto" autoplay="true" loop="loop">
                <source src="Experiment 04.mp4" type="video/mp4">
                Video not supported
                
            </video>

  <script src="Untitled-3.js"></script>

</body>

</html>

我是否将 html 代码中的 js link 放在了错误的位置？还是我有代码错误？

（如果您还不知道我对这一切真的很陌生。将不胜感激任何类型的帮助！）

Answer 1

在事件回调中return视频没用；什么也做不了。相反，调用它的 play() 方法：

    var video = document.getElementById('Experiment04');   
    document.addEventListener('keydown', (e) => {
        if (e.keycode === 77) {
            video.play();
        }
    })

    <!doctype html>
    <html>
    <head>
    <title></title>
    
    <style type="text/css">
                
                 #Experiment04 {
                    position: absolute;
                    top: 0;
                    left: 0;
                    min-height: 80%;
                    min-width: 80%;
                    z-index: 0;
                    mix-blend-mode: screen;
                }
        </style>
    
    </head>
    <body>
        
         <!--Experiment04-->
    
    
            <video id="Experiment04" preload="auto" autoplay="true" loop="loop">
                <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/9/9e/CJK_Stroke_order_intergrated_into_HTML5_webpage.webm/CJK_Stroke_order_intergrated_into_HTML5_webpage.webm.480p.vp9.webm" type="video/webm">
                Video not supported
                
            </video>
        
        <script src="Untitled-3.js"></script>
        
    </body>
    </html>

Answer 2

而不是 return video，使用 video.play();。详细了解 video API here.

此外，请使用 event.key instead of event.keyCode（顺便说一句，您的大写字母不正确）因为 .keyCode 已被弃用。

var video = document.getElementById('Experiment04');   
document.addEventListener('keydown', (e) => {
   if(e.key === "m") {
     video.play();
   }
});

<!doctype html>
<html>
<head>
  <title>Video Test</title>
  <style>              
     #Experiment04 {
       position: absolute;
       top: 0;
       left: 0;
       height:300px;
       min-height: 50%;
       min-width: 50%;
       z-index: 0;
       mix-blend-mode: screen;
    }
  </style>   
</head>
<body>
  <video id="Experiment04" preload="auto" autoplay="true" loop="loop">
     <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
      Video not supported
  </video>
  <script src="Untitled-3.js"></script>    
</body>
</html>

如何在按下某个键时以 JavaScript 开始播放视频？

How to start a video with JavaScript when a key is pressed?

html

javascript

html5-video