Как встроить Youtube в html

Так как же встроить видео на веб-страницу с использованием синтаксиса HTML5? Это просто:

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

Если бы это было действительно так просто.

Сложность HTML5 обусловлена ​​не синтаксисом, а поддержкой браузера и кодированием видео. Веб-разработчики привыкли бороться с совместимостью браузеров, но у вас также есть более широкие, чем обычно, разногласия среди поставщиков браузеров относительно стандартов кодеков. Чтобы создать успешный сайт HTML5, вам необходимо учитывать, как современные браузеры, такие как Chrome 4, Firefox 4 и Internet Explorer 9, реализуют веб-стандарты HTML5 для видео, а также как управлять просмотром видео пользователями в старых браузерах.

Ограничения и преимущества

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

Embed a YouTube Video into Your Website using HTML

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

Меню по умолчанию для игроков очень простое и может потребовать немалых усилий для придания коже фирменного стиля или утонченного внешнего вида. Сложность этого заключается в том, что разные браузеры по-прежнему реализуют HTML5 и CSS по-разному. Например, добавьте закругленные углы, и ваш видеопроигрыватель может выглядеть округлым в IE и Firefox, но все равно выглядеть квадратным в Chrome и Safari.

Ничто в спецификации не допускает плавного или адаптивного потокового вещания, важной функции для серьезного сайта воспроизведения видео.

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

Ну и конечно же кодеки. Но об этом чуть позже.

Что вы получаете в обмен на отказ от этих вещей? На самом деле совсем немного.

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

• Вставить файл без потоковой передачи, который необходимо было загрузить полностью перед воспроизведением
• Купите сторонний плагин (который может работать или не работать со всеми браузерами)
• Используйте выделенный медиа-сервер, решение, слишком дорогое и / или сложное для использования на большинстве сайтов

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

Embed a YouTube Video in HTML and Make it Responsive (CSS included)

Во-вторых, спецификация HTML5 позволяет разработчикам доставлять видео на платформы, на которых возникла проблема, например на продукты iOS (iPhone, iPad). Но если взглянуть на проблему немного иначе, это также освобождает разработчиков от проприетарных платформ доставки, которые могут ограничивать или контролировать способ доставки медиа. Это, в конце концов, цель иметь открытые стандарты.

Наконец, HTML5 – это не инопланетная технология, это последняя версия HTML. Это означает, что JavaScript и CSS будут работать с ним просто отлично. Разработчики смогут манипулировать им на стороне клиента или сервера, как с существующим исходным кодом HTML.

Видеокодеки

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

Прямо сейчас у вас есть три возможных варианта кодирования вашего видео:

1. H.264 – популярный формат, который может использовать преимущества аппаратного ускорения, поддерживаемого графическими чипами в настольных ПК и устройствах; также формат записи по умолчанию для многих новых видео и мобильных устройств на рынке; однако формат запатентован, и хотя он остается бесплатным для некоммерческого использования, он становится сложным и потенциально дорогим. Смотрите этот документ для более подробной информации. Когда дело доходит до распространения коммерческого контента. Поддерживается: IE 9, Safari 3.1 и Chrome (на данный момент)
2. 2. Ogg Theora – открытый стандарт, который не запатентован и не требует авторских отчислений. Поддерживается: Firefox 3.5, Chrome 4, Opera 10.5
3. 3. VP8 (WebM) – новый стандарт, недавно приобретенный компанией Google и выпущенный в формате с открытым исходным кодом, без лицензионных платежей (но все еще запатентованным). Поддерживается: Firefox 4.0, Chrome 6.0, Opera 10.6.

Вот диаграмма, чтобы было легче следовать:

Этот туториал покажет, как добавить видео на HTML -страницу.

Видео с YouTube

1. Откройте видео на сайте YouTube, правой кнопкой мышки кликните по видео и в выпадающем списке выберите опцию Получить код для встраивания (Get embed code). Скопируйте этот код.
2. Вставьте скопированный код в желаемое место в . html файле и сохраните изменения.
3. Обновите страницу и просмотрите изменения на сайте.

Видео с Vimeo

1. Откройте видео на сайте Vimeo и кликните по иконке Поделиться (Share). Вы можете изменить дизайн видео, кликнув по ссылке Показать опции (Show options). Скопируйте код с поля Вставить (Embed).
2. Вставьте скопированный код в желаемое место в . html файле и сохраните изменения.
3. Обновите страницу и просмотрите изменения на сайте.

Проигрыватель WEB player

1. Сейчас мы покажем, как добавить видео с помощью проигрывателя WEB player. Нам необходимо добавить код, показанный ниже. Код source src=»https://www.templatemonster.com/help/ru/video1.mp4″ определяет путь к видео файлу, код type=»video/mp4″ определяет тип файла. Более подробную информацию о теге video вы можете получить по этой ссылке.

Your browser does not support the video tag.

Вставьте скопированный код в желаемое место в . html файле и сохраните изменения.

Обновите страницу и просмотрите изменения на сайте.

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

Эта запись была размещена в Работа с HTML и помечена как embed, HTML, player, video. Добавьте в закладки постоянную ссылку.

Источник: www.templatemonster.com