Пользователям нравятся медиа, особенно видео; они могут быть веселыми и познавательными. На мобильных устройствах видео может быть более простым способом получения информации, чем текст. Для удобства пользователя видео не должно превышать доступную пропускную способность. Пользователи должны иметь возможность использовать их независимо от того, на каком устройстве они их просматривают. Пользователям никогда не придется ждать загрузки мультимедиа. Никому не нравится, когда нажимают кнопку воспроизведения и ничего не происходит.
Вы, несомненно, смотрели видео на своем устройстве, а это значит, что ничто в последнем абзаце вас не удивляет. Теперь вам нужно научиться размещать видео или другой медиафайл на собственном сайте. Технические требования к добавлению мультимедиа должны соответствовать пользовательскому опыту.
Технические требования
- Версии медиафайла представлены в обычных веб-форматах, содержащих как аудио, так и видеопотоки.
- Разрешение соответствует устройствам ваших пользователей.
- Битрейт не перегружает пропускную способность сети ваших пользователей.
- Результат доступен для просмотра во всех основных браузерах с использованием соответствующих технологий.
- Файл зашифрован (необязательно).
Медиа- раздел этого веб-сайта поможет вам выполнить эти технические требования. Не волнуйтесь, если эти концепции все еще немного абстрактны. Мы будем объяснять их постепенно во всех статьях. В первом разделе вы узнаете об основных концепциях мультимедиа, затем о том, как добавлять мультимедиа в Интернет, во втором разделе и в последнем разделе о практических применениях с некоторыми передовыми методами использования мультимедиа в Интернете.
Показ видео в Интернете
Существует четыре подхода, которые вы можете использовать при отображении видео на сайте.
- Загрузите свои видео на провайдера медиахостинга, например YouTube или Vimeo . Эти варианты требуют, чтобы вы встроили их плееры на свой сайт.
- Базовое самостоятельное внедрение с использованием элементов HTML
<video>
и<audio>
. - Более полнофункциональное встраивание с использованием видеотеки, такой как Shaka Player , JW Player или Video.js .
- Создание собственного медиасервера и приложения для потоковой передачи.
Этот сайт в основном посвящен основам встраивания мультимедиа. Тем не менее, мы рассмотрим некоторые более сложные темы, которые помогут вам начать путь к созданию собственного приложения потоковой передачи мультимедиа. Попытка сделать это нетривиальна, поэтому мы создали Media PWA с автономной поддержкой, чтобы использовать его в качестве справочного материала, который должен показать вам, как этого можно достичь, и сколько усилий это требует. Приложение ни в коем случае не является готовым предложением или конкурентом таких сервисов, как YouTube или Vimeo, но оно станет отправной точкой для изучения чего-то сложного и нового.
Честно говоря, создание конкурента хостинговым медиа-сервисам потребует команды опытных инженеров и тысяч человеко-часов работы. Если ваша цель не состоит в том, чтобы выйти на этот рынок в качестве конкурента, вам лучше использовать один из других методов. Хорошо разбираться в технологии, и хотя вы не можете развернуть собственное приложение или видеоплеер, полезно исследовать и экспериментировать с новейшей поддержкой браузера или, по крайней мере, использовать одну из существующих видеобиблиотек.
Чему мы собираемся научиться
Медиаколлекция состоит из трех частей. В этом первом разделе мы предоставим концепции и необходимую информацию для добавления мультимедиа на ваш сайт. Сюда входит объяснение того, как собираются медиафайлы, основные сведения о приложениях, которые вам понадобятся для подготовки файлов к Интернету, а также концепции потоковой передачи. Во втором разделе объясняется, как подготовить файлы и преобразовать их в различные форматы и, при необходимости, добавить шифрование. В последнем разделе мы покажем вам, как встроить медиафайл в веб-страницу, обсудим лучшие практики автоматического воспроизведения, использование медиа-фреймворков, автономный режим видео и обеспечение доступа к вашим видео.
Нам предстоит многое обсудить, поэтому давайте начнем с основ работы с медиафайлами .