Несколько способов, как вставить видео в HTML

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

Способы создания сайтов

Итак, web-сайты – возможность представить информацию интерактивно. Как известно, интернет-ресурсы состоят из страниц, которые взаимосвязаны между собой гиперссылками. Как можно создать собственный сайт?

1. Использовать технологию блоггинга. Что это значит? Зарегистрироваться на сайте и получить доменное имя второго уровня. Благодаря такой возможности владелец сайта становится администрацией своего ресурса и получает доступ к специальной панели. При помощи нее можно трансформировать «детище» по своему вкусу.
2. Воспользоваться разработанными многочисленными конструкторами сайтов, по типу ucoz.ru, jimdo.com, setup.ru, Wix.com, A5.ru, Fo.ru, rusedu.net и т. д.
3. Разработать интернет-ресурс посредством CMS, т. е. системы управления сайтом.
4. Спроектировать собственный дизайн «детища» и воссоздать его посредством языка программирования HTML.

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

Все больше начинающих веб-мастеров задаются вопросом о том, как вставить видео на сайт. Это легко объяснимо, так как видео-контент способствует росту рейтинга ресурса. Независимо от того, как реализован веб-проект, в Интернет есть пара универсальных способов, используя которые можно наполнить свое «детище» видеоматериалами.

Составные элементы части web-технологии

Технология web разделяется на следующие базовые компоненты:

1. Различные по своему роду компьютерные сети взаимодействуют друг с другом по протоколу TCP/IP.
2. Web стал одним из приложений Internet, которые предназначены для массового распространения разнообразной информации.
3. В web-технологии носителями данных являются страницы, которые содержат медиа-контент (графику, видео, гиперссылки), поэтому нужно знать, как вставить видео в HTML.
4. Чтобы передавать информацию-гипертекст технология web использует протокол HTTP.
5. Для проектирования и создания веб-страниц применяется язык разметки гипертекста HTML.
6. Чтобы просмотреть ресурсы в Internet, нужно воспользоваться браузером.

Способ № 1. Вставка медиа-контента (видео) посредством тегов HTML5

Существует несколько способов вставки видео контента на веб-страницу. Выделяют три варианта: вставка посредством HTML, плеера или YouTube. Для начала нужно создать обычный HTML5-файл, который будет содержать в себе стили страницы и несколько подзаголовков. После подготовки можно выбирать один из методов и наслаждаться результатом.

Новое время – новые технологии. На замену устаревшим тегам для организации фреймов приходит в HTML iframe. Пример использования усовершенствованного элемента разметки страницы рассмотрен в статье.

1. Найти третий заголовок и прописать код прямо под ним:
2. Открыть страницу в браузере и убедиться в появлении видео.
3. Обязательно нужно правильно прописать путь к ролику.
4. Чтобы вставка видео в HTML была грамотной, нужно разметить панель контроля видео. За это отвечает параметр controls.

Следует учесть, что такой способ примечателен не для всех. К примеру, в браузере Opera видео, размещенное таким способом, воспроизводиться не будет. Чтобы избежать такой ситуации, нужно конвертировать видеоролик в тип Ogg Theora, изменить код.

Конвертировать файл можно посредством сервиса online-convert.com. Затем нужно изменить код на такой:

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

Способ № 2. Как вставить видео в HTML при помощи плеера

Видеоконтент можно вставлять в HTML без какой-либо преждевременной загрузки на видеосервис. Итак, можно воспользоваться скриптом плеера, чтобы выставить нужный ролик на сайт с расширением .mp4 или .flv. Прежде всего нужно выбрать сам ролик. Затем нужно выбрать один из множества бесплатных плееров. Как вариант, можно воспользоваться Flowplayer.

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

1. Нужно скачать файлы указанного плеера на локальный компьютер.
2. Разархивировать их в конкретную папку на создаваемом сайте.
3. Открыть HTML-файл и подключить javascript-файл проигрывателя к подготовленному файлу. Для этого нужно прописать специальный код внутри тега HEAD.Важно: правильно указать путь к папке!
4. Нужно разместить плеер в HTML-файле. Здесь нужно правильно прописать путь к файлам. Тут же указываются настройки, запрещающие видео запускаться автоматически. Если нужно, чтобы видео запустилось «автоматом», следует после пути к файлу убрать запятую, закрыть скобку (круглую) и поставить точку с запятой.

Такой способ довольно простой и понятный, чтобы добавить видео в HTML. Кстати, таким вариантом пользуются многие web-программисты.

Способ № 3. Вставка видео в HTML с Ютуба

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

1. Для начала нужно выбрать видеоролик, который будет находиться на странице. Он должен храниться на локальном компьютере.
2. Нужно перейти на сайт youtube.com. Следует создать свой аккаунт или войти в уже существующий.
3. После входа на свою страницу в YouTube требуется нажать кнопку «Добавить видео», после чего выйдет окно, в котором будет предложено выбрать файл для загрузки. Выбранный видеоролик загрузится спустя некоторое время.
4. Можно перейти по ссылке загруженного файла, которая находится вверху.
5. Чтобы получить код для вставки видео, нужно нажать «Поделиться» и «HTML-код». Страница выдаст программный код, который необходим. Здесь можно указать такие параметры, как-то: режим конфиденциальности, размер видео, возможность показать похожие записи.
6. После настройки параметров код копируется и вставляется в подготовленный HTML-файл.
7. Все готово. Теперь понятно, как вставить видео в HTML с сервиса YouTube.

Итак, были рассмотрены несколько способов вставки видео в HTML. Какой вариант выбрать – решать web-программисту или владельцу сайта.

iframe код для вставки видео на сайт

С недавних пор самый видео хостинг начал использовать iframe код для вставки видео.

Код выглядит следующим образом:

Такой код работает не у всех. Все зависит от темы которая установлена на сайте и кода который прописан в файле functions.php.

Поэтому, если в вашем блоге не отображается видео с Youtube, и вы не хотите менять тему, тогда нужно вставить следующий код в файл functions.php:

add_filter (‘tiny_mce_before_init’, create_function ( ‘$init_array’,

‘$init_array[«extended_valid_elements»] font-size: small;»> |marginwidth| name|scrolling|src|width]»;

Есть еще один альтернативный вариант, который позволяет и без предварительного кода вставить видео в блог.

Начиная с WordPress 2.9, добавлена возможность вставлять на ваш сайт видеоролики с Youtube вставив в статью только адрес видео.

Чтобы это работало, нужно чтобы в меню Настройки \ Мультимедийные файлы\ стояла галочка \ встраивать медиа автоматически\.

Обратите внимание, что размер видео вы не сможете отрегулировать непосредственно в редакторе. Изменить размер можно сразу для всех видео которые вставлялись таким образом на странице \Настройки\ — \Мультимедийные файлы\ , пункт \Публикация медиа\.

1.13. HTML5-видео

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

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

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

Как добавить HTML5-видео на веб-страницу

• Содержание:
• 1. Элемент
• 2. Встраиваемый интерактивный контент
• 3. Видеокодеки
• 4. Видеоконтейнеры
• 5. Альтернативные медиа-ресурсы
• 6. Добавление субтитров и заголовков
• 7. Пример: размещаем видео на сайте
• 8. Видеоконвертеры

1. Элемент

Поддержка браузерами

IE: 9.0, атрибут muted — с 10.0
Edge: 12.0
Firefox: 3.5
Chrome: 4.0, атрибут muted — с 30.0
Safari: 4.0, атрибут muted — с 5.0
Opera: 11.5
iOS Safari: 3.2
Android Browser: 2.3
Chrome for Android: 44

В простом варианте HTML-разметка для размещения видеофайла на странице имеет следующий вид:

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

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

Таблица 1. Атрибуты тега

Атрибут	Описание, принимаемое значение
autoplay	Автоматическое воспроизведение видеоофайла сразу же после загрузки страницы.
controls	Указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением (воспроизведение, пауза, громкость).
height	Задает высоту окна для отображения видеоданных, возможные значения: px или %
loop	Циклическое воспроизведение видеофайла.
muted	Выключает звук при воспроизведении видеофайла.
poster	URL файла изображения, которое будет отображаться во время загрузки видеофайла или до тех пор, пока пользователь не нажмет на кнопку PLAY. Если атрибут не задан, то будет отображаться первый кадр видеофайла.
preload	Атрибут, отвечающий за предварительную загрузку видеоконтента. Не является обязательным, некоторые браузеры игнорируют его. Возможные значения: auto — браузер загружает видеофайл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение. metadata — браузер загружает первую небольшую часть видеофайла, чтобы определить его основные характеристики. none — отсутствие автоматической загрузки видеофайла.
src	Содержит абсолютный или относительный URL-адрес видеофайла.
width	Задает ширину окна для отображения видеоданных, возможные значения: px или %

2. Встраиваемый интерактивный контент

Элемент определяет контейнер для внешнего приложения или интерактивного содержимого (другими словами, плагина). Большинство браузеров поддерживало данный элемент на протяжении долгого времени. Тем не менее, данный тег не был включен в спецификацию HTML4, его добавили в спецификацию HTML5. С помощью на веб-страницы можно добавлять не только видеофайлы, но и векторные изображения в формате swf :

Таблица 2. Атрибуты тега

Атрибут	Описание, принимаемое значение
height	Определяет высоту встраиваемого контента в px или % .
src	Содержит абсолютный или относительный URL-адрес медиафайла.
type	Определяет MIME-тип встраиваемого файла.
width	Определяет ширину встраиваемого контента в px или % .

3. Видеокодеки

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

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

H.264 — высококачественный кодек от фирмы MPEG, делится на профили для поддержки как устройств с минимальными возможностями, так и устройств высокого разрешения.

Ogg Theora — открытый бесплатный стандарт для видео, качество и производительность несколько ниже стандарта H.264.

VP8 — открытый бесплатный кодек, сходный по качеству с H.264. Поддерживается в Firefox, Chrome и Opera.

4. Видеоконтейнеры

Любой видеофайл является файловым контейнером, в котором хранятся другие файлы. Аудио- и видеодорожки объединяются для воспроизведения видеоролика. Метаданные содержат информацию о данном видеоролике — изображение обложки, субтитры и пр. К популярным форматам видеоконтейнеров относятся следующие:

Ogg (.ogv, .oga, .ogx, .ogg) — формат-контейнер с открытым исходным кодом для видеокодека Theora и аудио Vorbis. Работает в Firefox, Chrome и Opera.
MIME-тип: video/ogg .

MPEG 4 (.mp4) — формат-контейнер для видеокодека H.264 и аудиокодека AAC. Работает в Safari и Chrome. Кодирует видео, в том числе высокой четкости, для полного спектра устройств, таких как iPhone, iPod и iPad.
MIME-тип: video/mp4 .

WebM (.webm) — формат-контейнер с открытым исходным кодом для видеокодека VP8 от Google и аудиокодека Ogg Vorbis. Работает в Firefox, Chrome, Opera и Adobe Flash Player.
MIME-тип: video/webm .

Audio Video Interleave (.avi) — формат предназначен для записи звука и движущихся изображений, соответствует спецификации RIFF.
MIME-тип: video/vnd.avi, video/avi, video/msvideo, video/x-msvideo .

Matroska (.mkv) — популярный видеоконтейнер, может содержать видео в формате H.264, VP8 или Theora.
MIME-тип: video/x-matroska, audio/x-matroska .

На данный момент браузеры поддерживают три основных видео формата:

Формат	Видеокодек	Аудиокодек
.mp4	H.264	AAC
.ogg/.ogv	Theora	Vorbis
.webm	VP8	Vorbis

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

5. Альтернативные медиа-ресурсы

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

Таблица 3. Атрибуты тега

Атрибут	Описание, принимаемое значение
media	Определяет тип медиа-устройства (т.е. для каких устройств оптимизирован файл).
src	Содержит абсолютный или относительный URL-адрес медиафайла.
type	Определяет MIME-тип медиафайла.

6. Добавление субтитров и заголовков

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

Таблица 4. Атрибуты тега

Атрибут	Описание, принимаемое значение
default	Указывает, что данная дорожка воспроизводится по умолчанию. Только один элемент может содержать данный атрибут.
kind	Указывает тип текстовой дорожки, по умолчанию выводятся субтитры ( subtitles ). Принимаемые значения: captions — перевод диалогов и звуковых эффектов, отображаемый в виде текста поверх видео (для глухих пользователей). chapters — добавляет названия глав в виде списка для навигации по медиафайлу. descriptions — добавляет звуковое описание происходящего в видео (для невидящих пользователей). metadata — метаданные, используемые скриптами, не отображаются для пользователей. subtitles — текстовое дублирование звуковой дорожки видео, отображается в виде субтитров к видео.
label	Добавляет название дорожки. Если этот атрибут не задан, браузер применит значение по умолчанию.
src	Содержит абсолютный или относительный URL-адрес аудио- или видеофайла.
srclang	Язык воспроизводимой дорожки.

7. Пример: размещаем видео на сайте

Размещаем код для вставки видео на сайт с помощью HTML5-разметки, используя атрибуты для задания видео требуемых параметров:

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

8. Видеоконвертеры

Movavi — позволяет конвертировать видео и аудио в необходимый вам формат. Сохраняет медиафайлы для проигрывания на мобильных устройствах. «Умные» готовые профили позволяют добиваться максимального качества.

ONLINE-CONVERT — бесплатный онлайн-конвертер, позволяющий конвертировать любые медиа-файлы из одного формата в другой.

Firefogg — модуль расширения для Firefox, может создавать видеофайлы Theora и WebM. Работает непосредственно в браузере, но вся работа выполняется локально без обращения к веб-серверу.

CloudConvert — онлайн-конвертер файлов. Поддерживает практически любой формат аудио, видео, документов, электронных книг, архивов, изображений, электронных таблиц или презентаций.

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

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

Начнём с того, что существует два способа вставки видео на сайт: с видеосервиса (например, с Youtube, Rutube и других) и просто с обычного видеофайла, который может располагаться на любом сайте.

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

Лучшее видео недели!

Тут всё просто, и Вам совсем не надо разбираться, что там понаписано.

А вот второй способ немного сложнее. Тут Вам потребуется скрипт плеера, который будет Ваше видео проигрывать, и SWF-файл плеера. Существует много различных плееров, но мне понравился FlowPlayer (скачать FlowPlayer). Теперь посмотрим, как его установить и как с его помощью добавить видео на сайт.

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

После этого на странице нужно добавить такие строки:

Вот и всё! Видео успешно добавлено на Ваш сайт. И Вы теперь не зависите от работоспособности видеохостингов, а зависите только от работоспособности Вашего сайта. Более того, никакой посторонней рекламы видеохостингов Ваши пользователи не увидят. Однако, в этом способе добавления видео есть один серьёзный минус: ОЧЕНЬ большая нагрузка на сервер. Если это видео смотрит 5 человек в день, то проблем не будет, а если смотрят 20 человек одновременно, то ничего кроме злости Вашего посетители не испытают. Но выход из этого положения есть: использовать сторонный сервис хранения файлов, например, Amazon S3, о котором я расскажу в одной из следующих статей, так что не переключайтесь.

Если Вы хотите узнать больше по HTML, то посмотрите бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

Создано 27.01.2011 16:33:58

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 230 ):

XAXATyH2007 16.03.2011 03:10:13

Не пойму 2 способ делаю музыка вроде есть а не видно клипа. Белый экран

Admin 16.03.2011 08:34:15

Покажите код, как Вы вставляете клип.