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

Что означает атрибут 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:

Источник

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

Источник

Audio и Video

Информация об этих медиа объектах позаимствована с web-страницы https://andew.ru/

Свойства

Методы