How to embed video in html5 - tutorial republic

HTML5

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

Самый простой код вставки видео будет таким:

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

Где film.webm — ссылка на воспроизводимый ролик.

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

<video controls>

<source src="videos/play.mp4" type="video/mp4">

<source src="videos/play.ogv" type="video/ogg">

<source src="videos/play.webm" type="video/webm">

</video>

video — контейнер, отображающий ролик.
source — тег, содержащий информацию о видео

Обратите внимание, что в примере код содержит ссылки аж на три ролика разных форматов. Дело в том, что пока разные браузеры поддерживают не все кодеки, и возможные проблемы с воспроизведением решаются кодированием одного и того же ролика с помощью разных кодеков и одновременным добавлением файлов в тег.
controls — включает панель воспроизведения.
src — задаёт путь к проигрываемому ролику.
type — указывает тип контента, на который ссылается атрибут src.
Есть и дополнительные, не попавшие в код, атрибуты, позволяющие настроить проигрывание.
width — определяет ширину области отображения.
height — задаёт высоту.
autoplay — воспроизводит ролик автоматически после загрузки страницы.
loop — зацикливает воспроизведение.
preload — загружает видео вместе со страницей.
poster — содержит адрес изображения, которое будет показываться вместо ролика, если он вдруг по каким-либо причинам не воспроизведётся.

Definition and Usage

The tag defines a container for an external resource,
such as a web page, a picture, a media player, or a plug-in application.

Warning

Most browsers no longer support Java Applets and Plug-ins.

ActiveX controls are no longer supported in any browsers.

The support for Shockwave Flash has also been turned off in modern browsers.

Suggestion

To display a picture, it is better to use the tag.

To display HTML, it is better to use the tag.

To display video or audio, it is better to use the and tags.

Attributes

Attribute	Value	Description
height	pixels	Specifies the height of the embedded content
src	URL	Specifies the address of the external file to embed
type	media_type	Specifies the media type of the embedded content
width	pixels	Specifies the width of the embedded content

Default CSS Settings

Most browsers will display the element with the following default values:

embed:focus { outline: none;}

❮ Previous
Complete HTML Reference
Next ❯

Теги объектов

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

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

OBJECT сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает.

PARAM предназначен для передачи значений параметров Java-апплетам или объектам веб-страницы, созданным с помощью тегов APPLET или OBJECT.

HTML Теги

<!—…—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Customizing a YouTube Video in HTML5

Now that you know how to embed a YouTube video in HTML, you should also understand how to modify the way it works. By adding some parameters to the end of the URL in the embedding code, you can affect the behavior of the player. To use a parameter, include a question mark () at the end of the URL, and then add one or multiple parameters along with their values.

The parameter allows you autoplay YouTube embedded videos on your web page. Adding to the URL will make the video start playing immediately after the main page and the video loads, while will not.

Example Copy

The parameter lets you loop the video indefinitely or until the user stops it manually. Using makes the video start over again after it ends, while means it will stop after playing once.

Example Copy

The parameter specifies if multiple YouTube videos should be played one after another in consecutive order. This allows you to create a personal playlist on your site.

Example Copy

See a few more handy parameters you can use in a table below:

Parameter	Definition
color	When set to white, the already watched part of the video will be highlighted in white in the progress bar
disablekb	When set to 1, the video player will not react to keyboard controls
fs	When set to , the fullscreen button will stay visible
modestbranding	When set to 1, the video player will not show the YouTube logo

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

HTML5 and comparison

You don’t choose between the HTML5 video element <video> and an <iframe> as they do different things. But what if you want to achieve the same front-end results? For example, creating a full screen video background for your page?

With the video element, your browser can play a video natively, as opposed to a plugin such as Flash. An iframe allows you to load the source of another URL into your page. Because the iframe loads from external sources, such as Vimeo or YouTube, you can’t easily handle them, and the page will load slowly.

We created a test for each version as a demonstration – we kept the content the same and the only difference was in the <iframe> and <video> tags. You can see the results below.

Result: 15 requests : 3.39s

<video>

Result: 4 requests : 0.55s

The <iframe> supports the video URL from YouTube or Vimeo; the HTML5 <video> allows only MP4, WebM and Ogg formats. So, for this, you have to convert the video URL to this format. You can find a couple of free online tools; the MP4 format is supported by browsers.

The HTML5 <video> tag accepts the following attributes:

Attribute	Value	Description
autoplay	autoplay	Specifies that the video will start playing as soon as it is ready
controls	controls	Specifies that video controls should be displayed (such as a play/pause button etc)
height	pixels	Sets the height of the video player
loop	loop	Specifies that the video will start over again, every time it is finished
muted	muted	Specifies that the audio output of the video should be muted
poster	URL	Specifies an image to be shown while the video is downloading, or until the user hits the play button
preload	auto metadata none	Specifies if and how the author thinks the video should be loaded when the page loads
src	URL	Specifies the URL of the video file
width	pixels	Sets the width of the video player

Source: http://www.w3schools.com/TAGS/tag_video.asp

You should note that the autoplay attribute on the HTML5 <video> tag doesn’t work on mobile devices such as the iPad and iPhone.

Here is a separate warning featured on the Safari HTML5 Reference page that explains why embedded media cannot be played in Safari on iOS:

We hope that you found this post useful; good luck with embedding videos into your website!

HTML Справочник

HTML Теги по алфавитуHTML Теги по категорииHTML ПоддержкаHTML АтрибутыHTML ГлобальныеHTML СобытияHTML Названия цветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор кодировокHTML URL кодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP методыКовертер PX в EMКлавишные комбинации

HTML Теги

<!—…—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

Параметр ALIGN

HTML:

3.2

XHTML:

1.0

1.1

Описание

Определяет выравнивание объекта на странице и способ его отображения совместно
с другими нижележащими элементами вроде текста

Аргументы

absmiddle: Выравнивание середины объекта по середине текущей строки.
baseline: Выравнивание объекта по базовой линии текущей строки.
bottom: Выравнивание нижней границы объекта по окружающему тексту.
left: Выравнивает объект по левому краю окна, текст обтекает его справа.
middle: Выравнивание середины объекта по базовой линии текущей строки.
right: Выравнивает объект по правому краю окна, текст обтекает слева.
texttop: Верхняя граница объекта выравнивается по самому высокому текстовому элементу
текущей строки.
top: Верхняя граница объекта выравнивается по самому высокому элементу текущей
строки.

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

bottom

Пример 2. Выравнивание объекта

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Тег EMBED, параметр align</title>
</head>
<body>
<embed src=»movie.avi» width=»400″ height=»300″
align=»left»></embed>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</body>
</html>

Скрипты

Для вставки видео на страницы можно использовать и специальные плеера — написанные, в основном, на JavaScript с использованием библиотеки JQuery, приложения. К минусам их эксплуатации относится относительная сложность установки, к плюсам — обилие настроек.

В общем случае процесс подготовки веб-проигрывателей к работе выглядит так.

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

К сожалению, подробное описание работы с Web-плеерами — тема отдельной статьи, поэтому дальше задерживаться на нём не буду, а опишу лучше третий метод.

Introduction to HTML5 tag

The <video> element is new in HTML5. The data of this element is supposed to be video but it can also have audio or images associated with it.

It works in all modern browsers (IE9 and above). In HTML5, there are three supported video formats: MP4, WebM, and Ogg.

Example markup:

Simple markup: <video src=”video.webm” controls></video>

You can specify multiple source files by using the <source> element and you can specify multiple formats as a fallback in case the user’s browser doesn’t support one of them. For example:

<video controls> <source src=”media/demo.mp4″ type=”video/mp4″> <source src=”media/demo.ogv” type=”video/ogg”> <source src=”media/demo.webm” type=”video/webm”> <p>Your browser doesn’t support HTML5 video.</p> </video>

Параметр HEIGHT и WIDTH

HTML:

3.2

XHTML:

1.0

1.1

Описание

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

Если используется процентная запись, то размеры объекта вычисляются относительно
родительского элемента — контейнера, где находится тег <EMBED>.
В случае отсутствия родительского контейнера, в его качестве выступает окно
браузера. Иными словами, width=»100%»
означает, что объект будет занимать всю доступную ширину веб-страницы.

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

About

You simply use the <iframe> tag. This specifies an inline frame, which contains an independent HTML. With this frame, you can embed a form, a webpage or a video from an external URL. It’s primarily used to include resources from other domains or subdomains, but can also include content from the same domain. The <iframe>’s strength is that the embedded code is ‘live’ and can communicate with the parent document. The content for the document is referenced in the src attribute of each element, so it is actually a fully independent resource being referenced from the current document.

Example markup:

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Фреймы: вставка видео с YouTube

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

Для размещения видео с YouTube на своём интернет-ресурсе выполните ряд следующих действий.

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

Для настройки дополнительных параметров не обязательно копаться в коде. Нажмите расположенную под видео кнопку ЕЩЁ. Здесь вы можете посмотреть, как будет выглядеть вставленный на страницу ролик, а также изменить некоторые параметры.

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

Показать похожие видео после завершения просмотра. По умолчанию флажок установлен, а это значит, что когда ролик закончится, внутри фрейма появятся картинки со ссылками на другие ролики схожей тематики (релевантность определяет YouTube). Если вы не хотите этого, снимите флажок.

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

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

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

Обратите внимание, как по мере настройки меняется HTML-код. По умолчанию он имеет вид:

Что это означает?

<iframe></iframe> — теги, создающие, собственно, фрейм — окно, в котором воспроизводится видео.
width — значение атрибута определяет ширину фрейма.
height — задаёт высоту.
src — содержит ссылку на видеоролик.
frameborder — устанавливает ширину рамок фрейма.
allowfullscreen — пустой атрибут, разрешающий пользователям разворачивать видео на весь экран. Если его убрать, то такой возможности у них не будет.

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

Единственный не рассмотренный, но важный момент — как сделать так, чтобы ролик воспроизводился автоматически сразу после загрузки страницы. Для этого к значению тега src (к адресу ролика) достаточно добавить &autoplay=1. Тогда вместо

Мы получим:

<iframe width="560" height="315" src="https://www.youtube.com/embed/7Nxx6J_uWh0&autoplay=1" frameborder="0" allowfullscreen></iframe>

Думаю, теперь-то у вас точно не осталось вопросов, и можно переходить к следующему методу вставки.

Определение и использование

Тег определяет контейнер для внешнего ресурса, такого как веб страница, картинка, медиаплеер или подключаемое приложение.

Предупреждение

Большинство браузеров больше не поддерживают Java Applets и Plug-ins.

Элементы управления ActiveX больше не поддерживаются ни в одном браузере.

Поддержка Shockwave Flash также была отключена в современных браузерах.

Предложение

Для отображения картинки лучше использовать тег .

Для отображения HTML кода лучше использовать тег .

Для отображения видео или аудио лучше использовать теги и .

Атрибуты

Атрибут	Значение	Описание
height	pixels	Задает высоту встроенного содержимого
src	URL	Указывает адрес внешнего файла для внедрения
type	media_type	Указывает тип носителя встроенного содержимого
width	pixels	Задает ширину встроенного содержимого

Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент со следующими значениями по умолчанию:

embed:focus { outline: none;}

Step by Step: How to Embed a YouTube Video

To embed a video from YouTube, open its page and find the Share button under the video player:

As you click it, you will see a few sharing options, including various social media platforms. The very first on the list is Embed. Click on it with your cursor:

YouTube will generate a code for you to use automatically. The <iframe> tag will have the URL of the video source, height and weight of the player and a few more attributes included: