Добавляем youtube видео на сайт

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

Заходим на Ютуб и находим видео, которое нас интересует. Находим под видео кнопку «Поделиться». Для вставки на сайт выбираем «HTML-код».


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

Нам открывается раздел Youtube с настройками видео.

Поясню что они значат и какие из них вам нужны.

  • Размер видео — выбирайте под ширину вашего сайта. Если у вас адаптивный сайт, проверьте отображение на мобильных устройствах. При качественной верстке видео будет подстраиваться под ширину;
  • Показывать похожие видео после завершения просмотра — если вы добавили видео строго по теме, то рекомендую убрать галочку. Для развлекательных проектов и где задача удержать как можно больше посетителя на сайте — оставляйте;
  • Показывать панель управления — рекомендую включать: очень раздражает, когда не можешь промотать или остановить ролик;
  • Показывать название видео и функции проигрывателя — по желанию;
  • Включить режим повышенной конфиденциальности — если включить этот режим, то Youtube будет сохранять информацию о посетителях только в том случае, если они досмотрят ролик до конца. На деле ни на что не влияет.

Помимо видимых настроек, есть те, которые скрыты — дополнительные настройки видео:

  • autoplay=1 — начинает воспроизводить видео сразу после загрузки страницы. Не рекомендую;
  • loop=1 — зацикливает видео;
  • fs=0 — запрещает разворачивать видео на весь экран. Убирает соответствующую кнопку на панели управления;
  • fmt=6 — задает качество видео. fmt=18 — среднее, fmt=22 — наилучшее. Полезно применять только если у вас красивый красочный ролик, смысл которого именно передать красоту. Во всех остальных случаях советую оставить это на выбор зрителя;
  • iv_load_policy=3 — один из самых полезных параметров. Отключает аннотации к видео, такие как ссылки на канал автора и его другие ролики. Но не отключает рекламу Google.

Добавлять параметры просто: в коде после идентификатора видео добавляем знак «?» и пишем параметры, перечисляя их через «&». Ниже правильный пример:

XHTML

<iframe width=»560″ height=»315″ src=»https://www.youtube.com/embed/aAhPaiajwDY?showinfo=0&autoplay=1&iv_load_policy=3″ frameborder=»0″ allowfullscreen></iframe>

1 <iframe width=»560″height=»315″src=»https://www.youtube.com/embed/aAhPaiajwDY?showinfo=0&autoplay=1&iv_load_policy=3″frameborder=»0″allowfullscreen></iframe>

После настроек, копируем полученный код и вставляем на страницу сайта, предварительно перейдя в режим html-кода. В админке WordPress переключается здесь:

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

Если у вас сайт написан на одном html, или это просто локальных html-файл — инструкция точно такая же. Повторяйте.

Вставка аудио

Форматы аудио-файлов:

  • mp3
  • wav
  • ogg

Для вставки аудио-плеера используется следующий код:

<audio controls="controls">
	<source src="song.ogg" type="audio/ogg">
	<source src="song.mp3" type="audio/mpeg">
<audio>

В браузере Google Chrome плеер будет выглядеть:

Атрибуты тега для плеера:

Атрибут Значение Описание
autoplay autoplay Указывает, что аудио должен начать играть, как только будет готов
controls controls Указывает, что элементы управления воспроизведением должны отображаться
loop loop Указывает, что аудио должно начаться снова, когда оно будет закончено
preload auto metadata none Определяет, должно ли аудио быть загруженным при загрузке страницы
src url Указывает адрес аудио для проигрывания

Другие возможности вставки аудио на сайт

  1. <a href="имя_файла.mp3">Щелкни <a>
  2. <bgsound src="04.wav" loop="5">

    *только для форматов: wav, mp3, aiff, wma

  3. <embed src="имя_файла.wav" height="150" width="180">

Разметка

Для демонстрации HTML-видео на сайте достаточно следующих линий:

<video>
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>

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

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

<video src="movie.webm"></video>

А пока сосредоточимся на предыдущем, более распространенном сейчас варианте. Самый важный момент – правильно указать MIME-тип для обработки видеофайлов сервером в заголовке . В противном случае видео может работать некорректно, даже если используется локальная копия с вашего сайта. В Apache httpd.conf достаточно добавить следующие строки:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Если ваше приложение работает на платформе Google App Engine, нужно добавить в файл app.yaml примерно следующий код (отдельно для каждого формата):

- url: /(.*\.ogv)
  static_files: videos_folder/\1
  mime_type: video/ogg
  upload: videos_folder/(.*\.ogv)

Чтобы повысить эффективность работы клиента, при использовании нескольких форматов нужно указывать в тегах source атрибут type. В этом случае браузер сможет выбрать подходящий формат для загрузки и воспроизведения. Другими словами, он не будет загружать форматы, которые не сможет воспроизвести, а значит, сайт будет работать быстрее.

Как вставить видео на сайт? Снимаем нагрузку с движка

Конкретный пример вставки видео мы рассмотрим с сервиса ютуб, так как он самый популярный в рунете. Как произвести регистрацию и как вставлять видео при помощи плагина video embedder, надеюсь, вы знаете.

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

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

Приступим. Переходим на сайт ютуб, ищем видео, которое хотим вставить к себе в статью или просто на сайт. Затем нажимайте кнопку «поделиться», на скриншоте под номером 1.

2. Выбирайте HTML код; 3. Копируйте полученный код.

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

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


Чтобы вставить код, нужно перейти в текстовый редактор, и в нужное место вставить код.

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

На скриншоте, код обведенный в красную рамку, параметры height и width задают ширину и высоту окна, их пожеланию можно изменить.

Еще я выровнял окно посредине. Делается это посредством заключения кода в блок div и придав атрибут align.

<div align="center">код с ютуба</div>

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

Новость. Вы слышали, что в Америке хотят сделать дефолт? У них всемирный долг составляет более 16 триллионов долларов. Нашел прикольную картинку.

Как вам такие масштабы долга?))). Я думаю, что если произойдет дефолт, то будет всемирный переворот, а вы как думаете? Доллары еще в носках храните? :Ъ

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

Почему видео лучше заливать на Youtube, а не на свой сайт

Уверен у многих возник вопрос: как добавить видео, которое лежит на компьютере, а в интернете его нет? Тут есть 2 варианта:

  • Загрузить на свой хостинг;
  • Загрузить на Ютуб.

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

Во-вторых, если видео-файл лежит у вас на хостинге, то каждый просмотр — создает лишнюю нагрузку на сервер, она вам нужна?)

Преимущества размещения на сервисе Youtube очевидны — неограниченное пространство, и вся нагрузка ложится на Ютуб.

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

Media Encoding

Browser vendors all support different codec and container formats, so you should encode your video more than once and serve several files simultaneously to ensure your visitor will be able to watch them. A common approach (at the time of writing, i.e. spring 2012) is to serve the following:

  • Make one version that uses WebM (VP8 + Vorbis)
  • Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container
  • Make another version that uses Theora video and Vorbis audio in an Ogg container

Be aware that this is CONSTANTLY CHANGING, so before you set up your video do research on what is currently supported and what the future outlook does look like!

Видеоформаты

можно представить как ZIP-файл, содержащий закодированный видео- и аудиопоток. В Интернете актуальны форматы WEBM, MP4 и OGV:

  • = H.264 + AAC
  • = Theora + Vorbis
  • = VP8 + Vorbis

Видеотег развивается удивительно быстро. Всего год назад он поддерживался только браузером Safari и только в стабильной версии. Теперь видео HTML5 поддерживают все современные браузеры, включая IE9. Что касается кодеков, разработчики Firefox, Chrome и Opera договорились включить поддержку WEBM в качестве общего видеоформата, используя проект WebM. Internet Explorer также будет его поддерживать, если кодек установлен на компьютере (мы надеемся, что в будущем это требование будет отменено).

Примечание. На момент составления руководства браузер Safari не поддерживал формат WEBM.

В этом примере видно, что браузер может воспроизвести один или два из трех указанных нами форматов (если отображаются все три, считайте, что вам повезло):

На момент составления руководства (август 2010 г.) наиболее безопасная комбинация форматов, гарантирующая воспроизведение видео в любом браузере, выглядела примерно так, как в этом фрагменте:

<video>
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
  Video tag not supported. Download the video <a href="movie.webm">here</a>.
<video>

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

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

<video>
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  Video tag not supported. Download the video <a href="movie.webm">here</a>.
<video>

Одна из основных проблем, связанных с форматом MP4, заключается в том, что его видеокодек (h.264) закрыт, а лицензионные сборы за его использование рассчитываются очень сложно. Более подробную информацию об этом формате можно найти в .

Еще одна проблема с форматом MP4 – необходимость указывать атрибут type более точно, чем для других форматов, и с учетом профиля, который использовался для кодировки видео. Самый распространенный профиль – avc1.42E01E, mp4a.40.2, но для уверенности обязательно сверяйтесь с этим .

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

Атрибуты¶

Видео начинает воспроизводиться автоматически после загрузки страницы.
Атрибут для определения временных диапазонов буферизованных носителей. Этот атрибут содержит объект .
Добавляет панель управления к видеоролику.
Этот атрибут указывает, следует ли использовать CORS для извлечения связанного изображения.
Задаёт высоту области для воспроизведения видеоролика.
Повторяет воспроизведение видео с начала после его завершения.
Логический атрибут, который определяет значение по умолчания для аудио дорожки, содержащуюся в видео. Если атрибут указан, то аудио дорожка воспроизводиться не будет. Значение атрибута по умолчанию — «ложь», и это означает, что звук будет воспроизводиться, когда видео воспроизводится.
Атрибут , указывающий все диапазоны воспроизводимого видео.
Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
Используется для загрузки видео вместе с загрузкой веб-страницы.
Указывает путь к воспроизводимому видеоролику.
Задаёт ширину области для воспроизведения видеоролика.

autoplay

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

Синтаксис

Значения

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

Значение по умолчанию

По умолчанию этот атрибут выключен.

controls

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

Синтаксис


Значения

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

Значение по умолчанию

По умолчанию этот атрибут выключен.

height

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

Синтаксис

Значения

Любое целое положительное число в пикселях или процентах.

Значение по умолчанию

Исходная высота берётся из параметров видео. Если эти параметры не доступны, тогда принимается равной высоте картинке, заданной атрибутом . В противном случае высота видео устанавливается 150 пикселей.

loop

Зацикливает воспроизведение видео, оно повторяется каждый раз с начала после завершения.

Синтаксис

Значения

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

Значение по умолчанию

По умолчанию этот атрибут выключен.

poster

Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не вопроизводится. Само изображение может быть в любом доступном формате: GIF, PNG, JPEG. Если атрибут не указан, браузер постарается отобразить первый кадр видео.

Синтаксис

Значения

В качестве значения принимается полный или относительный путь к графическому файлу.

Значение по умолчанию

Нет.

preload

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

Синтаксис

Значения

Не загружать видео.
Загрузить только служебную информацию (размеры видео, первый кадр, продолжительность и др.).
Загрузить видео целиком при загрузке страницы.

Значение по умолчанию

src

Указывает путь к воспроизводимому видеоролику. Для этой же цели можно использовать элемент .

Синтаксис

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

width

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

Синтаксис

Значения

Любое целое положительное число в пикселях или процентах.

Значение по умолчанию

Исходная ширина берётся из параметров видео, если это значение не доступно, тогда принимается равной ширине картинке, заданной атрибутом . Если этот атрибут не установлен, ширина устанавливается как 300 пикселей.

Вставка аудио

Для того чтобы вставить аудио на страницу у нас в распоряжении опять 2 варианта: с mp3-плеером и без него — с помощью кода HTML5. У этого способа вставки аудио те же плюсы и минусы: он проще, но не поддерживается старыми браузерами (IE ниже v.9).

Способ 1. Код вставки аудио на страницу (где «papka/name.…» — путь к аудиофайлу, а «name» — его имя):

<audio controls>
    <source src="papka/name.mp3">
    <source src="papka/name.ogg">
    <source src="papka/name.wav">
    <p>Ваш браузер не поддерживает прослушивание</p> 
    <a href="papka/name.mp3">Скачать аудио</a>
</audio>

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

Для снижения нагрузки на ваш сервер, желательно хранить аудиофайлы на стороннем ресурсе, таком как Я.Диск (см. ссылку выше).

При сборке аудио-плеера важны два параметра: адрес плеера — вы можете указать папку своего домена (что предпочтительнее), или подгружать его прямо с указанного сайта. Это отразится в коде, который вы сможете скопировать для вставки на веб-страницу, сразу после окончания сборки.

Второй параметр будет влиять на размеры и вид панели плеера, а так же надписи «Прослушать» — её вы измените на свою. Выглядеть панель будет как на следующем скриншоте, но вы сможете изменить цвет, форму и кнопки управления на более красивые:

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

структура версии заголовки абзацы списки изображения ссылки таблицы формы видео аудио Справочник HTML Справочник CSS Вёрстка сайта

Поделиться с друзьями:

Attributes

The element has the following specific attributes:

  • gives the address of the media resource to show
  • is a CORS settings attribute
  • gives the address of an image file that the user agent can show while no video data is available
  • sets the preload behavior, valid values being , and
  • is a boolean attribute. When present, the user agent will automatically begin playback of the video as soon as it can do so without stopping
  • can be used to link multiple media elements together by implicitly creating a MediaController
  • is a boolean attribute that, if specified, indicates that the media element is to seek back to the start of the media resource upon reaching the end
  • is a boolean attribute that controls the default state of the audio output of the media resource, potentially overriding user preferences
  • is a boolean attribute that, if present, indicates that the author has not provided a scripted controller and would like the user agent to provide its own set of controls
  • & specify the dimensions of the element in pixels

С этим читают