如果使用空格键与youtube互动，暂停HTML5视频？

我正在使用“香草”JavaScript :)我试图复制YouTube空间栏按下时暂停视频的方法。如果事件绑定到窗口而不是视频，我可以让视频暂停，这里是我的代码。如果使用空格键与youtube互动，暂停HTML5视频？

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

如上面的代码，使用窗口工作，但如果我改变窗口到视频它不工作了，即使我已经与视频播放器互动。必要性理由：如果用户正在观看视频并想发表评论，每次按下空格键，视频就会开始播放，并一次又一次地停顿。所以我需要它只是暂停或开始，如果用户已与视频播放器交互，而不是在其他任何地方点击，如youtube。非常感谢。

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

来源

2015-02-23 Darius

你可以设置一个标志，如果焦点在评论框，禁止播放/暂停切换，但是当焦点在它的工作原理是必要的窗口别处？ – Offbeatmammal 2015-02-23 06:05:30

是的，这是可能的，但对于这种情况下的问题是，用户将无法使用空格键向下滚动，这只会在用户输入某种输入时受益。 – Darius 2015-02-23 06:07:31

这里是你想要的代码。

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

来源

2015-02-23 07:47:59

设置一个标志

要在你的问题关闭评论的延伸，而不是设置一个标志指示重点的评论，你可以设置一个标志用于指示专注于视频。

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

您设置该标志被点击时视频和页面加载，并设置为假为真时，点击页面上的元素是不是video.I了解您正在使用“香草”的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元素之前加载，您将收到类似“无法接收ID为null”的错误，或者无法将元素添加到null。如果你得到这个，只需确保在页面加载onload event后执行JavaScript。

来源

2015-02-23 06:35:18

如果使用空格键与youtube互动，暂停HTML5视频？

回答

相关问题