Как загрузить видео в html файл

Обновлено: 05.07.2024

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

Тогда ничего не поделаешь, придется осваивать «дзен» работы с видеофайлами при помощи современных механизмов веб-языков. Именно поэтому тема данной публикации: «Как добавить видео на сайт html».

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

Форматы видеофайлов

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

Наиболее распространенные форматы вам, вероятнее всего, известны. Это avi, asf, mov, mp4 (MPEG4), ogg и другие.

Начнем с AVI (Audio-Video Interleaved). Этот формат был разработан корпорацией Microsoft и представляет собой контейнер, в который можно вложить видео, сжатое любым стандартом. Храниться может как один поток (например, только аудио или только видео), так и несколько.

Правда существует ограничение: звуковых дорожек может быть много, а вот видеодорожка только одна. Думаю, с разбором avi проблем не возникнет, так как у каждого на компьютере есть фильм или клип с расширением .avi.

ASF разработан все той же корпорацией Microsoft и работает с потоковыми документами типа видео и аудио. Преимущество ASF состоит в том, что он не требует от вас установки определенных кодеков. Таким образом, он указывает структуру потока переносимых данных, но не ограничивает в выборе метода кодирования видеоинформации. Может иметь расширения: .asf, .wma и .wmv.

Контейнер MOV был разработан второй большой мировой корпорацией Apple специально для их приложения QuickTime. Хоть формат и рассчитан на операционную систему Mac OS X, он отлично воспроизводится и в Windows.

Контейнер чрезвычайно удобен для редактирования лежащих в нем файлов, а также может в себе хранить не только несколько дорожек аудио- и видеоинформации, а еще и субтитры, панорамы и анимации. Среди расширений можно встретить .QT или .MOV.

Mp4 – очень известный формат хранения видеофайлов. На самом деле это сокращение от названия стандарта сжатия – MPEG4. Это фильм или клип, который по своим возможностям не уступает предыдущему формату MOV.

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

Учимся добавлять на веб-ресурс видео

Когда возникает желание предоставить возможность пользователям сайта смотреть видеоуроки или клипы с ютуба, то сразу же перед разработчиком возникает вопрос: «А каким именно образом мне стоит загрузить видеоконтент?»

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

Если вы хотите усвоить данный материал, то советую вам не лениться, а собрать всю свою волю в кулак и проработать примеры самостоятельно. Хочу напомнить, если у вас нет профессиональной среды разработки или хотя бы Notepad ++, то вооружитесь программой «Блокнот».

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

используя ссылку с YouTube;
загружая клипы с локального компьютера;
пользуясь стандартными механизмами html5.

Но для начала нужно подготовить каркас будущей страницы. Для этого через блокнот создаем документ с расширением .html (как правильно создавать веб-страницы через «Блокнот» я писал в первых уроках) и вставляем туда ниже представленный код:

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

О YouTube, поделись ссылочкой

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

Далее действия одинаковые:

Разработчики сервиса предоставляют вам код html с уже встроенной ссылкой и тегом iframe.

<iframe> — это контейнер, создающий плавающий фрейм с находящейся в нем информацией, которую можно загружать.

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

Вернемся к нашей программе. Скопированный текст вставляем разу после первого заголовка. Эту часть кода я прикрепил ниже:

<h1>Способ 1: добавление видео с веб-сервиса YouTube</h1>

<iframe width="560" height="315" src="https://www.youtube.com/embed/7D5bPLxU8U8?list=PL8w5HIWLMRa3s3bBMVDvBozFif7HsRj05" frameborder="0" allowfullscreen></iframe>

Теперь если вы обновите вкладку с примером (можно при помощи клавиши F5), то увидите под первым заголовком вставленное видео.

Загрузка клипов с локального компьютера

Для того чтобы загрузить видео с вашего компьютера, для удобства нужно разместить его возле создаваемой html-страницы. Далее использовать один из плееров. Для примера я использовал специализированный плеер под названием Flowplayer. Он выложен в интернет в свободном доступе и скачать его не проблема.

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

Для начала откройте документ с кодом примера и сразу после закрывающегося тега </style> вставьте строку, подключающую плеер к нашей странице. Текст примера скопируйте ниже:

Далее после второго заголовка необходимо вставить текст, состоящий из html и js языков:

Вам нужно изменить 2 строки данного кода. В a href= «1.mp4» укажите название своего видеодокумента. Если он лежит не рядом с создаваемой страницей, то до названия через слеш нужно добавить имя каталога. Например, my/1.mov. И вторая строка в скриптовом коде. Пропишите свой путь к файлу.

Воспользуемся современными методами

Новая платформа html5 предоставляет современные теги для вставки и отображения видео. Мы воспользуемся тегом <video> и его атрибутом controls, который к загруженному файлу добавляет панель управления. После третьего заголовка вставьте код:

Если видеодорожка не отобразилась, то либо вы пользуетесь старой версией браузера (нужно использовать <iframe>), либо неверно указали путь к документу (src="https://romanchueshov.ru/osnovyi-html/1.mp4").

Элемент <embed>

Помимо привычных инструментов для вставки мультимедиа существует и такой тег, как <embed>. Он помогает браузерам отобразить те файлы мультимедиа, которые изначально первый не понимает. Для таких видео- или аудиофайлов приходится использовать специальные дополнения или плагины. Пример кода с данным элементом выглядит вот так:

<embed src="https://romanchueshov.ru/osnovyi-html/papka/cat.swf" width="580" height="295" type="тип объекта" pluginspage="анкор для скачки плагина или дополнения">

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

1. Как вставить видео на сайт средствами HTML?
2. Короткий код вставки видео с Youtube на сайт

Как вставить видео на сайт средствами HTML?

Есть два вида вставки видео на сайт: видео с другого ресурса (Youtube, Yandex video, Rutube и другие) и видеофайл, который уже загружен на сайт и открывающийся прямой ссылкой.

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

1. Зарегистрироваться на видеосервисе (Например: Youtube , Yandex video , Rutube )
2. После регистрации у Вас появится возможность загрузить видео
3. Получить код видео и вставить к себе на сайт

После этого Вы вставляете полученный код к себе на страницу. Получается примерно следующий отрезок кода:

Код HTML

Второй способ покажется немного сложнее. Во-первых, видео целиком нужно залить на хостинг, а он, как известно, не резиновый, во-вторых, для проигрывания даного видео (кроссбраузерного - так, чтобы во всех браузерах всё было одинаково!) следует использовать видео-проигрыватель, который уже не надо скачивать, а достаточно только подключить в head Вашего документа.

Поскольку простых путей не ищем, то предположим, что Вы хотите вставить SWF-файл. Существует множество плееров доступных он-лайн. Например, FlowPlayer ( скачать FlowPlayer ). После скачивания архива загрузите его на сайт в папку с соответствующим названием flowplayer. После этого надо прикрепить к странице с видео данный плеер, для этого вставляем в head следующую строку:

Код HTML

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

Из плюсов данного метода хотел бы отметить отсутствие рекламы при проигрывании видео и, при нормальной работающем хостинге(!), быструю загрузку видео.

Короткий код вставки видео с Youtube на сайт

Код HTML (вставляем куда угодно в body документа)

И наслаждаемся клипом LP!)

Вставка видео или тег video в HTML5

Позволяет встраивать, воспроизводить и управлять настройками видеоролика на веб-странице.
Синтаксис

Атрибуты тега video
autoplay - Видео начинает воспроизводиться автоматически после загрузки страницы.
controls - Добавляет панель управления к видеоролику.
height - Задает высоту области для воспроизведения видеоролика.
loop - Повторяет воспроизведение видео с начала после его завершения.
poster - Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
preload - Используется для загрузки видео вместе с загрузкой веб-страницы.
src - Указывает путь к воспроизводимому видеоролику.
width - Задает ширину области для воспроизведения видеоролика.

Пример кода тега video

Вставка видео с помощью в html-страницу при помощи embed

Элемент embed используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает. Чем метод отличается от предыдущих? В большинстве случаев, подобные объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы.

К слову, спецификация HTML 4.0 рекомендует использовать тег object для загрузки внешних данных вместо тега embed. Однако некоторые браузеры не отображают таким образом нужную информацию, поэтому наилучшим вариантом будет поместить embed внутрь контейнера object.

Используемые атрибуты тега embed
align - определяет как объект будет выравниваться на странице и способ его обтекания текстом
height - высота объекта
hidden - указывает, скрыть объект на странице или нет
hspace - горизонтальный отступ от объекта до окружающего контента
pluginspage
Адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру
src - как и везде - это путь к файлу
type - MIME-тип объекта
vspace - вертикальный отступ от объекта до окружающего контента.
width - ширина объекта

Теперь, когда мы спокойно добавляем простые изображения на веб-страницу, сделаем следующий шаг — начнём добавлять видео и аудиоплееры в ваши HTML-документы! В этой статье вы увидите, как это делать с элементами <video> и <audio> ; а в завершение посмотрите, как добавить титры и субтитры к вашим видео.

Предпосылки:	Базовая компьютерная грамотность, установка базового ПО, базовые знания работа с файлами, знакомство с основами HTML (как описано в Начало работы с HTML) и Изображения в HTML.
Задача:	Узнать, как вставлять видео и аудиоконтент в веб-страницу, а также добавлять титры или субтитры к видео.

Аудио и видео в Интернете

Веб-разработчики хотели использовать видео и аудио в Интернете в течение длительного времени, начиная с начала 2000-х годов, когда пропускная способность сети стала достаточной, чтобы поддерживать любое видео (видеофайлы намного больше, чем текст, или даже изображения). На раннем этапе базовые веб-технологии, такие как HTML, не имели возможности размещения на сайтах видео и аудио контента, поэтому запатентованные технологии (или плагины), такие как Flash (а затем и Silverlight), стали популярными для обработки такого контента. Эти технологии работали нормально, но у них было много недостатков, в числе которых плохая поддержка возможностей HTML и CSS, проблемы безопасности и проблемы доступности.

Собственное решение устранило бы большую часть этой проблемы, если бы оно было реализовано правильно. К счастью, несколько лет спустя в спецификации HTML5 были добавлены такие функции, с элементами <video> и <audio> , и некоторые новые JavaScript API для их управления. Мы не будем рассматривать JavaScript здесь - только необходимые основы, которые могут быть достигнуты с помощью HTML.

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

Примечание: Прежде всего, вы также должны знать, что есть немало OVPs (провайдеров онлайн-видео) вроде YouTube, Dailymotion и Vimeo, а также онлайн аудио-провайдеров вроде Soundcloud. Такие компании предлагают удобный и простой способ размещения и потребления видео, поэтому вам не нужно беспокоиться об огромном потреблении трафика. OVP даже обычно предлагают готовый код для встраивания видео и аудио в ваши веб-страницы. Если вы пойдёте по этому пути, то сможете избежать некоторых трудностей, которые мы обсуждаем в этой статье.

Элемент <video>

Элемент <video> позволяет вам вставлять видео достаточно легко. Очень простой пример выглядит так:

src Точно так же, как для элемента <img> , атрибут src (source — источник) содержит путь к видео, которое вы хотите внедрить. Он работает точно так же. controls Пользователи должны иметь возможность контролировать воспроизведение видео и аудио (особенно это важно для людей, которые больны эпилепсией). Вы должны либо использовать атрибут controls , чтобы использовать встроенный в браузер интерфейс управления или создать собственный интерфейс, используя соответствующие JavaScript API. Как минимум, интерфейс должен включать способ запуска и остановки медиа-носителя и регулировки громкости. Параграф внутри тегов <video> Это называют резервный контент — он будет отображаться, если браузер, показывающий страницу, не поддерживает элемент <video> , позволяя нам обеспечить поддержку для старых версий браузеров. Это может быть все, что вы захотите; в нашем примере мы предоставили прямую ссылку на видеофайл, поэтому пользователь может хотя бы получить к нему доступ, независимо от того, какой браузер он используют.

Встроенное видео будет выглядеть примерно так:

Поддержка нескольких форматов

Присутствует одна проблема с приведённым выше примером, которую вы, возможно, уже заметили, если пытались получить доступ к прямой ссылке выше с помощью браузера, такого как Safari или Internet Explorer. Видео не будет воспроизводиться!

Давайте кратко рассмотрим терминологию. Форматы, такие как MP3, MP4 и WebM, называются форматами контейнеров. Они содержат различные части, которые составляют всю песню или видео — например, звуковую дорожку, видеодорожку (в случае видео) и метаданные для описания представленного носителя.

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

Аудио и видео треки также находятся в разных форматах, например:

Контейнер WebM обычно загружает звук Ogg Vorbis с видео VP8 / VP9. Поддерживается в основном в Firefox и Chrome.
Контейнер MP4 часто включает аудио AAC или MP3 с видео H.264. Поддерживается в основном в Internet Explorer и Safari.
Более старый контейнер Ogg имеет тенденцию идти с аудио Ogg Vorbis и видео Ogg Theora. Поддерживалось главным образом в Firefox и Chrome, но было вытеснено более качественным форматом WebM.

Есть несколько особых случаев. Например, для некоторых типов аудио данные кодека часто хранятся без контейнера или с упрощённым контейнером. Одним из таких примеров является кодек FLAC, который чаще всего хранится в файлах FLAC, которые представляют собой просто необработанные дорожки FLAC.

Ещё одна такая ситуация - всегда популярный файл MP3. «Файл MP3» на самом деле является звуковой дорожкой MPEG-1 Audio Layer III (MP3), хранящейся в контейнере MPEG или MPEG-2. Это особенно интересно, поскольку, хотя большинство браузеров не поддерживают использование мультимедиа MPEG в элементах <video> и <audio> , они могут поддерживать MP3 из-за его популярности.

Аудиоплеер обычно воспроизводит аудиодорожку напрямую, например файл MP3 или Ogg. Для этого не нужны контейнеры.

Поддержка медиафайлов в браузерах

Вышеупомянутые форматы существуют для сжатия видео и аудио в управляемые файлы (необработанные видео и аудио очень большие). Браузеры содержат разные кодеки, вроде Vorbis или H.264, которые используются для преобразования сжатого звука и видео в бинарные данные и обратно. Каждый кодек имеет свои преимущества и недостатки, и каждый контейнер может также предлагать свои собственные положительные и отрицательные особенности, влияющие на ваше решение о том, какой из них использовать. Как указано выше, браузеры, к сожалению, не поддерживают одни и те же кодеки, поэтому вам придётся предоставить несколько файлов для каждого медиа-продукта. Если вам не хватает правильного кодека для декодирования контента, он просто не сможет воспроизводиться.

Примечание: Возможно, вам интересно, как сложилась такая ситуация. MP3 (для аудио) и MP4/H.264 (для видео) широко поддерживаются и имеют высокое качество. В то же время, они защищены патентами — американские патенты охватывают MP3 по крайней мере до 2017 года и H.264 самое меньшее до 2027 года, так что браузеры, которые не являются держателями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.

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

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

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

Так как мы это сделаем? Взгляните на следующий обновлённый пример (и попробуйте живой пример):

Здесь мы изъяли атрибут src из нашего тега <video> , и вместо этого включали отдельные элементы <source> , каждый из которых ссылается на собственный источник. В этом случае браузер пройдётся по элементам <source> и начнёт воспроизводить первый из них, который имеет поддерживаемый кодек. Включение источников WebM и MP4 должно быть достаточно для воспроизведения вашего видео на большинстве платформ и браузеров в наши дни.

Каждый элемент <source> также имеет атрибут type . Он не обязательный, но рекомендуется его включать — он содержит MIME types видеофайла, браузеры могут прочитать их и сразу же пропустить видео, которые они не понимают. Если type не включён, браузеры загружают и пытаются воспроизвести каждый файл до тех пор, пока не найдут тот, который будет работать, затрачивая больше времени и ресурсов.

Примечание: Наша статья о поддерживаемых медиаформатах описывает некоторые распространённые MIME types.

Другие параметры <video>

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

На выходе получим нечто, подобное этому:

Новые параметры:

width and height Вы можете контролировать размер видео либо с помощью этих атрибутов, либо с помощью CSS. В обоих случаях видео поддерживают собственное соотношение ширины и высоты — известное как соотношение сторон. Если соотношение сторон не поддерживается установленными вами размерами, видео будет увеличиваться, чтобы заполнить пространство по горизонтали, а заполненному пространству по умолчанию будет задан сплошной цвет фона. autoplay Этот атрибут позволяет сразу начать воспроизведение звука или видео, пока остальная часть страницы загружается. Вам не рекомендуется использовать автовоспроизведение видео (или аудио) на ваших сайтах, потому что пользователи могут найти это действительно раздражающим. loop Этот атрибут позволяет воспроизводить видео (или аудио) снова, когда он заканчивается. Это также может раздражать, поэтому используйте тогда, когда это действительно необходимо. muted Этот атрибут заставляет проигрыватель воспроизводить звук, отключённый по умолчанию. poster Этот атрибут принимает в качестве значения URL-адрес изображения, который будет отображаться до воспроизведения видео. Он предназначен для заставки к видео или рекламы. preload

этот атрибут используется в элементе для буферизации больших файлов. Он может принимать одно из трёх значений:

"none" не буферизирует файл
"auto" буферизирует медиафайл
"metadata" буферирует только метаданные файла

Вы можете найти приведённый выше пример для воспроизведения на Github (также просмотрите исходный код.) Обратите внимание, что мы не включили атрибут autoplay в live-версию - если видео начнёт воспроизводиться, как только страница загрузится, вы не увидите заставку к видео!

Элемент <audio>

Элемент <audio> работает точно так же, как элемент <video> , с несколькими небольшими отличиями, которые описаны ниже. Типичный пример может выглядеть так:

В браузере это вызывает следующее:

Примечание: вы можете запустить аудио-демо в Github (см. также исходный код аудиоплеера.)

Он занимает меньше места, чем видеоплеер, поскольку нет визуального компонента - вам просто нужно отображать элементы управления для воспроизведения звука. Другие отличия от видео HTML5 заключаются в следующем:

Элемент <audio> не поддерживает атрибуты width и height - опять же, нет визуального компонента, поэтому присваивать ширину или высоту не к чему.
Он также не поддерживает атрибут poster опять же, из-за отсутствия визуального компонента.

Помимо этого, <audio> поддерживает все те же функции, что и <video> - просмотрите приведённые выше разделы для получения дополнительной информации о них.

Отображение текстовых дорожек к видео

Теперь мы обсудим немного более продвинутую концепцию, о которой очень полезно знать. Многие люди не могут или не хотят слышать аудио или видео контент, который они находят в Интернете, по крайней мере, в определённое время. Например:

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

Разве было бы неплохо иметь возможность предоставить этим людям транскрипцию слов, произносимых в аудио или видео? Благодаря HTML5 вы можете это сделать с форматом WebVTT и элементом <track> .

Замечание: "Транскрибировать" значит записывать устную речь в виде текста. Полученный текст представляет собой «стенограмму».

WebVTT - это формат для записи текстовых файлов, содержащих несколько строк текста, а также метаданные, такие как время, в которое вы хотите отображать каждую текстовую строку, и даже ограниченную информацию о стиле/позиционировании. Эти текстовые строки называются репликами, и вы можете отображать разные типы для разных целей, наиболее распространёнными являются:

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

Типичный файл WebVTT будет выглядеть примерно так:

Чтобы отобразить это вместе с воспроизведением мультимедиа HTML, вам необходимо:

Сохраните его как .vtt - файл, в разумном месте.
Ссылка на файл .vtt с элементом <track> . <track> должен быть помещён в <audio> или <video> , но после элементов <source> . Используйте атрибут kind , чтобы указать, являются ли реплики субтитрами , титрами или описаниями . Кроме того, используйте srclang , чтобы сообщить браузеру, на каком языке вы записывали субтитры.

Это приведёт к просмотру видео с субтитрами, таким как:

Подробнее читайте в разделе добавление титров и субтитров к видео HTML5. Вы можете найти пример, который соответствует этой статье в Github, написанной Яном Девлином (см. также исходный код). В этом примере используется JavaScript, позволяющий пользователям выбирать между различными субтитрами. Обратите внимание, что для включения субтитров вам нужно нажать кнопку «CC» и выбрать вариант - английский, немецкий или испанский.

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

Активное обучение: Внедрение собственного аудио и видео

Для этого активного обучения мы (в идеале) хотели бы, чтобы вы вышли на улицу и записали некоторые из ваших собственных видео и аудио. Большинство телефонов в наши дни позволяют очень легко записывать аудио и видео, и, если вы можете перенести их на свой компьютер, вы можете их использовать. Возможно, вам придётся сделать некоторое преобразование, чтобы в конечном итоге получить WebM и MP4 в случае видео, а также MP3 и Ogg в случае аудио, но есть достаточно программ, чтобы вы могли сделать это без особых проблем, таких как Miro Video Converter и Audacity. Мы хотели бы, чтобы вы попробовали сделать это!

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

Мы хотим, чтобы вы сделали следующие действия:

Сохраните аудио и видео файлы в новом каталоге на вашем компьютере.
Создайте новый HTML файл в том же каталоге и назовите его index.html .
Добавьте элементы <audio> и <video> на страницу; чтобы они отображали элементы управления браузером по умолчанию.
Введите оба варианта элемента <source> , чтобы браузеры находили оптимальный формат звука, который он поддерживает и загружает. Они должны включать type атрибуты.
Дайте элементу <video> заставку, которая будет отображаться до начала воспроизведения видео. Получайте удовольствие, создавая свою собственную заставку к видео.

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

Краткое изложение

Мы надеемся, что вам понравилось играть с видео и аудио на веб-страницах! В следующей статье мы рассмотрим другие способы встраивания контента в Web, используя такие технологии, как <iframe> (en-US) и <object> (en-US).

Что нужно, чтобы вставить видео в HTML-страницу? Во первых, знание html, во вторых азы работы с видео, в третьих нужные программы под рукой.

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

Для воспроизведения видео в интернете используют всего три формата видео-файлов .mp4, .webm и .ogv. И не забываем, что кодировать нужно только определенными кодеками. Иначе браузер не сможет его отобразить. Ниже привожу таблицу, которая наглядно демонстрирует взаимосвязь браузера, контейнера (формат видео) и кодека.

Chrome

Safari

Opera

Firefox

iPhone

Android

Для конвертации я использую Miro Video Converter . Простая программа без лишних настроек, которая в автоматическом режиме конвертирует видео в нужный формат .mp4, .webm и .ogv.

С видео, думаю понятно. Теперь переходим к коду. Для вывода видео в HTML5 используется специальный тег <video> просто прописываем путь как и к картинке через src:

Тегу <video> можно задать параметры width – ширина, height – высота, controls – панель управления, poster – изображение и другие .

<video src="https://moneypartners.ru/vebmaster/video.mp4" width="400" height="300" controls="controls" poster="image.jpg">

Но в таком случае видео будет проигрываться не во всех браузерах, смотрите таблицу. Чтобы достичь кросбаузерности используют тег <source>

Тогда код для вставки принимает такой вид:

<video>

<source src="https://moneypartners.ru/vebmaster/video.%20mp4" type="video/mp4" />

<source src="https://moneypartners.ru/vebmaster/video.webm" type="video/vebm" />

<source src="https://moneypartners.ru/vebmaster/video.%20ogv" type="video/ogg" />

</video>

В параметре type указывается формат файла, тогда браузер определяет сможет ли воспроизвести видео без предварительного скачивания. Иногда также прописывают параметр codecs, где указывают, каким кодеком закодирован файл:

<source src="https://moneypartners.ru/vebmaster/video.ogv" type="video/ogg" codecs="theora, vorbis">

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

Таким образом, нужно вставить код именно для таких безнадежно устаревших юзеров браузеров:

<video width="640" height="360" controls>

<source src="https://moneypartners.ru/vebmaster/video.%20mp4" type="video/mp4" />

<source src="https://moneypartners.ru/vebmaster/video.webm" type="video/vebm" />

<source src="https://moneypartners.ru/vebmaster/video.%20ogv" type="video/ogg" />

<object width="400" height="300" type="application/x-shockwave-flash">

<param name="movie" value=" flash-pleer.swf" />

<param name="flashvars" value="controlbar=over&image= IMAGE.JPG&file=VIDEO.MP4" /><!—подключение панели управления, путь к изображению и видео-файлу в формате .mp4 .flv или .swf-->

</object>

</video>

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

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

Мне больше всего нравится flowplayer. Дальше опишу как установить flowplayer на html-сайт.

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

Между тегами <head> </head> вставляем:

<link rel="stylesheet" type="text/css" href="skin/minimalist.css"><!— скин плеера -->

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript" src="https://moneypartners.ru/vebmaster/flowplayer.min.js"></script>

Чтобы сменить скин, меняем в коде minimalist.css на понравившийся из папки skin.

В нужном месте страницы вставляем:

<div data-swf="flowplayer.swf" data-ratio="0.5">

<video width="500">

<source type="video/webm" src="https://moneypartners.ru/vebmaster/video.webm">

<source type="video/mp4" src="https://moneypartners.ru/vebmaster/video.mp4">

<source type="video/ogv" src="https://moneypartners.ru/vebmaster/video.ogv">

</video>

</div>

Путь к видео может быть как относительный, так и абсолютный. data-ratio – размер плеера. video.ogv можно не делать у меня по крайней мере и без него воспроизводится во всех браузерах.

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

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