Тег source

HTML :: Тег

В HTML тег (от англ. source – источник) презназначен для указания нескольких медиа-ресурсов для элементов , и

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

Синтаксис

Атрибуты

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

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

• полный или относительный путь к изображению;
• дескриптор ширины изображения, представляющий собой натуральное число (ширина изображения в пикселях), за которым следует символ w (например, для изображения шириной 700px дескриптор будет иметь вид 700w ); если значение не указывается, то по умолчанию используется бесконечность;
• дескриптор плотности пикселей дисплея, представляющий собой положительное десятичное число, за которым следует символ x (например, 2x ); если значение не указывается, то по умолчанию используется 1x . Каждый набор параметров должен содержать хотя бы дескриптор ширины или дескриптор плотности пикселей.

HTML тег

Элемент (от англ. «source» ‒ «источник») используется для указания расположения медийных ресурсов (файлов) для медиа-элементов, таких как и . Также применяется для добавления изображений в контейнере

он должен идти перед .

Синтаксис

Закрывающий тег

Атрибуты

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Различия между HTML 4.01 и HTML5

Тег был добавлен в HTML5.

Пример использования:

Аудиоплеер с двумя звуковыми файлами. Браузер выберет, какой из них он может (если может) воспроизвести:

с двумя исходными файлами и резервным изображением:

HTML тег source

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

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

Разница между HTML 4.01 и HTML5

Общие атрибуты

HTML пример

Аудиоплеер с двумя звуковыми файлами. Браузер выберет, какой из них он может (если может) воспроизвести:

Тег HTML источник ресурса

Тег используется для определения нескольких файлов-ресурсов в тегах , ,

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

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

Синтаксис

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

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

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

Атрибуты

Указывает адрес медиа-файла. Обязателен при использовании внутри и .

Указывает адрес медиа-файла. Обязателен при использовании внутри

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

Устанавливает размеры изображения в зависимости от media-условия. Экспериментальный атрибут.

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.

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

Все теги. Язык разметки. Гипертекст. HTML5. Все доступные теги и атрибуты языка гипертекстовой разметки

Тег source — источник медиа-данных

source элемент позволяет авторам определять многократные ресурсы альтернативных средств массовой информации для элементов СМИ. Это ничего непредставляет самостоятельно.

признак дает адрес ресурса СМИ. Ценность должна быть действительным непустым URL, потенциально окруженным местами. Этот признак должен присутствовать.

Динамически изменение a source элемент и его признак, когда элемент уже вставлен в a video или audio элемент не будет иметь никакого эффекта. Чтобы измениться, что играет, просто используйте src признак на элементе СМИ непосредственно, возможно используя canPlayType() метод, чтобы выбрать от среди доступных ресурсов. Вообще, управление source элементы вручную после документа были разобраны, unncessarily сложный подход.

признак дает тип ресурса СМИ, чтобы помочь пользовательскому агенту определить, может ли это играть этот ресурс СМИ прежде, чем принести его. Если определено, его ценность должна быть действительным типом ПАНТОМИМЫ. codecs параметр, который определяют определенные типы ПАНТОМИМЫ, мог бы быть необходимым, чтобы определить точно, как ресурс закодирован. [RFC4281]

Следующий список показывает некоторые примеры того, как использовать codecs= Параметр ПАНТОМИМЫ в type признак.

H.264 Принужденное основное видео профиля (главное и расширенное совместимое видео) уровень 3 и Низкая Сложность аудио AAC в контейнере MP4 H.264 Расширенное видео профиля (совместимый с основанием) уровень 3 и Низкая Сложность аудио AAC в контейнере MP4 H.264 Главный уровень 3 видео профиля и Низкая Сложность аудио AAC в контейнере MP4 H.264 ‘Высоко’ представляют видео (несовместимый с главным, основанием или расширенными профилями) уровень 3 и Низкая Сложность аудио AAC в контейнере MP4 MPEG-4 Визуальное Простое видео Уровня 0 Профиля и Низкая Сложность аудио AAC в контейнере MP4 MPEG-4 Продвинутое Простое видео Уровня 0 Профиля и Низкая Сложность аудио AAC в контейнере MP4 MPEG-4 Визуальное Простое видео Уровня 0 Профиля и аудио AMR в 3GPP контейнер Видео Theora и аудио Vorbis в контейнере Ogg Видео Theora и аудио Speex в контейнере Ogg Одно только аудио Vorbis в контейнере Ogg Одно только аудио Speex в контейнере Ogg Одно только аудио FLAC в контейнере Ogg Видео Dirac и аудио Vorbis в контейнере Ogg

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

Неплатеж, если media признак опущен,» all «, означая, что по умолчанию ресурс СМИ подходит для всех СМИ.

Если a source элемент вставлен как ребенок элемента СМИ, который имеет нет src признак и чей networkState имеет ценность NETWORK_EMPTY , пользовательский агент должен призвать алгоритм выбора ресурса элемента СМИ.

Признаки IDL , , и должен отразить соответствующие признаки содержания того же самого имени.

Если автор не уверен, будут ли пользовательские агенты все в состоянии отдать ресурсы СМИ, если, автор может слушать error случай на последнем source элемент и более аккуратное поведение отступления:

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

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. true false
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. Value Description ltr Specifies that the text should read left to right. rtl The text should read right to left. auto The text direction should be determined programatically using the contents of the element.
draggable	Specifies whether the user is allowed to drag this element or not. true false auto Value Description true This value specifies that the element is draggable. false A false value specifies that the element is not draggable. auto Uses the default behavior of the user agent/browser. This is the default value.
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. Value Description copy Results in a copy of the dragged data. Default value. move Results in the data being moved to the new location. link Results in a link to the original data. Any keyword with eight characters or more, beginning with the an ASCII case-insensitive match for the string » string: « Specifies that items with the drag data item kind Plain Unicode string and the drag data item type string set to a value that matches the remainder of the keyword are accepted. Any keyword with six characters or more, beginning with an ASCII case-insensitive match for the string » file: « Allows you to specify which file types can be processed (i.e. copied, moved or linked) in this dropzone. Example: dropzone=»copy file:image/png file:image/gif file:image/jpeg» 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 ). [Empty string] hidden
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: A valid URL that is an absolute URL, or If the item is a typed item: a «defined property name» allowed in this situation according to the specification that defines the relevant types for the item, or If the item is not a typed item: a string that contains no U+002E FULL STOP characters (.) and no U+003A COLON characters (:). 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» ). [Empty string] 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. Value Description [Empty string] The element should have its spelling checked. true The element should have its spelling checked. false The element should not 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 Attributes The 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. Attribute Description onabort Invoked when an event has been aborted. For example, the browser stops fetching media data before it is completely downloaded. onblur User has left the focus of the element. oncancel cancel event handler. oncanplay Invoked when the browser/user agent can start playing media, but hasn’t yet, due to buffering. In other words, if playback were to begin now, it wouldn’t play right to the end (due to the current playback rate) — it would need to pause during playback in order to load the rest of the media. oncanplaythrough The browser/user agent estimates that if playback were to begin now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering. onchange User has changed the object, then attempts to leave that field (i.e. clicks elsewhere). onclick Invoked when the user clicked on the object. onclose close event handler. oncontextmenu Invoked when a context menu has been triggered. oncuechange cuechange event handler. ondblclick Invoked when the user clicked twice on the object. ondrag Invoked when an element is being dragged. ondragend Invoked when an element has stopped being dragged. ondragenter Invoked when an element has been dragged to a drop target. ondragexit dragexit event handler. ondragleave Invoked when an element leaves a valid drop target. ondragover Invoked when an element is being dragged over a valid drop target. ondragstart Invoked when a drag operation has started. ondrop Invoked when an element is being dropped. ondurationchange Invoked when the length of the media is changed (i.e. the duration attribute has just been updated). onemptied Invoked when a media resource element suddenly becomes empty (for example, due to a network error). onended Invoked when the media has reached the end. onerror Invoked when an error occurs while the element is being loaded. Also handler for script error notifications. onfocus Invoked when the focus is on the element. oninput input event handler. oninvalid invalid event handler. onkeydown Invoked when a key was pressed over an element. onkeypress Invoked when a key was pressed over an element then released. onkeyup Invoked when a key was released over an element. onload The element has loaded. onloadeddata Invoked when the browser/user agent can render the media data at the current playback position for the first time. onloadedmetadata Invoked when the browser/user agent has just determined the duration and dimensions of the media resource. onloadstart Invoked when the browser/user agent has started loading the media resource. onmousedown The cursor moved over the object and mouse/pointing device was pressed down. onmousemove The cursor moved while hovering over an object. onmouseout The cursor moved off the object onmouseover The cursor moved over the object (i.e. user hovers the mouse over the object). onmouseup The mouse/pointing device was released after being pressed down. onmousewheel Invoked when the mouse wheel is being rotated. onpause Invoked when the media resource has been paused. onplay Invoked when the media resource starts playback. onplaying Playback has begun. onprogress The browser/user agent is fetching media data the. onratechange Invoked when the playback rate has changed (i.e. either the defaultPlaybackRate or the playbackRate has just been updated). onreset reset event handler. onresize resize event handler. onscroll scroll event handler. Invoked when the element’s scrollbar is being scrolled. onseeked Invoked when the seeking IDL attribute changed to false (i.e. the seeking attribute is no longer true) onseeking Invoked when the seeking IDL attribute changed to true and the seek operation is taking long enough that the user agent has time to fire the event. onselect Invoked when some or all of the contents of an object is selected. For example, the user selected some text within a text field. onshow show event handler. onstalled Invoked when the browser/user agent is trying to fetch media data but the data has stalled (i.e. the data has stopped coming). onsubmit User submitted a form. onsuspend The browser/user agent is (intentionally) not currently fetching media data, but has not yet downloaded the entire media resource (i.e. it has suspended the download). ontimeupdate Invoked when the media’s current playback position changed. onvolumechange Invoked when either the volume attribute or the muted attribute has changed. onwaiting The next frame of the media is not yet available (but the browser/user agent expects it to become available). More Information About the Element Content Categories None. Can be used As a child of a media element, before any flow content or elements. Content model Empty. End Tag Required? No. You can only use a start tag when using the element, it must not have a closing tag. Right: Wrong: DOM Interface HTMLSourceElement Specifications for the Tag Here 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 типы Файлы мультимедиа Расширения Mime тип Аудио mp3 mp3 audio/mpeg Аудио mp4 m4a audio/mp4 Аудио webm webm audio/webm Аудио ogg ogg audio/ogg Видео mp4 (H.264) mp4 video/mp4 Видео webm webm video/webm Видео ogg ogv video/ogg Инструменты кодирования аудио и видео файлов Пример стандартного использование HTML5 тега : Пример HTML5 audio HTML5 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: атрибут autoplay задается его присутствием в теге или и для этого атрибута не нужно задавать значение, достаточно просто его присутствия. Для редакторов HTML, которые правят код элементов, можно задать этот атрибут как autoplay=»autoplay«, что равносильно просто присутствию атрибута. Наличие атрибута autoplay дает команду браузеру начать воспроизведение файла сразу после загрузки web страницы. Соответственно, атрибут autoplay отменяет значения атрибута preload, который управляет загрузкой видео в плеер, потому что видео должно сразу начать воспроизводиться, а значит и должно быть загружено. По умолчанию атрибут autoplay отсутствует. атрибут controls: атрибут controls дает команду браузеру показывать панель управления плеером, когда страница загрузилась, но воспроизведение записи на начато. Этот атрибут также как и атрибут autoplay задается только присутствием в теге или , и не требует значения, достаточно только его присутствия. По умолчанию этот атрибут отсутствует, т.е. плеер не показывает панель управления до начала воспроизведения. Когда же проигрывание файла будет запущено, то панель управления будет появляться при наведении указателя мыши на область плеера. атрибут loop: атрибут loop заставляет плеер воспроизводить файл по кругу. Атрибут задается только его присутствием в теге или и не имеет параметров. По умолчанию атрибут loop отсутствует. атрибут preload: атрибут preload определяет загрузку файла вместе с загрузкой web страницы и принимает одно из следующих трех значений: none — не выполнять загрузку файла вместе с загрузкой web страницы. Это значит, что файл начнет загружаться в плеере только после нажатия кнопки воспроизведения. Это может быть удобным для ускорения загрузки страницы. Значение none является значением по умолчанию для атрибута preload, поэтому для него можно вообще не вставлять атрибут preload в тег или для этого случая. metadata — не выполнять загрузку файла вместе с загрузкой web страницы, но выполнять загрузку метаданных мультимедийного файла. auto — выполнять полную загрузку файла вместе с загрузкой web страницы. В этом варианте браузеры будут автоматически подгружать медийный файл вместе с web страницей, но это не будет мешать загрузке самой страницы и ее отрисовки в браузере. Если в теге или задан атрибут preload=«» с пустым значением, то будет использовано значение auto для него. Значение атрибута preload будет отменено, если использован атрибут autoplay. атрибут src: атрибут src тега или позволяет сразу в теге задать путь к мультимедийному файлу. Путь может быть, как полным с указанием протокола и домена, так и относительно корня текущего сайта. Также путь к файлу можно задать и во вложенных в аудио или видео контейнер тегах . Атрибут poster тега video: атрибут poster используется только в теге и задает URL изображения (gif, png, jpeg и т.п.), которое будет показано пока видео не доступно. Если атрибут poster не задан, то плеер браузера будет пытаться показать первый кадр видео. Атрибуты width и height тега video: атрибуты width и height применяются только к тегу и задают, соответственно, ширину и высоту области воспроизведения видеоплеера. В качестве значения ожидают положительное целое число, указанное в пикселях или процентах. Задание этих атрибутов влияет на размер отображения видео, но не изменяет пропорции видео. Видео подстроиться под указанные размеры с сохранением его пропорций. Если указанные размеры не совпадают с пропорциями видео, то по верхним или/и по боковым краям видео будут темные полосы. Поэтому при задании этих параметров желательно подбирать их соотношение такое же, как у воспроизводимого видео, или задавать только w >. Атрибут muted: атрибут muted устанавливает своим наличием в тегах или звук в выключенное состояние в HTML5 плеере. По умолчанию атрибут отсутствует. Атрибут crossorigin: атрибут crossorigin указывает браузеру на необходимость выполнение CORS запроса для данного элемента. По умолчанию атрибут отсутствует, что значит не использовать CORS запросы вообще. При наличии атрибута возможны следующие значения: anonymous и use-credentials. CORS (Cross-origin resource sharing ) — это технология современных браузеров, которая позволяет управлять разрешениями на загрузку ресурсов на текущей web странице с других доменов, отличных от домена текущей страницы. Поддержка браузерами стандарта CORS позволяет реализовать безопасный кроссдоменный обмен данными через выполнение специального запроса (заголовка) к домену текущей страницы на предмет того, разрешается ли загружать на этой странице ресурсы с другого указанного домена. Сервер на такой запрос должен указать домены, с которых разрешена загрузка ресурсов. Атрибут mediagroup: атрибут mediagroup позволяет объединить управление несколькими медиафайлами в один MediaController через создание группы медиафайлов в разных местах страницы. Это группа будет управляться одновременно для всех входящих в нее файлов. Это удобно, например, если нужно проиграть и управлять одновременно одним и тем же роликом в разных местах страницы с разными субтитрами, или разными роликами. Теги и требуют наличие закрывающего тега. Для тех случаев, когда браузер не поддерживает HTML5 и теги, что сейчас большая редкость, пред закрывающим контейнер тегом пишут текстовое сообщение и обычно добавляют ссылку на скачивание файла. Если же встроенный в браузер HTML5 плеер будет дополнительно управляться JS библиотекой (JS плеером), то большинство из них выполняют подключение флэш плеера в случае невозможности воспроизведения в браузере HTML5 видео и аудио по причине не поддержки браузером тегов видео и аудио или формата мультимедийного файла. Путь к проигрываемому файлу также можно задать и при помощи тега с атрибутом src, размещенного внутри тегов или . Тег не имеет закрывающего тега. В большинстве случаев тег выглядит так: и в нем присутствует всегда атрибут src и type, который в большинстве случаев имеет только MIME-тип. Атрибуты тега : атрибут src=«URL» тега задает URL к мультимедийному файлу. Путь может быть как полным с указанием протокола и домена, так и относительно корня сайта. атрибут type=»MIME-тип» тега или более полно type=’MIME-тип; codecs=»кодек»‘ указывает MIME-тип файла и кодек. Для аудио достаточно указать MIME-тип, например, для .mp3 — type=»audio/mpeg». Хотя по спецификации для видео в атрибуте type нужно указывать и кодек, но сейчас часто указывают только MIME-тип без кодека, предоставляя это на решение браузерам. атрибут media=»all|braille|handheld|print|screen|speech|projection|tty|tv» тега указывает тип устройства, для которого должен воспроизводиться файл. Значение по умолчанию all, поэтому этот атрибут в большинстве случаев не указывают вообще, если не хотят конкретно определить устройство для воспроизведения. Для 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 с текстом на разных языках. Для каждого языка нужно создавать отдельный файл и подключать каждый через тег. Теги необходимо вставлять внутрь контейнера после всех тегов , но перед сообщениями об ошибках HTML5 видео. Тегс файлом субтитров на языке по умолчанию нужно размешать первым среди теговв текущем контейнере . 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 тега задает тип дорожки и может принимать значения: subtitles — субтитры в виде текста, который выводиться поверх видео. Для проигрываемого файла можно задать субтитры на разных языках для предоставления их выбора в плеере, если он его поддерживает. В большинстве случаев используется именно этот тип так он поддерживается большинством браузеров. captions – заголовки в виде текста и звука, которые выводятся поверх видео. Похожи на субтитры, но, помимо текста, могут включать звуковые эффекты и другую аудио информацию. chapters – главы, которые отображаются текстом в виде меню списка и предназначены для быстрой навигации по медиафайлу. descriptions – описание, это текстовые файлы с описанием видео для воспроизведения их в screenreader. metadata – метаданные для передачи js скриптам. Атрибут src тега задает URL к файлу дорожки с дополнительной информацией. Подключаемый к тегу файл имеет формат WebVTT и расширение .vtt. Атрибут srclang тега задает язык дорожки через код языка. Для русского языка будет равен «ru», для английского «en». Атрибут label тега задает название дорожки, которое будет показано в плеере. Если атрибут не будет задан, то браузер покажет свое служебное название. Атрибут default тега задает выбор данной дорожки по умолчанию при наличии других дорожек в контейнере video. Только один из нескольких тегов может иметь default атрибут. Лучше дорожку по умолчанию располагать первой среди других подключаемых дорожек. 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.11.35399 Илон Маск рекомендует:  Что такое код asp hcnocompressionforproxies Понравилась статья? Поделиться с друзьями: Вам также может быть интересно Обучение программированию Эффективный способ применения интерфейсов в mdi приложениях Многооконный интерфейс. Создание MDI-приложения , страница 3 Вместо дополнительных байт окна приложение может использовать Обучение программированию Язык xml стилевые таблицы xsl Отображение XML с использованием XSLT При помощи XSLT вы можете преобразовывать XML документ в Обучение программированию Эффекты с изображениями Как сделать — визуальные эффекты изображениям Узнайте, как добавить визуальные эффекты к изображениям. Фильтры Обучение программированию Язык xml схемы данных Понимание XML Узнайте, как Расширяемый язык разметки (Extensible Markup Language — XML) облегчает универсальный Обучение программированию Юмор пиво для программиста ХАЙФХАК: ПРОГРАММИСТ ВЗЛОМАЛ СИСТЕМУ, ЧТОБЫ ПОПИТЬ ПИВО БЕСПЛАТНО / пиво :: geek новости :: Обучение программированию Язык обработки данных awk Примеры команды AWK в Linux Введение AWK назван в честь фамилии его авторов: Альфред Обучение программированию Я загружаю timagelist динамически как сделать картинки из timagelist прозрачными Я загружаю timagelist динамически как сделать картинки из timagelist прозрачными? Элемент управления ImageList содержит Обучение программированию Язык преобразований xsl (xslt) Введение в XSLT XSLT представляет собой способ для XML-документов в другие XML или документы Обучение программированию Является ли указанная страница — домашней (IE) Является ли указанная страница — домашней? (IE) При создании новой вкладки (about:Tabs) в IE9 Обучение программированию Язык преобразований XSLT Справочник по интерфейсу администратора Ссылки Назад «> Вверх Вперед Опубликованные SQL View > XSLT Обучение программированию Ядро и процессы Что такое ядро в биологии? Строение и функции ядра В каждой живой клетке протекает Обучение программированию Язык программирования alfa Язык программирования alfa По питанию контроллеры делятся на два типа: с питанием 220 В Обучение программированию Язык cc C++ — Базовый синтаксис Когда мы рассматриваем программу на C ++, ее можно определить Обучение программированию Язык рефал Язык рефал Ура! Сегодня, 30.05.2005, наконец появилась адаптированная к современным платформам Windows-(95/98/ME/NT/2000/XP) и UNIX Обучение программированию Эффект pазвивающегося флага Scrontch’s Flag Designer Design Your Flag! Generates Scalable Vector Graphics (SVG). This App requires Обучение программированию Язык sql SQL-Урок 1. Язык SQL. Основные понятия. Для того, чтобы начать изучать SQL нам нужно Обучение программированию Язык с C++ с нуля Этот самоучитель создан для тех, кто хочет освоить основы программирования на Обучение программированию Эффект горящей надписи Простой огненный текст в Фотошопе Конечный результат: Ресурсы урока: Шаг 1 Создайте новый документ Обучение программированию Язык xml documents type definitions (dtd) Язык XML — практическое введение . Documents Type Definitions (DTD) В XML- документах DTD Обучение программированию Языки и грамматики простейший компилятор ГРАММАТИКА ЯЗЫКОВ ПРОГРАММИРОВАНИЯ Описанию грамматики языка предшествует описание его алфавита. Алфавит любого языка состоит Обучение программированию Эффект ледяной надписи Ледяной текст в Фотошопе Конечный результат: Ресурсы урока: 1. Создание фона Шаг 1 Создайте Обучение программированию Язык xml dom совместимые анализаторы XML-анализаторы в java XML как набор байт в памяти, запись в базе или текстовый Обучение программированию Языки описания пользовательских интерфейсов Языки описания пользовательских интерфейсов Язык описания интерфейсов Язык описания интерфейсов (IDL), используемый OMG определяет Обучение программированию Эффект линзы (watcom c) Эффект линзы (watcom c) Просветляющие покрытия от ZEISS Высококачественные линзы требуют высоколассного подхода: защита,