Как встроить видео с настроенным плеером и автоматическим транскодированием? - PullRequest
Новая
       20

Как встроить видео с настроенным плеером и автоматическим транскодированием?

0 голосов
/ 11 июня 2019

Мне нужно встроить видео в мое веб-приложение и предъявлять следующие требования:

  • Видео необходимо автоматически перекодировать в разные разрешения
  • Скорость воспроизведения должна быть выбрана
  • Требуется для работы на мобильном телефоне
  • Мне нужно изменить плеер
  • Видео должно быть загружено не разработчиками программного обеспечения => пользовательский интерфейс для загрузки видео и управления

Проблема с встраиванием видео с платформы заключается в том, что для этого обычно нужно использовать iframe.Однако, если iframe из другого домена, у меня нет доступа к его содержимому, и поэтому я не могу изменить проигрыватель, потому что не могу получить доступ к элементу видео, находящемуся в iframe.

Изменения, которые янеобходимо сделать следующее:

  • Поместить маркеры в определенные контрольные точки на временной шкале
  • Приостановить воспроизведение видео в контрольных точках
  • Показать некоторую дополнительную информацию под видео, когдадостигнута ключевая точка

Единственное возможное решение, которое я нашел до сих пор, - это самостоятельно разместить платформу на поддомене моего домена веб-приложений и настроить код этой платформы для установки document.domain.собственность на домен моего веб-приложения.Таким образом я смогу получить доступ к тегу видео, который находится внутри iframe, предоставляемого платформой.Что мне не нравится в этом решении, так это то, что я предпочитаю не размещать платформу самостоятельно, и было бы неплохо, если бы мне не нужно было изменять платформу.

1 Ответ

0 голосов
/ 11 июня 2019

Вы можете использовать тег видео, предоставленный HTML5. 

<video>
<src = "your src here">
</video>

сначала создайте видео в соответствии со всеми разрешениями и сохраните его затем измените src для разных типов разрешений, используя javascript web API 

var videoplayer = document.getElementsByTagName("video")[0];

videoplayer.src = "new src here according to the resolution"

Скорость воспроизведения также можно изменить, используя тот же способ 

videoplayer.playbackRate = "value according to the user"

Здесь - пример просмотра изменения видеоплеера.

Вы можете определить скорость пользователя с помощью javascript и соответствующим образом отобразить источник видео.

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

...