Question

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

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

与上面的代码一样，使用窗口有效，但如果我将窗口更改为视频，即使我不再使用视频与视频播放器进行了互动。必要性原因：如果用户正在观看视频并希望发表评论，则每次按空格键时视频都会开始并一次又一次地暂停。因此，如果用户与视频播放器进行了互动而未点击其他任何地方（例如youtube），我只需暂停或启动它。非常感谢。

编辑：注意youtube使用Tabindex（之前从未使用过），使控件可以调焦，这与它有什么关系？这只是控制，而不是实际的屏幕。

Answer 1

设置标记

要延伸问题中的注释，而不是设置标记以指示注释的焦点，您可以设置一个标记来指示对视频的关注。

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

单击视频并加载页面时，将此标志设置为true;单击页面上不是视频的元素时，将此标志设置为false。我知道您正在使用＆＃34 ;香草＆＃34; 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元素之前加载，您将收到错误，例如＆＃34;无法接收null＆＃34;的ID，或者无法将元素添加到null。如果你得到这个，只需确保在页面加载onload event后执行JavaScript。

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视频吗？

2 个答案: