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

Question

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

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

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

Нужны хорошие предложения о том, как этого добиться.

Answer 1

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

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;
}

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

Answer 2

Если вы используете Plyr с React, вот как вы реализуете решение @Hawkeye64.

• Реализуйте свой Overlay компонент и соединить с вашим video компонентный рендер:

    <Overlay />
    <video ref={innerRef} className="plyr" .../> 

• Использовать useEffect чтобы проверить, когда innerRef визуализирован и готов, и переместите ваш Overlay компонент видеообертки Plyr:

    useEffect(() => {
      if (innerRef.current) {
        const wrapper = document.getElementsByClassName("plyr__video-wrapper");
        if (wrapper) {
          const overlay = document.getElementById("my_overlay_id");
          wrapper[0].appendChild(overlay);
        }
      }
    }, [innerRef]);

Обязательно реализуйте id в вашем Overlay компонент, поэтому вы можете получить его с помощью getElementById, заменить my_overlay_id в коде выше.

Если вы хотите наложить на всю область видео, используйте приведенный ниже CSS в качестве отправной точки:

    .overlay {
      background-color: rgba(56, 3, 3, 0.66);
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
      position: absolute;
      z-index: 4;
    }

Answer 3

Лучшее и более правильное решение, если вы используете React, использует реагирующий портал следующим образом:

      
import { Portal } from 'react-portal';

...

<Portal node={(document && document.getElementsByClassName('plyr__controls')[0])}>
 Your overlay here...
</Portal>

если вы хотите, чтобы ваш оверлей был частью элементов управления, или если вы хотите, чтобы он всегда был виден:

      <Portal node={(document && document.getElementsByClassName('plyr__video-wrapper')[0])}>
 Your overlay here...
</Portal>