按下键时如何使用 JavaScript 开始视频？答案

【问题标题】：How to start a video with JavaScript when a key is pressed?按下键时如何使用 JavaScript 开始视频？
【发布时间】：2021-02-04 01:13:21
【问题描述】：

如果按下键盘上的“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链接放错地方了？还是我有代码错误？

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

【问题讨论】：

用video.play();代替return video。阅读有关video API here 的更多信息。

标签： javascript html html5-video

【解决方案1】：

使用video.play(); 代替return video。阅读有关video API here 的更多信息。

另外，请使用event.key 而不是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>

【讨论】：

【解决方案2】：

在事件回调中返回视频是没有用的；什么都不会做。相反，调用它的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>

【讨论】：