Как встроить плеер в браузер

Обновлено: 06.07.2024

В этом уроке вы узнаете, как встроить видео в документ HTML.

Встраивание видео в документ HTML

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

В этой главе мы продемонстрируем некоторые из многих способов добавления видео на веб-страницы, от последнего элемента HTML5 до популярных видео на YouTube.

Использование элемента видео HTML5

Новый элемент HTML5 обеспечивает стандартный способ встраивания видео в веб-страницы. Тем не менее, элемент видео относительно новый, но он работает в большинстве современных веб-браузеров.

В следующем примере просто вставляется видео в HTML-документ с использованием набора элементов управления браузера по умолчанию, причем один источник определяется атрибутом src.

Пример

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

Пример

Использование элемента объекта

Это видео будет воспроизводиться только в браузерах или приложениях, поддерживающих Flash.

Предупреждение. Этот элемент широко не поддерживается и во многом зависит от типа встраиваемого объекта. Другие методы могут быть лучшим выбором во многих случаях. Устройство iPad и iPhone не может отображать Flash-видео.

Использование встроенного элемента

Элемент используется для встраивания мультимедийного содержимого в HTML-документ.

Следующий фрагмент кода встраивает Flash-видео в веб-страницу.

Пример

Предупреждение. Тем не менее, этот элемент очень хорошо поддерживается в современных веб-браузерах, а также определен как стандартный в HTML5, но ваше видео может не воспроизводиться из-за отсутствия поддержки браузером Flash или отсутствия подключаемых модулей.

Встраивание видео YouTube

Это самый простой и популярный способ встраивания видеофайлов в веб-страницы. Просто загрузите видео на YouTube и вставьте код HTML, чтобы отобразить это видео на своей веб-странице.

Вот живой пример с последующим объяснением всего процесса:

Шаг 1. Загрузите видео

Перейдите на страницу загрузки видео YouTube и следуйте инструкциям по загрузке видео.

Шаг 2. Создание HTML-кода для встраивания видео

Когда вы откроете загруженное видео на YouTube, вы увидите что-то вроде следующего рисунка в нижней части видео. Найдите и откройте загруженное видео на YouTube. Теперь найдите кнопку «Поделиться», которая расположена чуть ниже видео, как показано на рисунке.

Когда вы нажмете кнопку "Поделиться", откроется панель "Поделиться" с дополнительными кнопками. Теперь нажмите кнопку «Встроить», он сгенерирует HTML-код для непосредственного встраивания видео на веб-страницы. Просто скопируйте и вставьте этот код в свой HTML-документ, где вы хотите отобразить видео, и все готово. По умолчанию видео встроено в iframe.

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

В следующем примере просто встраивается видео с YouTube. Давайте попробуем:

Коладе Крис

До появления HTML 5 веб-разработчикам приходилось вставлять видео на веб-страницу с помощью подключаемого модуля, такого как Adobe Flash Player.

Сегодня вы можете легко вставлять видео в документ HTML с помощью этого тега.

В этой статье мы увидим, как этот тег работает в HTML.

Содержание

Основной синтаксис

Как и тег, принимает атрибут src, с помощью которого нужно указать источник видео.

По умолчанию оно отображается в браузере как изображение:

Этот CSS центрирует все на веб-странице и меняет цвет фона:

Кроме того, для тега можно указать несколько источников видео. Этот тег также должен иметь собственный атрибут src.

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

Атрибуты тега

Тег поддерживает глобальные атрибуты, такие как id , class , style и т. д.

Если вам интересно, что такое глобальные атрибуты, это атрибуты, поддерживаемые всеми тегами HTML.

Конкретные атрибуты, поддерживаемые тегом, включают src , poster , elements , loop , autoplay , width , height , muted , preload и другие.

Атрибут src

Атрибут src используется для указания источника видео. Это может быть относительный путь к видео на вашем локальном компьютере или ссылка на видео из Интернета.

Это необязательно, поскольку вместо него можно использовать тег.

Атрибут плаката

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

Вместо изображения первой сцены видео браузер покажет это изображение:

Атрибут управления

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

Атрибут цикла

С помощью атрибута цикла вы можете автоматически повторять видео. То есть заставлять его воспроизводиться снова каждый раз, когда оно останавливается.

Атрибут автовоспроизведения

Атрибут autoplay позволяет автоматически запускать воспроизведение видео сразу после загрузки страницы.

Атрибуты ширины и высоты

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

Приглушенный атрибут

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

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

Атрибут предварительной загрузки

С помощью атрибута preload вы можете подсказать браузеру, следует ли загружать видео при загрузке страницы.

Этот атрибут имеет решающее значение для взаимодействия с пользователем.

С атрибутом предварительной загрузки можно использовать 3 значения:

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

auto: указывает, что видео должно загружаться, даже если пользователь не нажимает кнопку воспроизведения

метаданные: указывает, что браузер должен собирать такие метаданные, как длина, размер, продолжительность и т. д.

Заключение

Из этой статьи вы узнали о теге HTML5 и его атрибутах, чтобы правильно использовать его в своих проектах.

Поскольку звук является важной частью всего видео, вы также можете использовать тег для размещения аудиофайла на веб-странице. Но в большинстве случаев вы должны использовать тег для этой цели для надлежащего взаимодействия с пользователем.

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

Коладе Крис

Веб-разработчик и технический писатель, специализирующийся на интерфейсных технологиях.

Если вы дочитали до этого места, отправьте твит автору, чтобы показать, что вам не все равно. Твитнуть спасибо

Научитесь программировать бесплатно. Учебная программа freeCodeCamp с открытым исходным кодом помогла более чем 40 000 человек получить работу в качестве разработчиков. Начать

freeCodeCamp – это поддерживаемая донорами некоммерческая организация, освобожденная от налогов в соответствии со статьей 501(c)(3) (идентификационный номер федерального налогоплательщика США: 82-0779546)

Наша миссия: помочь людям научиться программировать бесплатно. Мы достигаем этого, создавая тысячи видеороликов, статей и интерактивных уроков по кодированию — все они находятся в свободном доступе. У нас также есть тысячи учебных групп freeCodeCamp по всему миру.

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

Пошаговая инструкция по встраиванию плеера в браузер

Вариант 1. Встроить проигрыватель

<р>2. Используя пример «Двусторонняя потоковая передача», опубликуйте видеопоток с именем «stream1» (подробнее об использовании двусторонней потоковой передачи для публикации потока здесь)

<р>3. В новой вкладке браузера откройте пример Embed Player. На открывшейся странице укажите название вашего видеопотока в поле «Stream» и нажмите кнопку «Test Now». Затем нажмите кнопку «Копировать в буфер обмена», чтобы скопировать код проигрывателя.

<р>4. Чтобы встроить плеер на свою веб-страницу, создайте пустой файл «embed-player-min.html». Добавьте в файл элемент div и вставьте ранее скопированный код.

Список файла embed-player-min.html

<р>5. Откройте созданный HTML-файл в браузере и нажмите кнопку «Воспроизвести» в плеере

<р>6. Видеопоток, который вы опубликовали в примере «Двусторонняя трансляция», воспроизводится в плеере

Вариант 2. Минимальный плеер

Чтобы встроить проигрыватель на нашу веб-страницу, давайте создадим два пустых файла: player-min.html и player-min.js. Эти файлы будут содержать минимальный код для работы нашего плеера.

Давайте проанализируем содержимое файлов

Поместите необходимые элементы в player-min.html:

<р>1. Импортируйте скрипт основного API:

<р>2. Импортируйте скрипт плеера:

<р>3. Добавьте стили для правильного отображения видео в элементах div:

<р>4. Инициализировать API при загрузке страницы:

<р>5. Добавьте элемент div, в который будет добавлено видео для проигрывателя:

<р>6. Добавьте кнопку «Воспроизвести», нажатие которой инициирует подключение к серверу и запустит воспроизведение видео:

JavaScript

<р>1. Мы создаем константы и переменные для состояния работы сервера и сеанса WebSocket. Для работы с браузером iOS Safari нам понадобится прелоадер, который можно скачать с GitHub:

<р>4. Затем создайте поток session.createStream() и передайте имя потока «stream1» и элемент HTML «play» в качестве параметров:

В результате мы получаем минимальный проигрыватель, представляющий собой div-блок с рамкой и проигрывающий заданный поток.

Скачать минимальные примеры

<р>1. Скачать архив.

<р>2. Распакуйте файлы примеров на свой веб-сервер.

Каталог по умолчанию для Apache:

или ознакомьтесь с документацией для вашего веб-сервера.

<р>3. Запустите минимальный пример в браузере, используя ссылку типа

Системные требования: Linux x86_64, 1-ядерный ЦП, 2 Гб ОЗУ, Java

До появления HTML5 для воспроизведения видео на веб-странице требовалось использовать подключаемый модуль, например Adobe Flash Player. С появлением HTML5 теперь вы можете размещать видео прямо на самой странице.

Это позволяет воспроизводить видео на страницах, предназначенных для мобильных устройств, поскольку такие плагины, как Adobe Flash Player, не работают на Android и iOS.

Элемент HTML используется для встраивания видео в веб-документы. Он может содержать один или несколько источников видео, представленных с помощью атрибута src или элемента source.

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

Элемент поддерживается всеми современными браузерами. Однако не все браузеры поддерживают один и тот же формат видеофайлов. Файлы MP4 являются наиболее распространенным форматом, а другие форматы, такие как WebM и Ogg, поддерживаются в Chrome, Firefox и Opera.

Чтобы ваше видео воспроизводилось в большинстве браузеров, рекомендуется закодировать его в форматах Ogg и MP4 и включить оба в элемент, как в примере выше. Браузеры будут использовать первый распознанный формат.

Если по какой-либо причине браузер не распознает какой-либо из форматов, вместо этого будет отображаться текст "Ваш браузер не поддерживает элемент видео. Пожалуйста, обновите его до последней версии".

Возможно, вы также заметили в теге элементы управления. Этот элемент содержит множество полезных атрибутов для настройки воспроизведения.

атрибуты

элементы управления

Атрибут Controls определяет, будут ли отображаться такие элементы управления, как кнопка воспроизведения/паузы или ползунок громкости.

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

автовоспроизведение

"autoplay" может иметь значение true или false. Вы устанавливаете его в true, добавляя его в тег, если он отсутствует в теге, он устанавливается в false. Если установлено значение true, видео начнет воспроизводиться, как только будет буферизовано достаточно видео, чтобы его можно было воспроизвести. Многие люди считают автоматическое воспроизведение видео разрушительным или раздражающим. Так что используйте эту функцию экономно. Также обратите внимание, что некоторые мобильные браузеры, например Safari для iOS, игнорируют этот атрибут.

Это еще один логический атрибут. Включив автовоспроизведение в тег, встроенное видео начнет воспроизводиться, как только будет достаточно буферизовано.

Имейте в виду, что многие люди считают автоматическое воспроизведение видео раздражающим или раздражающим, поэтому используйте эту функцию с осторожностью. Также обратите внимание, что некоторые мобильные браузеры, такие как Safari для iOS, полностью игнорируют этот атрибут.

плакат

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

Видео может стоить дорого

Хотя добавить видео на свою страницу стало проще, чем когда-либо, часто лучше загружать видео на такие сервисы, как YouTube, Vimeo или Wistia, и вместо этого встраивать их код. Это связано с тем, что показ видео может быть дорогим как для вас с точки зрения затрат на сервер, так и для ваших зрителей, если у них ограниченные тарифные планы.

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

И с этим, идите вперед и вставляйте видео сколько душе угодно. Или нет – решать вам.

Если эта статья была вам полезна, отправьте твит .

Читайте также: