Что означает атрибут muted для тега audio

HTML5-теги audio и video в различных браузерах на практике

Когда впервые были введены HTML5-теги audio и video, несовместимости с кодеками и браузерами сделали их трудными в использовании, и развертывать их на крупных веб-сайтах было непрактично. Эти теги были хороши для компаний, которые пишут экспериментальный код или ведут кросс-браузерные медиа-разработки, но для универсального использования HTML5 Media API был слишком ненадежен.

Сегодня многое изменилось. Браузеры и библиотеки JavaScript вышли на такой уровень, когда вы можете (и должны) использовать HTML5 Media как вариант по умолчанию для любых проектов, где будет показываться аудио- и видеоконтент. Даже перенастройка существующего видеоконтента Flash и Silverlight для воспроизведения в HTML5 стала делом сравнительно простым. В этой статье мы рассмотрим преимущества использования HTML5 для воспроизведения медийной информации, изучим некоторые примеры кода, обсудим ряд основных проблем, с которыми сталкиваются разработчики, и поговорим о способах решения этих проблем.

Преимущества HTML5 Media

Преимущество использования HTML5 для воспроизведения медийной информации заключается в том, что вы можете использовать свои навыки в работе с HTML, CSS и JavaScript вместо изучения Flash или Silverlight. Если вы умеете создавать кнопки в HTML и управлять ими с помощью JavaScript, значит, вы знаете все, что нужно для разработки под HTML5 Media. В HTML5 Media встроена поддержка надписей и субтитров с применением нового элемента track; также рассматриваются дополнительные функции, например поддержка прямого побайтового доступа для манипуляций с видео.

Более того, воспроизведение медийной информации через HTML5-теги video и audio осуществляется эффективнее, чем через такие плагины, как Flash или Silverlight, что дает более плавное проигрывание и продлевает время работы от аккумуляторов. В дополнение к этому мобильные устройства под управлением Windows Phone 7.5, Apple iOS и Android (а также браузер в стиле Metro в Windows 8) поддерживают воспроизведение медийной информации только через HTML5-теги video и audio. Некоторые устройства Android включают Flash, но Adobe недавно отказалась от дальнейшей работы над своей мобильной версией Flash, а значит, в будущем HTML5 станет единственным способом воспроизведения медийной информации на мобильных устройствах.

Простое воспроизведение в HTML5 и атрибут controls

Во времена использования Flash или Silverlight для воспроизведения видео простейшая разметка, позволяющая выполнять эту задачу (в данном случае — проигрывать видео в формате mp4), выглядела бы примерно так:

Сравните эти вложенные теги object, param и embed со следующим HTML5-тегом video, используемым для воспроизведения того же видео в кодировке h.264:

Этот вариант гораздо проще — только чистый HTML, который практически не нуждается в пояснениях. Когда браузер скачивает достаточный объем видеоролика, чтобы определить исходную высоту и ширину кадров, он соответствующим образом изменяет размеры видео. Но, как и в случае с тегами img, всегда лучше указывать атрибуты height и width, чтобы не возникало необходимости в перезагрузке страницы. Кроме того, вы можете использовать атрибут style, чтобы указать px или значения ширины и высоты в процентах (в последующих примерах я буду использовать оба варианта).

Один из добавленных мной атрибутов — controls. Он сообщает браузеру отображать свою встроенную панель управления воспроизведением, которая обычно включает переключатель старт/пауза, индикатор прогресса и элементы управления громкостью. Controls — это булев атрибут, т. е. ему не нужно присваивать значение. В синтаксисе, более близком к XHTML, вы могли бы написать controls=»controls», но браузер всегда считает controls равным false, если он отсутствует, и true, если он присутствует или если ему присвоено какое-то значение.

Медиа-атрибуты HTML5 и дочерние теги source

Для элементов audio и video введено несколько новых атрибутов, определяющих то, как браузер будет представлять медиаконтент конечному пользователю:

Отображение текстовых элементов в течение определенного времени

В браузерах также начинают реализовывать элемент track, который поддерживает в видеороликах субтитры, скрытые титры (closed captions), переводы (translations) и комментарии. Вот элемент video с дочерним элементом track::

В этом примере я задействовал четыре из пяти возможных атрибутов элемента track:

На момент написания этой статьи элемент track поддерживался только в Internet Explorer 10 Platform Preview и Chrome 19, а в остальных браузерах эта поддержка должна появиться очень скоро. Некоторые библиотеки JavaScript, о которых я расскажу позже, добавляют поддержку элемента track в браузеры, пока не имеющие соответствующей реализации, но есть еще и отдельная библиотека поддержки track — captionator.js (captionatorjs.com), которая разбирает теги track, читает файлы форматов WebVTT и TTML (а также SRT и YouTube SBV) и предоставляет UI для браузеров, где пока нет собственной поддержки.

Скриптовое управление HTML5 Media

Ранее я использовал атрибут controls, чтобы браузер выводил свои элементы управления поверх тегов video или audio. Проблема в том, что у каждого браузера свой набор элементов управления, которые вряд ли совпадут с дизайном вашего веб-сайта. Для большей согласованности вы можете удалить элементы управления браузера, а затем добавить на страницу собственные кнопки, управляемые кодом на JavaScript. Вы также можете добавить слушатели событий (event listeners), чтобы отслеживать состояние процесса воспроизведения видео или аудио. В следующем примере я убрал атрибут controls и добавил разметку ниже video, которая используется в качестве базовой панели элементов управления:

Простой код на JavaScript (рис. 1) будет управлять воспроизведением видео и показывать текущее время в видеоролике, а также создаст полноценный плеер, показанный на рис. 2 (Internet Explorer 9). (Заметьте, что в HTML5 в теге script атрибут type=»text/javascript» не обязателен.)

Рис. 1. Управление воспроизведением видео

Для браузеров, не поддерживающих тег video (например, Internet Explorer 8) или кодек h.264 (Firefox и Opera), MediaElement.js вставит компенсационную прослойку Flash (или Silverlight — в зависимости от того, что установил пользователь), чтобы «обновить» такие браузеры для поддержки свойств и событий HTML5 Media, о которых я рассказывал.

Для поддержки аудио можно использовать единый MP3-файл:

В качестве альтернативы вы могли бы включить единый файл Ogg/Vorbis:

И вновь для браузеров, не поддерживающих тег audio (Internet Explorer 8) или кодек Ogg/Vorbis (Internet Explorer 9+ и Safari), MediaElement.js вставит компенсационную прослойку, чтобы все эти браузеры функционировали так, будто они изначально поддерживают этот кодек. (Заметьте, что Ogg/Vorbis не будет воспроизводиться на мобильных устройствах.)

MediaElement.js также включает поддержку элемента track и встроенного полноэкранного режима для браузеров, реализующих JavaScript API. Вы можете добавить собственные HTML5-события или свойства для отслеживания, и они будут работать в любом браузере и на любом мобильном устройстве.

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

Источник

Реализация video и audio в HTML5, шаблоны, schema.org микроразметка

В статье описаны строение 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 не поддерживается вашим браузером. Скачать видео

Для указания HTML5 плееру проигрываемого файла нужно, помимо URL файла, передать и MIME тип файла, что бы браузер понимал какой кодек ему нужно использовать. Ниже в таблице привожу наиболее распространенные форматы файлов и их MIME типы.

Форматы файлов и их MIME типы

Инструменты кодирования аудио и видео файлов

Пример стандартного использование HTML5 тега :

Пример HTML5 audio

HTML5 audio не поддерживается вашим браузером.

HTML5 код примера audio с микроразметкой schema.org:

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

Пример стандартного использование HTML5 тега :

Пример HTML5 video

HTML5 video не поддерживается вашим браузером.

HTML5 код примера video с микроразметкой schema.org:

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

Если перед вами стоит вопрос с какого хостинга загружать мультимедийные файлы аудио и видео, то посмотрите статью Yandex Disk REST API jQuery Plugin, в которой описан вариант вставки медиа файлов на WEB страницу с Яндекс Диска.

Атрибуты и тегов:

атрибут autoplay:

атрибут controls:

атрибут loop:

атрибут preload:

атрибут src:

Атрибут poster тега video:

Атрибуты width и height тега video:

Атрибут muted:

Атрибут crossorigin:

Атрибут mediagroup:

Теги и требуют наличие закрывающего тега.

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

В большинстве случаев тег выглядит так:

и в нем присутствует всегда атрибут src и type, который в большинстве случаев имеет только MIME-тип.

Атрибуты тега :

Для HTML5 видео возможно также отображать в плеере дополнительную дорожку с информацией, такой как субтитры (subtitles), заголовки (captions), главы (chapters), описания (descriptions – не поддерживаются пока) и метаданные (metadata – не поддерживаются пока). Эта возможность реализуется путем добавления внутри тега тегов с соответствующими атрибутами.

Тег позволяет подключать к видео дополнительные файлы-дорожки специального формата WebVTT (Web Video Text Tracks Format ), в которых указаны выводимые текстовые сообщения с их временной привязкой к видео файлу. Стандарт WebVTT поддерживает не просто вывод текстовых сообщений, но и предоставляет варианты его CSS стилизации и опции по размещению в области просмотра видео. На настоящий момент WebVTT файлы в основном используются для подключения к видео текстовых субтитров, что поддерживается почти всеми браузерами. Другие возможности WebVTT стандарта пока не полностью реализуются самими браузерами, поэтому, для более полного использования WebVTT, лучше применять JS плееры. Также, файлы WebVTT могут нестандартно использоваться JS плеерами для передачи дополнительных данных в JS плеер, таких как, например, URL превью картинок для фреймов видео. К вопросу о том, как показать превью кадров видео на шкале перемотки плеера (Scrub Bar Thumbnails) как это сделано на видео хостингах. Тут нужно сказать, что такой функционал пока отсутствует во встроенных в браузеры плеерах и поэтому реализуется через JS плееры как дополнение. Для этого подключают JS библиотеку (js плеер), которая берет на себя управление HTML5 видео и аудио объектом и выполняет его стилизацию. Такие JS плееры для показа превью кадров видео нестандартно используют файлы WEBVTT из тега для передачи через него URL картинок превью.

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

Пример файла формата WEBVTT для субтитров на ru

Атрибуты тега :

Атрибут kind тега задает тип дорожки и может принимать значения:

Атрибут src тега задает URL к файлу дорожки с дополнительной информацией. Подключаемый к тегу файл имеет формат WebVTT и расширение .vtt.

Атрибут srclang тега задает язык дорожки через код языка. Для русского языка будет равен «ru», для английского «en».

Атрибут label тега задает название дорожки, которое будет показано в плеере. Если атрибут не будет задан, то браузер покажет свое служебное название.

Атрибут default тега задает выбор данной дорожки по умолчанию при наличии других дорожек в контейнере video. Только один из нескольких тегов может иметь default атрибут. Лучше дорожку по умолчанию располагать первой среди других подключаемых дорожек.

Источник

Что означает атрибут muted для тега audio

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

Другие примечания по использованию:

Хороший источник информации по использованию HTML-элемента – это руководство для начинающих «Видео- и аудиоконтент».

Атрибуты

К этому элементу применимы глобальные атрибуты.

Этот атрибут указывает, следует ли использовать CORS при загрузке мультимедиа или нет. Допустимые значения:

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

События

Этот элемент может инициировать (вызывать) различные события (en-US).

Взаимодействие с CSS

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

Примеры

Базовое использование

«>_с_элементом_ » title=»Permalink to Элемент с элементом «>Элемент с элементом

«>_с_множеством_элементов_ » title=»Permalink to Элемент с множеством элементов «>Элемент с множеством элементов

Проблемы доступности

Audio with spoken dialog should provide both captions and transcripts that accurately describe its content. Captions allow people who are experiencing hearing loss to understand an audio recording’s content as the recording is being played, while transcripts allow people who need additional time to be able to review the recording’s content at a pace and format that is comfortable for them.

If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source audio.

In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone:

Источник

HTML-теги и атрибуты, о которых вы, возможно, не знали

Эта статья — шпаргалка по HTML-тегам. Поэтому не будем разглагольствовать, сразу к делу.

address

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

audio

Тег audio используется для встраивания аудио-контента (музыка и др.) в веб-страницу.

video

Тег video используется для встраивания видео-контента (видеоклип и др.) в веб-страницу.

Тег base определяет основной путь ( URL ) и/или цель ( target ) для всех относительных путей в документе. Он должен размещаться в теге head и иметь хотя бы один из следующих атрибутов:

blockquote и cite

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

Тег code используется для определения части компьютерного кода:

Для форматирования блока кода code часто используется совместно с тегом pre :

datalist

Тег datalist определяет список возможных вариантов для заполнения поля для ввода текста. Он позволяет реализовать «автозавершение» для элемента input : при установке фокуса на такое поле пользователь видит выпадающий список.

Свойство options объекта Datalist возвращает коллекцию всех элементов списка.

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

details

По умолчанию details находится в закрытом состоянии.

Внутри details могут размещаться любые теги.

Индикатором открытого состояния details является атрибут open (этот атрибут может использоваться в качестве CSS-селектора — details[open] или JavaScript-селектора — document.querySelector(‘[open]’) ).

dialog

Тег dialog определяет диалоговое окно. Он используется для создания «попапов» и модальных окон.

По умолчанию dialog находится в неактивном состоянии.

figure

Тег figure определяет обособленный (автономный) контент, такой как иллюстрации, диаграммы, фотографии, примеры кода и т.д.

Несмотря на то, что контент элемента figure формально относится к основному потоку (main flow), его позиция (местонахождение) не зависит от этого потока. Поэтому удаление элемента figure не должно влиять на поток документа.

meter

Тег meter определяет скалярное значение в пределах известного диапазона или дробного значения. Другими словами, meter определяет меру чего-либо (gauge).

Этот тег не должен использоваться в качестве индикатора прогресса.

Так можно записать уровень заряда батареи вашего устройства в значение meter :

progress

Тег progress определяет процесс выполнения задачи.

Этот тег не должен использоваться для определения меры чего-либо.

Так можно реализовать десятисекундный таймер:

output

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

picture

Тег picture предоставляет возможность использования нескольких источников для изображения (нескольких изображений).

Этот тег позволяет использовать разные изображения в зависимости от ширины области просмотра (viewport width) вместо масштабирования одного изображения.

template

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

Этот тег предназначен для хранения разметки, которая используется часто, но в определенных случаях (по запросу).

Тег time определяет конкретное время (или дату и время).

Атрибут datetime используется для представления времени в машиночитаемом формате.

noscript

Другие теги в форме шпаргалок

Семантическое «секционирование» страницы

Стилизация текста

Форма

Поля для ввода данных

Пример валидации адреса электронной почты и пароля:

Таблица

Теги colgroup и col могут использоваться для стилизации определенных колонок таблицы целиком вместо стилизации каждой ячейки и строки по отдельности.

Послесловие

Наши виртуалки можно использовать для разработки веб-сайтов.

Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!

Источник

16 полезных атрибутов HTML, которые пригодятся всем

Содержание

Не все HTML-теги такие самодостаточные, что их можно применять без всяких дополнений. Часто нужна дополнительная информация, чтобы тег был действительно полезным. Для этого разработчики используют атрибуты. Атрибуты тегов помогают браузеру понять, как именно должен отображаться элемент страницы. Мы собрали список атрибутов, которые вам точно пригодятся.

Атрибут показывает на странице текст, в случае, если изображение не загрузилось.

Alt-текст поможет понять, что на картинке, если её по каким-то причинам не видно.

Кстати, у нас в блоге есть подробная инструкция, как правильно писать alt-текст.

autoplay, muted

Autoplay используется для видео и аудио и запускает воспроизведение, когда контент готов и загружен:

Атрибут Autoplay muted запускает видео без звука при загрузке страницы:

rows, cols

Эти атрибуты задают размер текста в поле ввода: rows определяет количество строк, а cols — количество знаков в строке:

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

А так получится поле выбора календарной даты:

Виджет выбора даты.

Если атрибут type не задан, то по умолчанию поле ввода будет текстовым.

Атрибут привязывает тег label к полю ввода, если они разделены:

placeholder

Даёт пользователю подсказку, как можно заполнить поле ввода:

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

Атрибут target=»_blank» указывает браузеру открыть ссылку в новой вкладке. При этом страница, на которую вы ссылаетесь, получает частичный доступ к текущей странице. Это происходит с помощью объекта window.opener и ставит под угрозу ваши данные. Значение noopener не позволяет предоставить доступ к данным текущей страницы, а noreferrer скрывает адрес страницы, с которой вы перешли.

Значение nofollow объявляет поисковой системе, что документ не имеет влияния на page ranking документа, к которому ведет ссылка, то есть не передаёт ему свою ценность.

download

contentEditable

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

У нас даже есть отдельная статья, где можно посмотреть, как работает этот атрибут.

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

loading

Задаёт поведение браузера при загрузке изображения. Принимает два значения: eager (картинка загружается всегда, независимо от области просмотра) и lazy (загрузка откладывается, пока изображение не достигнет области просмотра).

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

Выбор типа документа при оформлении билета на поезд.

title

Содержит текст с дополнительной информацией для элемента.

Может также содержать подсказку, которая всплывает, когда пользователь наводит курсор на элемент:

Подсказка при наведении курсора на элемент.

Конечно, есть ещё много полезных атрибутов. А узнать про атрибуты побольше и попробовать их в действии можно в бесплатном тренажёре «Основы HTML и CSS» от HTML Academy.

Источник