Как вставить видео Youtube html5

Firefox поддерживает AAC частично — только в контейнере MP4 и когда операционная система поддерживает этот формат.

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

Синтаксис

Атрибуты

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

Пример

video Элемент video не поддерживается вашим браузером. Скачайте видео.

Результат примера в браузере показан на рис. 1.

Как вставить видео в HTML5

Рис. 1. Воспроизведение видеофайла

Спецификация

Спецификация Статус

HTML Living Standard	Живой стандарт

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

9

12

3

10.5

3.1

3.5

4.4

4

14

3

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

См. также

• Адаптивное встраивание
• Видео на сайте
• Добавление медиа-контента

Источник: webref.ru

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

В мире адаптивных и гибких макетов в Интернете, один единственный медиа тип стоит на пути к идеальной гармонии — видео. Существует множество способов отображения видео на вашем сайте. Возможно, вы самостоятельно размещаете видео и проигрываете его через тег video. Возможно, вы используете YouTube, Vimeo или другой видео сервис, который предоставляет iframe для отображения видео. Давайте рассмотрим, как сделать их адаптивными, сохраняя при этом соответствующую высоту и не нарушая пропорции.

Очень часто, при встраивании видео, width и height объявлены прямо в HTML:

Угадай, что не так?
Объявление статической ширины — это не очень хорошая идея на сайте с изменяющейся шириной. Что если родительский контейнер для этого видео сжимается меньше чем объявленные 400px? В этом случае у нас все поломается и, будет выглядеть некрасиво и нелепо.

Что же делать в подобной ситуации?

Если вы используете стандартное видео HTML5, это позволит видео соответствовать ширине контейнера. Если вы используете этот подход, важно удалить объявление height, чтобы соотношение сторон видео сохранялось по мере его увеличения и сжатия по ширине, чтобы не получить «черные полосы» для заполнения пустого пространства (в отличие от изображений, само видео сохраняет свое соотношение сторон независимо от размера элемента).

Вы можете переопределить эти стили через CSS (и не беспокоиться о том, что объявлено в HTML) следующим образом:

video < /* override other styles to make responsive */ width: 100% !important; height: auto !important; >

Iframe-видео (YouTube, Vimeo и т.д.)

Наш маленький трюк описанный выше не поможет нам при работе с видео, которое добавлено через iframe. Принудительное увеличение ширины до 100% эффективно, но когда мы устанавливаем height: auto;, мы получаем статическую высоту 150px, которая слишком приземистая для большинства видео.

Практически все браузеры будут отображать теги iframe, canvas, embed и object как 300px × 150px, если не указано иное. Даже если этого нет в пользовательской таблице стилей.

К счастью, здесь есть несколько возможных решений. Один из них был впервые предложен Тьерри Кобленцем и представлен в A List Apart в 2009 году: Создание внутренних соотношений для видео. Используя эту технику, вы оборачиваете видео в другой элемент с внутренним соотношением сторон, а затем размещаете видео в этом абсолютном положении. Это дает нам резиновую ширину с “умной” высотой.

.videoWrapper < position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; >.videoWrapper iframe

Существует еще один “хитрый” вариант”, который позволяет регулировать соотношение сторон прямо из HTML:

.videoWrapper < . /* falls back to 16/9, but otherwise uses ratio from HTML */ padding-bottom: calc(var(—aspect-ratio, .5625) * 100%); >

Иногда можно встретить олдскульный вариант встраивания видео в котором используется теги object и embed, так что если вы стараетесь поддерживать все возможные варианты — добавьте для них обертку:

.videoWrapper iframe, .videoWrapper embed, .videoWrapper object

Но, но . пропорции, легаси контент, пользователи не технари и т.д.

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

1. Для ее применения требуется элемент-обертка, поэтому невозможно прямое копирование/вставка кода с YouTube. Пользователи должны быть опытными.
2. Если у вас есть легаси контент, и вы хотите сделать новый дизайн более отзывчивым, то все старые видео будут требовать корректировку HTML.
3. Все видео должны иметь одинаковое соотношение сторон. В противном случае они будут переведены в другое соотношение сторон, и вы получите «черные полосы заполнения». Или же вам понадобится инструмент с определенным набором классов которые вы будете применять для регулировки соотношения сторон, что тоже является дополнительной сложностью.

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

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

// Find all YouTube videos // Expand that selector for Vimeo and whatever else var $allVideos = $(«iframe[src^=’//www.youtube.com’]»), // The element that is fluid width $fluidEl = $(«body»); // Figure out and save aspect ratio for each video $allVideos.each(function() < $(this) .data(‘aspectRatio’, this.height / this.width) // and remove the hard coded width/height .removeAttr(‘height’) .removeAttr(‘width’); >); // When the window is resized $(window).resize(function() < var newWidth = $fluidEl.width(); // Resize all videos according to their own aspect ratio $allVideos.each(function() < var $el = $(this); $el .width(newWidth) .height(newWidth * $el.data(‘aspectRatio’)); >); // Kick off one resize to fix all videos on page load >).resize();

А вот вариант с плагином FitVids.js

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

тот же плагин на чистом JS

В наши дни jQuery не в фаворе. К счастью, у Дэйва есть версия Vanilla JS:

Источник: odinokun.com

Вставка видео на сайт — инструкция

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

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

Сегодня существует 3 основных способа вставки видео на сайт:

• посредством фреймов;
• при помощи тега video в html5;
• при помощи скриптов.

Вставка фреймов

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

Теперь стоит разобраться с тем, как работает этот код. Он имеет атрибуты height и width, предназначенные для регулировки ширины и высоты контейнера. Эти параметры можно регулировать в соответствии с дизайном сайта. Далее идет пустой атрибут allowfullscreen. Он разрешает расширять видеоконтент на весь экран.

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

Frameborder является рамкой фрейма. В данном она не нужна. Ее можно задать самостоятельно посредством css. Самым важным параметром в этом коде является src. Именно этот параметр указывает ссылку на ролик, который размещен на ютуб. Таким образом, для размещения YouTube-видео у себя на сайте достаточно знать его уникальный id, который идет сразу же после watch?v=:

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

Вставка html-кода видео

В версии языка разметки html 5 у разработчиков появилась возможность вставки видео посредством тега video. Этот способ позволяет вставить видеозапись, не используя скриптов. Более того, тег video может воспроизводить ролик через собственный плеер. Для это прописывается следующий код:

Для указания пути к файлам и их MIME-типа используются одинарные теги source. В данном примере один и тот же файл, вставляется на сайт в трех разных форматах. Для конвертирования видеофайлов можно использовать любой толковый онлайн-сервис. В качестве примера можно вспомнить об online-convert.com.

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

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

Вставки видео при помощи скриптов

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

Ниже приведен пример вставки ролики посредством видеоплеера FlowPlayer. Сначала выполняется подключение скрипта в head:

После в «теле» страницы вставляется видеозапись в любом подходящем месте:

flowplayer(«player», );

Для обеспечения работоспособности этого способа вставки видео необходимо:

• указать корректный путь к файлам;
• обратиться к ссылке с и указать несколько css-стилей;
• задать высоту и ширину видеоплеера.

Разработчики, которые предпочитают использовать старые версии языка разметки, пользуются тегом object, в котором необходимо указать путь к плагину, отвечающему за распознание видео и его воспроизведение. В html5 этот тег не используется.

По своим свойствам теги object и video очень похожи. Но современные браузеры лучше воспринимают именно video. Главное, не забыть прописать следующие атрибуты:

• width/height;
• src;
• type (для указания MIME-типа видеоконтента);
• pluginspage (для указания пути к странице с нужным плагином).

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

Источник: fokit.ru