HTML5 видео оверлейная архитектура

Question

Я хочу создать html5-страницу с видео и наложением изображений, то есть с изображением, которое отображается поверх видео. В некоторых случаях это наложение также будет текстовым. Есть ли хороший способ достичь этого?

Пока я пытался использовать тег <video> для хранения видео и рисовать изображение на холсте, который я помещаю поверх видео. Чтобы показать это, мне нужно переместить видео обратно, установив z-index на -1, но тогда управление видео не будет работать. Может быть, есть решение, чтобы снова заставить работать элементы управления, но я не уверен, что я на правильном пути ... Я предполагаю, что есть рекомендуемое решение для этого. Возможно, используя холст, который я заполняю как видео, так и наложением. Или что-то совершенно другое?

Примечание : я отредактировал вопрос, поскольку он изначально указывал в неправильном направлении относительно того, что здесь важно. Я хотел бы иметь решение, которое позволяет без проблем работать в полноэкранном режиме и во всем, но основное внимание уделяется: Как правильно разместить элементы поверх видео - в html5?

Answer 1

Достичь того, что вы хотите, и поддерживать его в готовом полноэкранном режиме, проблематично. Полноэкранная поддержка в видео html5 является необязательной и никоим образом не доступна через API ( См. Обсуждение здесь ). Даже если вы используете встроенный полноэкранный режим, вы не сможете внедрить содержимое над ним, если только вы не захотите изменить сам видеофайл на сервере во время выполнения.

однако, что вы можете сделать (и то, что я делал в аналогичном случае), это реализовать свои собственные элементы управления видео, запускать тег видео без встроенных элементов управления и получать удовольствие от наложения как можно большего количества слоев поверх ваше сейчас не в фокусе видео.

Что касается полноэкранного режима, вы можете реализовать своего рода полноэкранный фон, подобный тому, что был сделан здесь

edit : Проблема, возникающая при размещении холста над видео, заключается в блокировке встроенных элементов управления HTML-видео. Я предлагаю реализовать ваши собственные элементы управления видео (воспроизведение, пауза, громкость, поиск и т. Д.), Используя html и javascript, вызывая API видео. Вы можете даже сделать его красивее, чем уродливый встроенный элемент управления. Ваши элементы управления могут содержаться в слое над наложенным холстом, и, таким образом, будет отображаться видео, над ним наложение и над ним ваш набор элементов управления.

Вы можете прочитать немного о реализации своих собственных элементов управления здесь или здесь И в любом случае это может быть намного лучше, чем это.