暂停HTML5视频，如果它是使用空格键像youtube互动

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

本文关键字：空格键 youtube 互动 视频 HTML5 如果 暂停      更新时间：2024-04-17

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

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

与上面的代码一样，使用窗口是有效的，但如果我将窗更改为视频，即使我与视频播放器进行了交互，它也不再有效。必要的原因：如果用户正在观看视频并想留下评论，每次按下空格键时，视频都会开始并反复暂停。所以我只需要它暂停或启动，若用户已经和视频播放器互动，并没有点击其他地方，如youtube。谢谢。

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

这是您想要的代码。

$(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>

设置标志

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

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

当单击视频并加载页面时，您将此标志设置为true，而当单击页面上非视频的元素时，则将此标志设为false。我知道你使用的是"香草"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元素之前加载，您将收到类似"无法接收null的ID"或无法将元素添加到null的错误。如果您得到了这个，只需确保JavaScript在使用onload事件加载页面后执行即可。

相关文章：