如果像 youtube 这样使用空格键进行交互，是否暂停 HTML5 视频？

Question

我正在使用 "vanilla" javascript :) 我正在尝试复制 youtube 在按下空格键时暂停视频的方法。如果事件绑定到 window 而不是视频，我可以让视频暂停，这是我的代码。

window.addEventListener("keyup", function(evt) {
     if (evt.keyCode === 32) {
        if (video.paused) {
          video.play(); 
        }
        else { 
          video.pause(); 
        } 
    }
 });

与上面的代码一样，使用 window 可以，但是如果我将 window 更改为 video 即使我已经与视频播放器互动，它也不再工作了。必要性原因：如果用户正在观看视频并想发表评论，则每次他们按下空格键时，视频都会开始并一遍又一遍地暂停。所以我只需要它在用户与视频播放器交互并且没有点击其他任何地方（如 youtube）时暂停或开始。非常感谢。

编辑：注意到 youtube 使用 Tabindex（以前从未使用过）来使控件可聚焦，所以这与它有关吗？这只是控件，而不是实际的屏幕。

Answer 1

设置标志

要扩展问题中的评论，而不是设置一个标志来指示对评论的关注，您可以设置一个标志来指示对视频的关注。

var focused_vid; // Used to figure out whether the video is focused on.

您在点击视频和加载页面时将此标志设置为 true，并在点击页面上的元素时设置为 false video.I 您正在使用 "vanilla" JavaScript，所以下面是一个脏版本，可能适用于所有浏览器，也可能不适用于所有浏览器，但它显示了总体思路：

<script type="text/javascript">
    var focused_vid;

    document.body.onclick = function(){
       // Get the top-most element that triggered this.
       var clicked_element = event.target;

       // If the video was clicked, we will set the flag to true.
       if(clicked_element.id != "video_id"){
         focused_vid = false;
       } else {
         focused_vid = true;
       }         
    }
</script>

然后稍微修改一下你的代码：

window.addEventListener("keyup", function(evt) {
     if (evt.keyCode === 32 && focused_vid) {
        if (video.paused) {
          video.play(); 
        }
        else { 
          video.pause(); 
        } 
    }
 });

注意事项

如果 javascript 在 body 元素之前加载，您将收到类似 "cannot receive ID of null" 的错误，或者无法将元素添加到 null。如果你得到这个，只需确保 JavaScript 在页面加载后执行 onload event.

Answer 2

这是您想要的代码。

$(function(){
    var videoID=$('#videoID')[0];
$(videoID).hover(function() {
    this.focus();
}).keydown(function(e) {
    console.log(e.keyCode);
       if(e.keyCode === 32){
           if(videoID.paused) {
               videoID.play(); 
           } else {
               videoID.pause(); 
           }
           return false;
       }
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<video width="400" controls id="videoID">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
</video>

如果像 youtube 这样使用空格键进行交互，是否暂停 HTML5 视频？

Pause HTML5 video if it was interacted with using spacebar like youtube?

html

javascript

video