Вставить видео: html-тег, youtube и другие способы – Как вставить видео ролик на сайт (3 способа)

Как вставить видео на сайт? Подробно! — Моя мечта

В этой статье мы поговорим о том, как вставить видео на сайт и научимся:

  1. Размещать свои файлы на видео хостингах и отображать их на сайте.
  2. Загружать видео на свой хостинг и отображать их на сайте с помощью плеера.

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

Как загрузить видео на Youtube:

  1. Первым делом Вам необходимо войти в свой аккаунт YouTube.
  2. Нажмите кнопку Добавить видео в верхней части страницы.
  3. Выберите ролик для загрузки. (Учитывайте, что видео не должно нарушать авторские права. Если Вы хотите наложить на видео известную музыку, то придется ее купить).
  4. Пока файл загружается заполните основную информацию о ролике и при необходимости дополнительные параметры.
  5. Чтобы добавить видео на YouTube, нажмите Опубликовать.
  6. Пока вы не нажмете кнопку Опубликовать, видео доступно только вам.

С более подробной инструкцией по загрузке видео на Youtube можете ознакомиться на странице supporta

Вставить на сайт видео с Youtube:

Чтобы вставить уже загруженное (имеющееся) на Youtube видео:

  1. Откройте интересующее Вас видео на Youtube;
  2. Нажмите на находящуюся под видео кнопку «Поделиться»;
  3. Выберите вкладку «HTML» и скопируйте появившийся код; (Чтобы скопировать код быстрее: нажмите правой кнопкой мыши по видео и выберите пункт «Копировать HTML-код.)
  4. Вставьте скопированный код в нужную часть сайта.
  5. Сохраните изменения и обновите страницу.

Вставить на сайт видео с Vimeo:

  1. Откройте понравившееся на Vimeo Вам видео;
  2. Нажмите на находящуюся под видео кнопку «Share»;
  3. В появившимся окошке в пункте «Embed» скопируйте код;
  4. Вставьте скопированный код в нужную часть сайта.
  5. Сохраните изменения и обновите страницу.

Вставить на сайт видео с Rutube:

  1. Откройте нужное на RuTube Вам видео;
  2. Нажмите на находящуюся под видео кнопку «поделиться»;
  3. Выберите вкладку «Код вставки»
  4. Скопируйте появившийся код;
  5. Вставьте скопированный код в нужную часть сайта.
  6. Сохраните изменения и обновите страницу.

Вставить на сайт видео с VK (Вконтакте):

 

  1. Откройте видео; (Возможно понадобится авторизация).
  2. Нажмите на находящуюся под видео кнопку «Еще»;
  3. Выберите вкладку «Экспортировать»  в появившемся окне «Код для вставки» скопируйте появившийся код;
  4. Вставьте скопированный код в нужную часть сайта.
  5. Сохраните изменения и обновите страницу.

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

Теперь рассмотрим варианты воспроизведения видео с загруженным видео на свой сервер.

Вставить видео на сайт с помощью HTML5

Для этого способа Вам понадобится тег video

<video>
 <source src="URL">
</video>
  1. Загружаем на сервер видео;
  2. Копируем вышеуказанный код;
  3. Вставляем в нужную нам часть сайта скопированный код;
  4. Изменяем URL на путь к файлу который мы разместили на хостинге
  5. Сохраняем изменения и обновляем страницу.

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

В первую очередь хотелось бы сказать о таких атрибутах как height (высота), width  (ширина).

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

  • src — это самый важный атрибут, он указывает путь к видеоролику.
  • autoplay
    — воспроизведение видео сразу после загрузки страницы.
  • loop — повтор воспроизведения видео по завершению
  • poster  — указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
  • preload — загрузка видео вместе с загрузкой веб-страницы.

Вставить видео на сайт с помощью плеера

Сейчас в интернете есть множество различных плееров которые вы можете использовать на своем сайте. В качестве примера я выбрал один из популярных flowplayer.

  1. Скачайте плеер, а затем его разархивируйте;
  2. Создайте папку и поместите в нее файлы из архива;
  3. Подключите javascript-файл плеера к html-файлу. Для этого внутри тега head, пропишите следующий код:
    <script src="flowplayer.min.js"></script>

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

  4. Теперь разместим сам плеер в коде страницы и соответственно видео файл.
     <!-- the player -->
     <div data-swf="flowplayer.swf" data-ratio="0.4167">
     <video>
     <source type="video/webm" src="https://путь к вашему видео файлу если он в формате .webm">
     <source type="video/mp4" src="https://путь к вашему видео файлу если он в формате .mp4">
     </video>
     </div>

Последнюю версию вы всегда можете скачать на официальном сайте.  Нужна авторизация.

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

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

Традиционно вид большинства html страниц выглядит примерно следующим образом:

<!doctype html>
<head>
Здесь подключаются скрипты и прочие файлы
</head>
<body>
Это тело сайта здесь размещается основной код страницы
</body>

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

Но так выглядит самая элементарная страница, на практике же тело сайта состоит из множества различных частей (блоков).

Например один из них div.

Мы можем разместить код нашего видео в блок и задать этому блоку нужные параметры … например выравнять по центру.

<div align="center">
</div>

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

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

После сохраните изменения и обновите страницу для проверки.

Как вставить видео в статью WordPress

Чтобы разместить видео в статье или в странице wordpress достаточно перейти в режим «текст» и вставить код в нужную вам часть (здесь же вы можете изменять значения атрибутом, таких

height, width) после перехода в режим «визуально» будет отображаться плеер.

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

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

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

Здравствуйте, уважаемый посетитель!

Сегодня мы затронем еще один вопрос оформления контента и посмотрим, как можно вставить видео с YouTube на сайт.

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

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

скриншот 29

Однако, следует учесть, что предоставляемый сервисом YouTube HTML-код видеороликов предусматривает применение контейнера <iframe> с фиксированными значениями ширины и высоты. Что несколько затрудняет использования такого видеоплеера при встраивании его на сайты с резиновой версткой.

Поэтому здесь будет показан не совсем ординарный, но достаточно простой способ использования стилей CSS. С помощью которого несложно будет решить эту проблему и отображать видео с YouTube с учетом резиновой верстки на всем диапазоне, который для нашего сайта составляет 320px÷1920px.

  • Получаем с YouTube нужный видеоролик
  • Вставляем HTML-код видео в оформляемую страницу
  • Встраиваем видеоплеер YouTube с помощью стилей CSS
  • Исходные файлы сайта

Получаем с YouTube нужный видеоролик


Как и ранее при создании сайта мы всегда стараемся использовать только легальные методы. И в данном случае мы не станем «по черному» скачивать видео и показывать его на своем сайте с помощью каких-либо сторонних видеоплееров. Так как такие действия, в случае отсутствия предварительного письменного разрешения YouTube, нарушают подпункт A пункта 5.1 Условия использования YouTube.

скриншот 30

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

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

Ну а теперь посмотрим, как это практически сделать на примере размещения следующей статьи сайта — «Статистика угонов за 1916 год». Где в первом разделе предусматривается использование видео по основной теме статьи. Ее HTML-код можно посмотреть в разделе Исходные файлы сайта в прилагаемых дополнительных материалах в файле «/articles/stati/statistika-ugonov-2016.php.»

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

скриншот 18

Подбор в YouTube видео нужной тематики

Рис.1 Подбор в YouTube видео нужной тематики

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

Выбор во вкладке Поделиться опции Встроить

Рис.2 Выбор во вкладке Поделиться опции Встроить

Ну а теперь осталось лишь только обычным способом скопировать HTML-код выбранного видеоролика.

Копирование HTML-кода видеоролика

Рис.3 Копирование HTML-кода видеоролика

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

  1. <iframe width=«560» height=«315» src=«https://www.youtube.com/embed/ZRrxsFRszjg» frameborder=«0» allow=»autoplay; encrypted-media» allowfullscreen></iframe>

Рис.4 HTML-код видео с YouTube

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

Копирование HTML-кода другим способом

Рис.5 Копирование HTML-кода другим способом

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

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


Для того, чтобы иметь возможность отображать встраиваемое видео однотипно с используемыми в контенте изображениями, применим типовое решение по размещению графических элементов. При котором видеоплеер будет располагаться по центру с размером в 60% от ширины области контента (в предыдущей статье для этого типа мы определили класс «img-center60»).

А кроме того, для возможности стилизовать плеер для работы в режиме резиновой верстки, поместим полученный HTML-код в дополнительный блок-обвертку <dιv> с классом «video-pleer». В итоге фрагмент HTML-кода для вставки видео с YouTube примет следующий вид.

  1. <div class=«img-center60»>

  2. <div class=«video-pleer»>

  3. <iframe width=«560» height=«315» src=«https://www.youtube.com/embed/ZRrxsFRszjg» frameborder=«0» allow=»autoplay; encrypted-media» allowfullscreen></iframe>

  4. </div>

  5. </div>

Рис.6 HTML-код видео с YouTube

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

Это обусловлено тем, что, как ранее отмечалось, в теге <iframe> заданы фиксированные значения ширины и высоты. Что, естественно, не позволяет видеоплееру подстраиваться под нужный размер в зависимости от разрешения экрана.

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

Вид видеоплеера с фиксированной шириной при разрешении 1920px

Рис.7 Вид видеоплеера с фиксированной шириной при разрешении 1920px.

Вид видеоплеера с фиксированной шириной при разрешении 1920px

Рис.8 Вид видеоплеера с фиксированной шириной при разрешении 1280px.

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

Встраиваем видеоплеер YouTube с помощью стилей CSS


Для того, чтобы совместить встраиваемый видеоплеер с резиновой версткой сайта используем возможности, которые предоставляют свойства CSS. Так для блока-обвертки <dιv> выполним следующие действия:

  • Из тега <dιv> с классом «img-center60» сформируем пустой элемент с относительным позиционированием relative, в который в дальнейшем разместим полученный с YouTube видеоплеер, представленный в виде тега <iframe>.

    При этом высота его будет определяться не свойством height, а внутренним отступом, в данном случае padding-bottom.

  • Назначим выше сформированному блоку <dιv> пропорции размера, соответствующие формату, который определен атрибутами ширины и высоты тега <iframe> (width=«560», height=«315»). Нетрудно подсчитать, что эти пропорции соответствует стандартному формату видео 16:9 (560/35 : 315/35). При котором высота составляет 56.25% от ширины.

А для полученного с YouTube контейнера <iframe> с классом «video-pleer» определим:

  • Ширину и высоту тега <iframe> в относительных величинах со значением в 100% от родительского блока-обвертки <dιv>.

    Это необходимо для того, что бы размер видеоплеера в дальнейшем определялся не фиксированными значениями ширины и высоты, а соответствовал размеру родительского блока. Который в свою очередь, помещенный в типовой контейнер <dιv> с классом «img-center60» при использовании резиновой верстки подстраивался по ширине в зависимости от разрешения экрана.

  • Кроме того назначим тегу <iframe> абсолютное позиционирование absolute, тем самым определив местоположение видеоплеера внутри родительского блока-обвертки <dιv>, которому ранее присвоено относительное позиционирование relative.

В итоге все эти действия можно описать следующей таблицей стилей CSS:

  1. .video-pleer {

  2. height: 0;

  3. overflow: hidden;

  4. position: relative;

  5. padding-bottom: 56.25%;

  6. }

  7. .video-pleer iframe {

  8. height: 100%;

  9. width: 100%;

  10. position: absolute; top: 0; left: 0;

  11. }

Рис.9 CSS-код для встраивания видеоплеера YouTube

Как видно, CSS-код получился довольно компактным без каких-либо излишеств.

Ну а теперь осталось проверить, как после внесенных дополнений в таблицу стилей CSS сайта, находящуюся в файле «main.css», будет вести себя стилизованный видеоплеер YouTube.

Вид стилизованного видеоплеера при разрешении 1280px

Рис.10 Вид стилизованного видеоплеера при разрешении 1280px.

Вид стилизованного видеоплеера при разрешении 1920px

Рис.11 Вид стилизованного видеоплеера при разрешении 1920px.

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

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

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

Исходные файлы сайта


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

  • Файлы каталога www
  • Таблицы базы данных MySQL

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

С уважением, Николай Гришин

Как вставить видео на сайт Joomla, с youtube (ютуба), или с другого сайта

Joomla вставка видео

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

Стандартный функционал Joomla хоть и предоставляет инструменты по решению большинства типовых задач в сайтостроении, но вот, что касается добавления видео материалов на страницы будущего сайта, здесь все достаточно скудно и ограниченно. Таким образом, как правило, в CMS Joomla вставка видео контента реализуется с использованием дополнительных расширений. Поэтому, в данной статье, мы с Вами рассмотрим наиболее популярный плагин, по добавлению видео материалов на сайт Joomla, под названием AllVideos.

Но перед тем я, все же хотел бы показать Вам, как в Joomla вставить видео с ютуба – ручным способом, используя стандартные средства. Итак, для начала переходим на сайт YouTube, и выбираем необходимое видео.

Joomla вставка видео

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

Joomla вставка видео

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Далее переходим в панель администратора Joomla, и используя менеджер плагинов открываем страницу настроек плагина визуального текстового редактора TinyMCE.

Joomla вставка видео

Данный редактор поставляется в стандартном функционале CMS и используется в качестве редактора содержимого материалов по умолчанию. При этом, для безопасности в его настройках приведен список запрещенных тегов, которые нельзя использовать для форматирования контента. Один из таких тегов iframe, который как раз необходим для добавления видео. А значит в параметре “Запрещённые теги”, просто удаляем данный тег и сохраняем изменения.

Joomla вставка видео

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

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

Joomla вставка видео

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

Joomla вставка видео

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

Joomla вставка видео

Кликая по ссылке “Download”, официальной страницы расширений Joomla, Вас перенаправят на сайт разработчика данного расширения, где в самом низу главной страницы Вы найдете ссылку, для скачивания архива.

Joomla вставка видео

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

Select template – выбор шаблона.

Joomla вставка видео

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Local Video Folder – папка для хранения видеофайлов.

Default width (inpx) for videos – ширина плеера в пикселях.

Default height (in px) for videos – высота плеера впикселях.

Flash/MP4/WebM/OGG Theora video player transparency – прозрачностьплеера

Flash/MP4/WebM/OGG Theora video player background color – цветфона.

Display JW Playercontrols – отображение элементов управления плеера.

Joomla вставка видео

Помимо, видео плагин AllVideos, так же воспроизводит и аудио материалы, то есть в его функционале предусмотрен аудиоплеер, для которого предусмотрена отдельная группа настроек.

Теперь давайте рассмотрим,как вставить видео в joomla с youtube при помощи AllVideos. Для начала необходимо узнать идентификатор необходимого видео, поэтому опять же возвращаемся на Youtube.

Joomla вставка видео

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

{youtube}aCqc2eRj5pE{/youtube}

{youtube}aCqc2eRj5pE{/youtube}

Где, aCqc2eRj5pE идентификатор отображаемого видео.

Joomla вставка видео

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

{formatORprovider}filenameORvideoID|width|height|autoplay {/formatORprovider}

{formatORprovider}filenameORvideoID|width|height|autoplay {/formatORprovider}

Где formatORprovider – формат видео или специальный тег для конкретного сервиса хранения видео, filenameORvideoID– имя отображаемого файла или его идентификатор, width – ширина видео, height – высота видео, autoplay– автовоспроизведение.

Полный список доступных форматов и поддерживаемых сервисов приведен на странице документации.

Более подробная информация по работе с плагином AllVideos рассмотрена в курсе Joomla-Мастер. На этом вопрос как разместить видео на сайте joomla для Вас исчерпан. Всего Вам доброго и удачного кодирования!!!

Joomla вставка видео

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео Joomla вставка видео

Joomla-Ученик

12 фишек без которых Вы не создадите полноценный сайт на Joomla!

Смотреть

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

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

Здравствуйте!  В этом уроке разберем как вставить видео на сайт.  Существуют 2 способа вставки видео на сайт. Это используя сервис видеохостинга как например ютуб, рутуб и им подобные, а второй используя тег video, который появился в HTML5.
Самый простой  это конечно же первый способ.  Если вы хотите  загрузить видео  с видеосервиса  то вам придется  выполнить 3 пункта:
1.  Сперва надо зарегистрироваться на видеосервисе (Например: Youtube)
2. После регистрации вы сможете  загрузить видео
3. Остается получить код видео и собственно вставить его на свой сайт

 

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

Сперва у вас должен быть  видео-ролик, который  вы хотите добавить. Предположим, что  таковой у вас есть и сохранен на вашем компе.
Теперь идите  на сайт www.youtube.com.  Далее  нажимайте  на кнопку  «Войти»,  в верхнем правом углу.  После чего  входите с помощью учетной записи Google.  Если у вас нет аккаунта на Гугл, то вам следует зарегистрироваться.

После того, как войдете на youtube под своим аккаунтом, жмите на кнопку «Добавить видео». Откроется страничка с выбором файла для загрузки, где  вы можете выбрать нужный файл с видео, хранящемся у вас на компьютере.

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


Когда Вы перейдете  на страницу с видео, то увидите ваше только что загруженное видео.


3. Теперь все что вам остается та это получить код для вставки видео на сайт.  Для этого  следует клацнуть на  «Поделиться», а потом на вкладке «HTML-код».

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

 

Вот пример кода:
<Iframe width = «560» height = «315» src = «// www.youtube.com/embed/FkX88N4pCow?rel=0» frameborder = «0» allowfullscreen> </ iframe>

Вставка видео  на сайт  с помощью тега video.

Тег video, который появился в HTML5,   позволяет добавлять видео на веб-страницу с помощью плеера правда поддерживает такие форматы видео: ogg, mpeg4, webm.
Вот его синтаксис:

<video>
 <source src="URL">
</video>

Имеет следующие атрибуты:
autoplay —  видео будет воспроизводиться сразу после загрузки веб-страницы.
controls —  позволяет добавить элементы управления видео в плеер
height — задает высоту видео-плеера
loop —  зацикливает воспроизведение видео.
src —  задает путь к файлу с видеороликом.
width — позволяет задать ширину видео

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

<!DOCTYPE html><html>
 <head>
  <metacharset="utf-8">
  <title>video</title>
 </head>
 <body>
  <videoheight="400"controls="controls"poster="video/duel.jpg">
   <sourcesrc="video/duel.ogv"type='video/ogg; codecs="theora, vorbis"'>
   <sourcesrc="video/duel.mp4"type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <sourcesrc="video/duel.webm"type='video/webm; codecs="vp8, vorbis"'>
   Тег video не поддерживается вашим браузером. 
   <a href="video/duel.mp4">Скачайте видео</a>.
  </video>
 </body>
</html>

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

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

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

Вот пример вставки флеш-ролика с помощью тега embed.

<!DOCTYPE html>
<html>
  <head>
    <metacharset="utf-8">
    <title>Пример кода с тегом EMBED</title>
  </head>
  <body>
    <embed src="images/examle.swf"width="400"height="300"
           type="application/x-shockwave-flash"
           pluginspage="http://www.macromedia.com/go/getflashplayer">  
  </body>
</html>

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

Смотрите видеоурок как добавить видео на сайт

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Твитнуть

Поделиться

Также читайте

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *