Как показать наложение на Plyr (видеоплеер html5) в полноэкранном режиме? - PullRequest
Новая
       11

Как показать наложение на Plyr (видеоплеер html5) в полноэкранном режиме?

0 голосов
/ 10 октября 2018

У меня есть приложение, которое воспроизводит SVG с наложением тега vido HTMl5 (с помощью проигрывателя Plyr HTML5).Это прекрасно работает до тех пор, пока пользователь не нажмет опцию «Войти в полноэкранный режим».Это работало при использовании предыдущего несуществующего игрока.Я бы получал уведомления и соответственно корректировал свое наложение, но это просто не работает с Plyr.

Я думаю, что происходит, когда Plyr использует полноэкранный API браузеров (в частности, Chrome), чтобы выполнить часть этой работы, котораяисключает что-либо еще в полноэкранном режиме и сверху (через z-index и т. д.).

Я бы хотел выяснить, как выполнять наложения в полноэкранном режиме.Это может включать в себя: 1) что-то, что я пропустил или неправильно понял с Plyr, или 2) вынудил Plyr перейти в резервный режим (есть идеи, как это сделать?)

Ищите несколько хороших советов о том, как этого добиться.

1 Ответ

0 голосов
/ 31 октября 2018

Хорошо, немного, потом я забыл об этих вопросах, поэтому я отвечу на это тем, что я сделал. 

let plyrVideoWrapper = document.getElementsByClassName('plyr__video_wrapper')
if (plyrVideoWrapper) {
    let myPluginCollection = document.getElementsByClassName('svg-embedded')
    if (myPluginCollection) {
        plyrVideoWrapper[0].appendChild(myPluginCollection[0])
    }
}

Это в основном перемещает мой плагин наложения в область plyr, котораяимеет тег <video>.Я использую следующий CSS для моего 'svg-embedded': 

.svg-embedded {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

Все работает как положено.

...