Html вставить видео: Атрибут autoplay | htmlbook.ru - Блог сумасшедшего сисадмина

Содержание

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

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

Сперва у вас должен быть видео-ролик, который вы хотите добавить. Предположим, что таковой у вас есть и сохранен на вашем компе.
Теперь идите на сайт 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.

Твитнуть

(Visited 54 times, 1 visits today)

Тег HTML видео на сайт

Рейтинг: 4 из 5, голосов 13

21 декабря 2017 г.

Тег <video> HTML используется для вставки на сайт воспроизводимого видео. Обычно содержит вложенные элементы <source> для указания нескольких вариантов источника видео-файла.

Для указания субтитров, глав и другой текстовой информации используется тег <track>.

Этот тег был введен в HTML5.

Синтаксис

<video>вложенные теги / альтернативный текст</video>

Альтернативный текст. Вы можете указать внутри тега <video> альтернативный текст. Он будет выведен, если ваш браузер не поддерживает тег.

Примеры использования <video> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Вставка видео на сайт</title>
</head>
<body>
<video autoplay controls loop>
<source src="/video/my_video.mp4" type="video/mp4">
<source src="/video/my_video.ogg" type="video/ogg">
Воспроизведение видео-файла не поддерживается браузером 
</video>
</body>
</html>

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

Тег
<video>	Да	9+	Да	Да	Да
Поддержка форматов
MP4	Да	Да	Да	Да	Да
WebM	Да	Нет	Да	Нет	Да
Ogg	Да	Нет	Да	Нет	Да

Атрибуты

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