jQuery заставляет видео html5 воспроизводить «Картинка в картинке» при нажатии клавиши «i»

Question

Могу ли я использовать jquery (или javascript), чтобы заставить игрока html5 video играть в режиме picture in picture? (Изображение ниже)

.

Thisдля моего личного сайта, на котором я использую 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 .

Клавиша i на keydown равна 73

Answer 1

Это возможно, хотя, очевидно, только в браузерах, которые поддерживают PIP (на момент этого ответа это только Chrome 70 и 71).

Чтобы заставить его работать, прослушайте i введите ваш switch.Затем вы можете позвонить requestPictureInPicture() на плеер, чтобы он перешел в режим PIP.Чтобы переключение работало при повторном нажатии i , необходимо проверить свойство pictureInPictureElement document.Если он возвращает 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 мог вступить в силу.