HTML тег
Элемент (от англ. «source» ‒ «источник») используется для указания расположения медийных ресурсов (файлов) для медиа-элементов, таких как и . Также применяется для добавления изображений в контейнере
он должен идти перед .
Синтаксис
Закрывающий тег
Атрибуты
Для этого элемента доступны глобальные атрибуты и события.
Стилизация по умолчанию
Различия между HTML 4.01 и HTML5
Тег был добавлен в HTML5.
Пример использования:
Аудиоплеер с двумя звуковыми файлами. Браузер выберет, какой из них он может (если может) воспроизвести:
с двумя исходными файлами и резервным изображением:
HTML 5 Tag
The HTML tag is used to specify multiple media resources on media elements (such as and ).
This element allows you to specify alternative video and audio files which the browser may choose from based on its media type or codec support.
The tag was introduced in HTML 5.
Example
In the example below, two files have been specified. The browser should choose which file (if any) it has support for.
Attributes
HTML tags can contain one or more attributes. Attributes are added to a tag to prov >style=»color:black;» .
There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.
The attributes that you can add to this tag are listed below.
Element-Specific Attributes
The following table shows the attributes that are specific to this tag/element.
Attribute | Description |
---|---|
src | Specifies the location of the audio/video file. Its value must be the URL of an audio/video file. |
type | Specifies the type of the embedded content. If specified, the value must be a MIME type. |
media | Specifies the type of media resource, so the browser can determine whether it can play it or not. If not, it can choose not to download it. If specified, the value must be a valid media query. |
Global Attributes
The following attributes are standard across all HTML 5 tags.
- accesskey
- class
- contenteditable
- contextmenu
- dir
- draggable
- dropzone
- hidden
- id
- itemid
- itemprop
- itemref
- itemscope
- itemtype
- lang
- spellcheck
- style
- tabindex
- title
- translate
For a full explanation of these attributes, see HTML 5 global attributes.
Event Handler Content Attributes
Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.
Here are the standard HTML 5 event handler content attributes.
- onabort
- oncancel
- onblur
- oncanplay
- oncanplaythrough
- onchange
- onclick
- oncontextmenu
- ondblclick
- ondrag
- ondragend
- ondragenter
- ondragexit
- ondragleave
- ondragover
- ondragstart
- ondrop
- ondurationchange
- onemptied
- onended
- onerror
- onfocus
- onformchange
- onforminput
- oninput
- oninvalid
- onkeydown
- onkeypress
- onkeyup
- onload
- onloadeddata
- onloadedmetadata
- onloadstart
- onmousedown
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- onmousewheel
- onpause
- onplay
- onplaying
- onprogress
- onratechange
- onreadystatechange
- onscroll
- onseeked
- onseeking
- onselect
- onshow
- onstalled
- onsubmit
- onsuspend
- ontimeupdate
- onvolumechange
- onwaiting
For a full explanation of these attributes, see HTML 5 event handler content attributes.
HTML .am>
The basic tag is written like this with the URL of the media file inserted between the double quotes of the src attribute. The type attribute provides the type of media resource, as well as how it is encoded, for example: type=’v ‘ .
The element is an empty element so there must be no closing tag.
The tag was introduced in HTML 5.
Example
Below is an example of how to use the tag. In the example, two different files have been specified using the tag. Both files contain the same content, but they have different file types. The browser should choose which file (if any) it has support for (starting with the one listed first).
Attributes
The tag accepts the following attributes. Try adding some to the above example to see how it affects the display/behavior of the element.
Attributes Specific to the Element
Attribute | Description |
---|---|
src | Specifies the location of the audio/video file. Its value must be the URL of an audio/video file. |
type | Specifies the type of the embedded content. If specified, the value must be a MIME type. This attribute also accepts a codecs parameter which allows you to specify exactly how the resource is encoded. For example, a type attribute could look like this: type=’v ‘ |
Note that as of this writing, this attribute is only supported by the W3C HTML5 specification (not the WHATWG HTML Living Standard)
Global Attributes
The tag accepts the following global attributes. These attributes are standard across all HTML 5 tags.
Attribute | Description | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
accesskey | Specifies a shortcut key that can be used to access this element.
[Any string of characters. This string of characters specifies the key/s the user needs to use in order to access the element.] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
class | This is a document wide identifier. It is used to refer to a class that is specified in the style sheet. The value should match the name of the class you wish to use. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
contenteditable | This attribute specifies whether the user can edit the content or not.
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
contextmenu | The contextmenu attribute sets a context menu for an element. The value must be the ID of a menu element in the DOM. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
dir | Specifies the direction of the text.
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
draggable | Specifies whether the user is allowed to drag this element or not.
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
dropzone | The dropzone attribute specifies what should happen when the user «drops» an element (i.e. after dragging it) onto this element.
Must be an unordered set of unique space-separated tokens that are ASCII case-insensitive.
Note that this attribute must not have more than one of the three feedback values (copy, move, and link) specified. If none are specified, the copy value is implied. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
hidden | Indicates that this particular element is not yet, or is no longer, relevant. The browser/user agent does not display elements that have the hidden attribute present.
This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either hidden or h ).
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
id | The id attribute is a document wide identifier, which is used in conjunction with CSS and JavaScript. The value must match the name of the id you wish to use. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
itemid | The itemid provides a global identifier for an «item». This attribute is optional, however if it is provided, it must have a value that is a valid URL potentially surrounded by spaces.
The itemid attribute can only be present in elements that include both the itemscope and the itemtype attributes, as long as the itemtype attribute specifies a vocabulary that supports global identifiers for items, as defined by that vocabulary’s specification. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
itemprop | This attribute provides one or more properties to one or more «items».
Although this attribute is optional, if used it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, representing the names of the name-value pairs that it adds. The attribute’s value must have at least one token. Each token must be one of the following:
Also, Specifications that introduce defined property names that are not absolute URLs must ensure all such property names contain no U+002E FULL STOP characters (.), no U+003A COLON characters (:), and no space characters. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
itemref | This attribute is used in conjunction with the itemscope attribute, the itemref attribute provides a list of additional elements to crawl to find the name-value pairs of the «item». Although the itemref attribute is optional, if specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, consisting of IDs of elements in the same home subtree. Also, the itemref can only be used on elements that also have the itemscope attribute present. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
itemscope | HTML5 elements that have the itemscope attribute create a name-value pair called an «item». Elements with an itemscope attribute may also have an itemtype attribute specified, to give the item types of the item.
This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either itemscope or itemscope=»itemscope» ).
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
itemtype | This attribute provides an item type for elements containing the itemscope attribute. The attribute is optional but if it is specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, each of which is a valid URL that is an absolute URL, and all of which are defined to use the same vocabulary. The attribute’s value must have at least one token.
The itemtype attribute must only be present in elements that include the itemscope attribute. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
lang | Sets the language code to be used.
[Must be a valid RFC 3066 language code, or an empty string.] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
spellcheck | Specifies whether the element should have its spelling checked.
If this attribute is missing, the element will use the default behavior, possibly based on the parent’s own spellcheck state. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
style | Specifies inline styles for this element. This allows you to define the styles within the page, and within this tag, as opposed to referring to styles defined elsewhere (such as an external style sheet). Although this can be useful for over-riding external styles, it is usually preferrable to use external styles in conjunction with the class attribute and/or the id attribute. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
tabindex | Helps determine the tabbing order for this element (for when the user uses the «tab» key on their keyboard to «tab» through the elements on the page in order to select an element).
[Any valid integer. For example, 0, 1, 2, 3, . etc] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
title | Specifies a title to associate with this particular element. Many browsers will display this when the cursor hovers over the element (similar to a «tool tip»).
[Any text to be displayed as a «tool tip».] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
translate | Determines whether the element’s attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged.
The translate attribute is an enumerated attribute and may contain the following possible values: If the translate attribute is provided, but its value is missing or is invalid, the element will inherit its value from its parent element. Event Handler Content AttributesThe tag also accepts the event handler content attributes listed below. An event handler content attribute is an attribute for a specific event handler. The name of the content attribute is the same as the name of the event handler. Event handlers are commonly used to extend the functionality of an HTML element. By using any of the event handler content attributes below, you can tell the browser to run a specific script and when to run it. For example, by using onclick=»» , you tell the browser to run a piece of JavaScript whenever someone clicks on the element. The JavaScript needs to be inserted between the double quotes. This is typically a small piece of JavaScript that simply calls a JavaScript function that has been defined elsewhere. Here are the event handler content attributes that can be used with the element.
More Information About the Element
Specifications for the TagHere is the element defined in the various specifications: Реализация v >В статье описаны строение audio и video контейнера HTML5, теги video, audio, source, track и их атрибуты с возможными значениями. Приведены HTML шаблоны и примеры реализации воспроизведения мультимедийных файлов на основе встроенных в браузер возможностей. Показано подключение к видео текстовой дорожки субтитров, заголовков, оглавления при помощи файлов формата WEBVTT с примерами. Представлены HTML5 шаблоны кода с микроразметкой по schema.org для аудио и видео. Указаны основные для web форматы аудио и видео файлов с их MIME типами и инструменты для конвертации видео и аудио в эти форматы. В HTML5 присутствуют новые возможности, позволяющие выполнять проигрывание аудио и видео файлов напрямую браузером без использования сторонних программ. Пока, несмотря на то, что HTML5 уже не новость, имеются еще разногласие в том, как браузеры обрабатывают теги video и audio и как отображают сам плеер. Одни это делают все лучше с каждой новой версией, другие пока еще отстают. Глобально же, тенденция идет к тому, что браузеры будут предоставлять все больше функционала для проигрывания мультимедиа файлов. Скринкаст: Видео обзор этой статьиHTML5 video не поддерживается вашим браузером. Скачать видео Скринкаст: видео обзор статьи Реализация video и audio в HTML5, шаблоны, schema.org микроразметка на сайте Andew.ru Скринкаст: Пример использования шаблоновHTML5 video не поддерживается вашим браузером. Скачать видео Скринкаст: примеры использования шаблонов из статьи Реализация video и audio в HTML5, шаблоны, schema.org микроразметка — andew.ru В HTML5 воспроизведение браузером аудио и видео файлов реализуется посредством тегов и , которые предоставляют управляемый сценариями объект. Использование этих тегов позволяет проиграть мультимедийный файл на web странице, управлять его воспроизведением путем задания атрибутов для тегов и , и дополнительных, вложенных в них тегов. В простейшем варианте использования достаточно вставить на web страницу нужный вам тег или и задать через их атрибуты несколько параметров. И это уже позволит проиграть мультимедиа файл на странице в HTML5 плеере. Также, поскольку элементы и являются объектами для JS, у них доступны свойства, методы и события, что предоставляет расширенные возможности полного управления HTML5 плеером через JavaScript . Однако, ввиду того, что браузеры могут иметь различия в реализации управления объектами аудио и видео посредством JS, то более лучшим выбором для этих целей будет использование специальных кроссбраузерных JS библиотек. Одна из таких библиотек под названием v > будет описана в отдельном посте. К тегам и , как и к другим тегам HTML применима стилизация посредством CSS. Детальную спецификацию для аудио и видео в HTML5 можно посмотреть на сайте World W > . HTML5 видео и аудио развивающийся стандарт и он не связан ни с одним форматом аудио или видео, поэтому между браузерами существуют различия в поддерживаемых ими форматами аудио и видео файлов. Это различие сейчас компенсируют тем, что кодируют оригинальный файл несколькими разными кодеками и подключают все эти версии файлов к тегам или через вложенные теги . Однако среди поддерживаемых браузерами форматов аудио и видео файлов намечаются лидеры. Для видео это, конечно же, формат mp4 (H.264), и для аудио это формат mp3 и m4a. Сейчас уже, наверное, все браузеры способны проигрывать файлы этих форматов. Так же, браузеры Firefox, Chrome и Opera договорились поддерживать стандарт WEBM в качестве общего видео формата. С моей точки зрения, оптимальным на сейчас вариантом использования HTML5 видео и аудио будет схема основанная на использовании одного мультимедийного файла в формате mp4(H.264) для видео и m4a для аудио и JS HTML5 плеера. К аудио или видео контейнеру подключается только один файл в указанном формате. Сейчас большинство браузеров способны воспроизводить mp4 формат. Подключенная же JS библиотека выполнит стилизацию встроенного в браузер плеера. Если браузер не будет поддерживать формат mp4/m4a, то JS плеер, в таком случае, реализует подключение Flash плеера для воспроизведения мультимедийного файла. Учитывая, что mp4 формат стал сильно популярен, можно надеяться на низкую вероятность проблем с его воспроизведением в браузерах. Такая схема требует наличие всего одного мультимедийного файла в указанном формате, что экономит место на диске и ресурсы для обработки файлов. Также, такая схема будет стратегически более правильной, так как тенденция идет к тому, что браузеры все больше и лучше выполняют реализацию HTML5 видео и аудио. Для указания HTML5 плееру проигрываемого файла нужно, помимо URL файла, передать и MIME тип файла, что бы браузер понимал какой кодек ему нужно использовать. Ниже в таблице привожу наиболее распространенные форматы файлов и их MIME типы. Форматы файлов и их MIME типы
Инструменты кодирования аудио и видео файловПример стандартного использование HTML5 тега :Пример HTML5 audioHTML5 audio не поддерживается вашим браузером. HTML5 код примера audio с микроразметкой schema.org:Так будут выглядеть извлеченные из кода данные микроразметки для описанного выше шаблона аудио. Минимальная разметка аудио по schema.org должна включать itemprop= «name» , itemprop= «description» , itemprop= «contentUrl» . Остальные свойства не являются обязательными. Пример стандартного использование HTML5 тега :В демонстрации я применил для тега через атрибут class CSS стили, делающие ширину области видео динамической в зависимости от размера экрана. По высоте плеер подстроиться сам. Попробуйте изменить размер окна браузера для того, что бы увидеть как это работает. Поэтому в источнике кода этой демонстрации нет атрибутов width и height для тега , их заменяют CSS стили. Но в листинге кода шаблона этот примем не показан, т.к. является уже частностью. Пример HTML5 v >HTML5 video не поддерживается вашим браузером. HTML5 код примера video с микроразметкой schema.org:Так будут выглядеть извлеченные из кода данные микроразметки для описанного выше шаблона видео. Минимально необходимая для поисковиков разметка видео по schema.org должна включать все приведенные в коде примера свойства itemprop за исключением блока itemprop= «author» , который является не обязательным для поисковиков и его можно удалить, если нет данных для его заполнения. Для v >»thumbnail» в виде ImageObject, а Google требует указывать как itemprop= «thumbnailUrl» , поэтому приходиться вставлять v > , google валидатор . Основное преимущество от использования микроразметки заключается в удобстве такого контента для поисковых роботов и роботов социальных сетей. Эти роботы извлекают размеченные данные и агрегирую их. Поэтому использование микроразметки улучшает SEO сайта и способствует автоматическому распространению данных в социальных сетях. Детальное описание микроразметки Schema.org для видео размеченных схемой V > . Так же, стоит заметить, что для случаев, когда вы делаете вставку на свой сайт видео не напрямую, а с помощью виджетов видео хостинга Яндекс.Видео или YouTube, то вы можете под блоком кода виджета добавить свой блок кода HTML с описанием видео и в него встроить микроразметку Schema.org для этого видео. При этом, в качестве параметра URL — ссылки на видеоролик, указать не прямую ссылку на статический файл, а задать ссылку полученную от видео хостинга. Хотя в спецификации Schema.org и написано, что ссылка должна быть именно на прямой файл, но поисковики обрабатывают и ссылки на видео от видео хостинга (см. в примерах на сайте Яндекса в разделе Вебмастер), несмотря на то, что по такой ссылке нельзя скачать файл и нельзя просмотреть его напрямую в своем HTML5 медиа плеере на странице, только в виджете видео хостинга. Если перед вами стоит вопрос с какого хостинга загружать мультимедийные файлы аудио и видео, то посмотрите статью Yandex Disk REST API jQuery Plugin, в которой описан вариант вставки медиа файлов на WEB страницу с Яндекс Диска. Атрибуты и тегов:Атрибуты src, preload, autoplay, mediagroup, loop, muted, controls являются общими атрибутами для всех медийных элементов, в том числе и для тегов и . атрибут autoplay:
атрибут controls:
атрибут loop:
атрибут preload:
атрибут src:
Атрибут poster тега video:
Атрибуты width и height тега video:
Атрибут muted:
Атрибут crossorigin:
Атрибут mediagroup:
Теги и требуют наличие закрывающего тега. Для тех случаев, когда браузер не поддерживает HTML5 и теги, что сейчас большая редкость, пред закрывающим контейнер тегом пишут текстовое сообщение и обычно добавляют ссылку на скачивание файла. Если же встроенный в браузер HTML5 плеер будет дополнительно управляться JS библиотекой (JS плеером), то большинство из них выполняют подключение флэш плеера в случае невозможности воспроизведения в браузере HTML5 видео и аудио по причине не поддержки браузером тегов видео и аудио или формата мультимедийного файла. Путь к проигрываемому файлу также можно задать и при помощи тега с атрибутом src, размещенного внутри тегов или . Тег не имеет закрывающего тега. В большинстве случаев тег выглядит так: и в нем присутствует всегда атрибут src и type, который в большинстве случаев имеет только MIME-тип. Атрибуты тега :
Для HTML5 видео возможно также отображать в плеере дополнительную дорожку с информацией, такой как субтитры (subtitles), заголовки (captions), главы (chapters), описания (descriptions – не поддерживаются пока) и метаданные (metadata – не поддерживаются пока). Эта возможность реализуется путем добавления внутри тега тегов с соответствующими атрибутами. Тег позволяет подключать к видео дополнительные файлы-дорожки специального формата WebVTT (Web V > ), в которых указаны выводимые текстовые сообщения с их временной привязкой к видео файлу. Стандарт WebVTT поддерживает не просто вывод текстовых сообщений, но и предоставляет варианты его CSS стилизации и опции по размещению в области просмотра видео. На настоящий момент WebVTT файлы в основном используются для подключения к видео текстовых субтитров, что поддерживается почти всеми браузерами. Другие возможности WebVTT стандарта пока не полностью реализуются самими браузерами, поэтому, для более полного использования WebVTT, лучше применять JS плееры. Также, файлы WebVTT могут нестандартно использоваться JS плеерами для передачи дополнительных данных в JS плеер, таких как, например, URL превью картинок для фреймов видео. К вопросу о том, как показать превью кадров видео на шкале перемотки плеера (Scrub Bar Thumbnails) как это сделано на видео хостингах. Тут нужно сказать, что такой функционал пока отсутствует во встроенных в браузеры плеерах и поэтому реализуется через JS плееры как дополнение. Для этого подключают JS библиотеку (js плеер), которая берет на себя управление HTML5 видео и аудио объектом и выполняет его стилизацию. Такие JS плееры для показа превью кадров видео нестандартно используют файлы WEBVTT из тега для передачи через него URL картинок превью. Файл формата WebVTT является обычным текстовым файлом с расширением .vtt в котором, в виде построчного списка, прописаны временные метки с временем старта и временем окончания и текстовые сообщения для вывода к этим меткам. К контейнеру можно подключить несколько файлов WebVTT с текстом на разных языках. Для каждого языка нужно создавать отдельный файл и подключать каждый через тег WEBVTT файл может содержать одну и более временных меток. Файл начинается со слова WEBVTT. Пустые строки отделяют между собой временные метки с принадлежащими к ним текстом и атрибутами. Текст может содержать элементы HTML и CSS разметки. Перед временной меткой может располагаться ID для нее, что бы при помощи специальных выражений обратиться к ней. Все эти детали описаны в стандарте WEBVTT. 00:00:01.000 00:00:10.000 -это простой пример временной метки в формате hh:mm:ss.mmm 00:00:15.000 00:00:20.000 A:middle T:50% — метка может содержать дополнительные атрибуты, указывающие на месторасположение текста для нее в области просмотра видео. Пример файла формата WEBVTT для субтитров на ruАтрибуты тега :Атрибут kind тега задает тип дорожки и может принимать значения:
Атрибут src тега задает URL к файлу дорожки с дополнительной информацией. Подключаемый к тегу файл имеет формат WebVTT и расширение .vtt. Атрибут srclang тега задает язык дорожки через код языка. Для русского языка будет равен «ru», для английского «en». Атрибут label тега задает название дорожки, которое будет показано в плеере. Если атрибут не будет задан, то браузер покажет свое служебное название. Атрибут default тега задает выбор данной дорожки по умолчанию при наличии других дорожек в контейнере video. Только один из нескольких тегов может иметь default атрибут. Лучше дорожку по умолчанию располагать первой среди других подключаемых дорожек.
|
или
|
Несколько элементов можно связать с различными файлами. Браузер будет использовать первый запускаемый формат.
autoplay — звук начинает играть сразу после загрузки страницы;
controls — добавляет панель управления к аудиофайлу;
loop — повторяет воспроизведение звука с начала после его завершения;
preload — используется для загрузки файла вместе с загрузкой веб-страницы;
src — указывает путь к воспроизводимому файлу.
Пример:
Тег audio не поддерживается вашим браузером. |
Практическое задание: На один из готовых проектов (стихи, биология, анатомия, геграфия. ) разместить пояснительную звукозапись под заголовком проекта. |
Вставка видео. Тег
Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег .
Синтаксис:
|
Несколько элементов можно связать с различными файлами. Браузер будет использовать первый запускаемый формат.
autoplay — видео начинает воспроизводиться автоматически после загрузки страницы;
controls — добавляет панель управления к видеоролику;
loop — повторяет воспроизведение видео с начала после его завершения;
height — задает высоту области для воспроизведения видеоролика;
width — задает ширину области для воспроизведения видеоролика;
preload — используется для загрузки видео вместе с загрузкой веб-страницы;
src — указывает путь к воспроизводимому файлу.
Закрывающий тег oбязателен.
Внутри контейнера также можно написать пояснительный текст, который будет выводиться в браузерах, не работающих с этим тегом.
Атрибут controls добавляет элементы управления видео, такие как воспроизведение, пауза, и объем.
Неплохо всегда включать атрибуты ширины и высоты.
Если высота и ширина не установлена, браузер не знает размер видео. Эффект будет такой, что страница будет обновляться (или будет мерцание) в то время как видео загружается.
Пример:
Тег video не поддерживается вашим браузером. |
Результат примера в браузере:
Практическое задание: В один из готовых проектов (стихи, фильмы, биология, анатомия, геграфия. ) разместить подходящее видео из заготовок. |
На сервисе YouTube под видео-элементами есть кнопка «Поделиться» — «HTML-код», полученный код можно вставить в любое место HTML-документа для запуска этого ролика.
w3.org.ua
уроки front-end и back-end
Рубрики
HTML 5 (часть 2). Новые теги и поддержка браузерами
Новые теги в HTML5
Перед изучением новых тегов необходимо ознакомится с инструментами поддержки тегов браузерами. Для проверки тега, можно использовать htmlbook с иллюстрациями:
Поддержка тега center в спецификациях HTML
Видно, что тег в спецификации 5.0 не поддерживается (розовый цвет), а в спецификации 4.01 поддерживался частично (желтый цвет). Кстати, для выравнивания блоков и картинок теперь нужно применять СSS.
Также, рекомендуем ресурс caniuse.com
Рекомендация не использовать тег center в коде html5
Как видно, данный тег не рекомендован к применению. Если тег можно применять, то caniuse покажет развернутую карту поддержки тега браузерами. Так для тега audio, мы увидим:
Поддержка тега audio браузерами
Таким образом, используя данные ресурсы можно ориентироваться в правильности применения тегов и их поддержке со стороны браузеров.
Рассмотрим новые введенные элементы.
Тег audio
Если тег не поддерживается, то будет выведено сообщения внутри тега с предложением скачать файл напрямую.
Как получить тип тега source в html5 v > Задать вопрос
Мне надо достать type (например video/webm) html5 видео на Ютубе, но внутри тега нет source. Метод canPlayType не совсем то, что надо. С помощью getAttribute получается доставать, если только присутствует явно, но внутри тега video только src.
Кто-нибудь сталкивался с таким?
1 ответ 1
Пользуйтесь уже имеющимся кодом для скачивания видео с тытрубки, всё реализовано до вас. Если очень хочется делать всё ручками, то разбирайте код жабоскрипта, в котором и содержатся интересующие вас данные. Например, на первой попавшейся странице с плеером HTML5 на YouTube в коде можно заметить:
Этот код должен наводить вас на мысль, как извлечь данные. Если не наводит, то вам рано этим заниматься, просто воспользуйтесь готовым решением и не изобретайте велосипед.
Всё ещё ищете ответ? Посмотрите другие вопросы с метками html5 video youtube или задайте свой вопрос.
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.9.35389
Введение в CSS, встраивание в HTML
CSS — Cascading Style Sheets (каскадные таблицы стилей) — это средство, позволяющее задавать различные визуальные свойства HTML-тегам.
Официальный сайт разработчиков: http://www.w3.org/TR/CSS21/cover.html.
CSS состоит из правил. Правила представляют из себя название и значение. Разделяются они двоеточием (название правила : значение правила). Никаких кавычек в значениях правил не ставим! Пример:
Но как CSS связать с HTML? Как прописывать стили оформления документа в html-коде? Для этого есть 3 решения:
- Вложение(inline).
- Встраивание(embeding).
- Связывание(linking).
Основа документа — html, а к нему уже применяется css. Именно к документу, сам по себе css ничего не значит.
Метод вложения (inline) CSS
Используется атрибут style. Его можно поставить в любом визуально отображаемом элементе. В style записываются правила css (название правила : значение правила), несколько правил разделены точкой с запятой (; является окончанием правила в css):
Метод встраивания (embeding) CSS
Используется специальный элемент “style”, внутри которого записываются правила css. Внутри style пишем только язык css. Пример:
В этом примере мы прописали правило для элемента “p” абзац. Во 2-й строке мы прописали селектор (к каким тегам будет применяться правило css). Само правило записано в фигурных скобках “< >”.
Элемент “style” ставят только в элементе “head”.
Метод связывания (linking) CSS
Чтобы каждый раз в документ не писать стилевое оформление (не загружать документ), надо в одном месте написать правила css и применять их к разным документам (к неограниченному из количеству).
Для этого все правила css выносим в отдельный текстовый файл. Обычно этому файлу дают расширение .css. И тогда сразу видно, что в нем прописаны стилевые правила. Ни с чем не перепутаешь.
Как же тогда связать этот отдельный css-файл с нашим html-документом? Для этого используем следующий код в разделе head:
Т.е. указываем файл со стилями через гиперссылку на него. Браузер подгружает стилевой файл и применяет правила из него ко всему документу. По сути это работает так же, как и элемент “style”, но только находится в отдельном файле. И мы можем в любом документе поставить ссылку на css-файл. Это очень удобно, т.к. я правлю стили в одном единственном файле; один раз загрузив таблицу стилей, при переходе на следующие страницы браузер больше за этим файлом css не полезет, он достанет его из кэша (типа временного хранилища загруженных файлов). Тем самым я экономлю трафик и ускоряю отображение страницы.
Внимание! Элемент “link” не сработает с одним атрибутом href. Т.к. эта гиперсылка используется для разных целей. Это служебная гиперссылка, которая может указывать на различные типы файлов, которые могут использоваться для разных целей для ваших страниц. Чтобы дать понять браузеру, что это таблица стилей, используется атрибут rel ( rel=”stylesheet”). В нем указывается тип отношения загружаемого документа и нашего основного документа. Теперь браузер понимает, что загружаемый документ — это таблица стилей.
Source
The void HTML element was first introduced in HTML5 and Gecko 1.9.1. It is used to specify multiple media resources for and elements. Currently, Gecko picks the first element that has an exact MIME type of video/ogg or application/ogg .
Attributes
Attribute | Value | Description |
---|---|---|
src | source | Required, specifies the address of the media resource. |
type | MIME type | Specifies the MIME type of the resource, optionally with a codecs parameter. See RFC 4281 for information about how to specify codecs. If this attribute isn’t specified, the media’s type is retrieved from the server and checked to see if the browser can handle it; if it can’t be rendered, the next source is checked. If the type attribute is specified, it’s compared against the types the browser can play, and if it’s not recognized, the server doesn’t even get queried; instead, the next element is checked at once. |
media | media query | Specifies the media query of the resource’s intended media. |
Multiple elements can be used in order to provide video/audio encoded in different formats for compatibility with different browsers.
Here, it specifies that the video uses the Dirac and Speex codecs. If the browser supports Ogg, but not the specified codecs, the video will not load.
Форум
Справочник
Поиск по форуму |
Расширенный поиск |
К странице. |
Живой HTML в IE: плагин Fullsource
Это мини-расширение добавляет пункт в контекстное меню Internet Explorer, который показывает живой HTML-код страницы целиком.
Вот так, ни больше, ни меньше. Очень просто и доступно..
Качать тут. Устанавливается интересно — разархивируйте и кликните правой кнопкой на файле .inf, в контекстном меню — «Установить».
у меня почему-то ничего не открывается и тем более не скачивается.
Ага, у меня чето-то тоже перестало.. Может, временные неполадки..
Что то я туплю. Что такое живой код? Тоесть полный исходник как его писал автор? Который показывает и php и всё что скрывается, или интерактивно подсвечивающиеся теги при наведении на участок сайта? =\
не тупи, там же написано.
Full Source is an Internet Explorer menu extension which displays the source Internet Explorer is displaying, directly from the Internet Explorer object model. This is useful wherever javascript is dynamically writing HTML into the DOM, or where XSLT has been used to generate HTML.