javascript - 当按下 "Picture in Picture"键时，jQuery 强制 html5 视频播放 "i"

Question

我可以使用 jquery(或 javascript)强制 html5 video 播放器以画中画 模式播放吗？(下图)

.

这是我使用 jquery 3.3.1(由 Google 托管)的个人网站。现在我设法使用 space 栏来播放/暂停。到目前为止，这是我的代码:

<video id="player">
   <!-- source -->
</video>
<script>
player = $('#player')[0];

var player = $('#player')[0];
$(window).keydown(function(e) {
    switch(e.which){
        case(32):
            if(player.paused){
                player.play();
            } else{
                player.pause();
            }
        break; 
    }
});
</script>

这是 CodePen 上的代码.

keydown 上的 i 键是 73

Answer 1

这是可能的，虽然很明显only in browsers which support PIP (在回答这个问题时，只有 Chrome 70 和 71)。

要让它工作，请在您的开关 中监听i 键。然后就可以在播放器上调用requestPictureInPicture()让播放器进入画中画模式。要在再次按下 i 时使切换起作用，您需要检查 document 的 pictureInPictureElement 属性。如果它返回 true，那么 PIP 模式已经在使用中，您可以通过调用 document.exitPictureInPicture() 来结束它，如下所示:

var player = $("#player")[0];

$(window).keydown(function(e) {
  switch (e.which) {
    case 32:
      player.paused ? player.play() : player.pause();
      break;
    case 73:
      if (player.requestPictureInPicture) { // feature detection to stop errors in unsupported browsers
        if (document.pictureInPictureElement) {
          document.exitPictureInPicture();
        } else {
          player.requestPictureInPicture();
        }
      }
      break;
  }
});

video {
  width: 450px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video id="player" controls>
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>

这里需要注意的是，在按下 i 后，焦点将转移到 PIP 窗口，因此再次按下 i 似乎什么都不做，直到您单击浏览器再次打开窗口以返回焦点，以便 keydown 监听器可以生效。