HTMLMediaElement — Интерфейсы веб API
Интерфейс HTMLMediaElement добавляет к HTMLElement
свойства и методы, необходимые для поддержки базовых мультимедийных возможностей, общих для аудио и видео. Элементы HTMLVideoElement
и HTMLAudioElement
наследуют этот интерфейс.
Этот интерфейс также наследует свойства от своих предков HTMLElement
, Element
, Node
и EventTarget
.
HTMLMediaElement.audioTracks
(en-US)AudioTrackList
(en-US), в котором перечислены объектыAudioTrack
(en-US), содержащиеся в элементе.HTMLMediaElement.autoplay
(en-US)Boolean
, который отражает атрибут HTMLautoplay
, указывающий, должно ли воспроизведение начинаться автоматически, как только будет доступно достаточно медиафайлов, чтобы сделать это без прерывания.Примечание: Примечание. Сайты, которые автоматически воспроизводят аудио (или видео с аудиодорожкой), могут быть неприятными для пользователей, поэтому их следует по возможности избегать. Если вы должны предлагать функцию автозапуска, вы должны включить её (требуется, чтобы пользователь специально включил её). Однако это может быть полезно при создании элементов мультимедиа, источник которых будет установлен позднее под контролем пользователя.
HTMLMediaElement.buffered
(en-US) Только для чтенияВозвращает объект
TimeRanges
(en-US), который указывает диапазоны медиаисточника, который браузер буферизировал (если есть) в момент обращения к свойству
. bufferedHTMLMediaElement.controller
(en-US)Объект
MediaController
, представляющий медиа-контроллер, назначенный элементу, либоnull
, если ни один не назначен.HTMLMediaElement.controls
(en-US)Является
Boolean
, который отражает атрибут HTMLcontrols
, указывающий, должны ли отображаться элементы пользовательского интерфейса для управления ресурсом.HTMLMediaElement.controlsList
(en-US) Только для чтенияВозвращает
DOMTokenList
, который помогает агенту пользователя выбирать элементы управления для отображения на элементе мультимедиа всякий раз, когда агент пользователя показывает свой собственный набор элементов управления. DOMTokenList принимает одно или несколько из трёх возможных значений: nodownload, nofullscreen и noremoteplayback.HTMLMediaElement.crossOrigin
(en-US)DOMString
HTMLMediaElement.currentSrc
(en-US) Только для чтенияВозвращает
DOMString
с абсолютным URL-адресом выбранного медиа-ресурса.HTMLMediaElement.currentTime
(en-US)Двойное значение, обозначающее текущее время воспроизведения в секундах. Установка этого значения ищет носитель в новое время.
HTMLMediaElement.defaultMuted
(en-US)Является
Boolean
, который отражает атрибут HTMLmuted
, который указывает, должен ли звук вывода медиа-элемента по умолчанию отключаться.HTMLMediaElement.defaultPlaybackRate
(en-US)Двойное значение, обозначающее скорость воспроизведения по умолчанию для мультимедиа.
HTMLMediaElement.disableRemotePlayback
(en-US)Boolean
, который устанавливает или возвращает состояние удалённого воспроизведения, указывая, разрешено ли медиаэлементу иметь удалённый пользовательский интерфейс воспроизведения.HTMLMediaElement.
Только для чтенияВозвращает значение типа double, указывающее длину носителя в секундах, или 0, если данные носителя отсутствуют.
HTMLMediaElement.ended
(en-US) Только для чтенияВозвращает
Boolean
, который указывает, закончил ли воспроизведение медиа-элемент.HTMLMediaElement.error
(en-US) Только для чтенияВозвращает объект
MediaError
для самой последней ошибки илиnull
, если ошибки не было.HTMLMediaElement.loop
(en-US)Является
Boolean
, который отражает атрибут HTMLloop
, который указывает, должен ли медиа-элемент начинаться сначала, когда он достигает конца.HTMLMediaElement.mediaGroup
(en-US)Это
DOMString
, который отражает атрибут HTMLmediagroup
, который указывает имя группы элементов, к которой он принадлежит. Группа медиа-элементов имеет общийMediaController
.
(en-US) Только для чтения Экспериментальная возможностьВозвращает объект
MediaKeys
(en-US) или ноль. MediaKeys — это набор ключей, которые связанный HTMLMediaElement может использовать для дешифрования мультимедийных данных во время воспроизведения.HTMLMediaElement.mozAudioCaptured
Только для чтения Non-standardВозвращает
Boolean
. Связанный с захватом аудиопотока.HTMLMediaElement.mozFragmentEnd
Non-standardДвойник, обеспечивающий доступ к времени окончания фрагмента, если медиа-элемент имеет URI-фрагмент для currentSrc, в противном случае он равен продолжительности медиа.
HTMLMediaElement.mozFrameBufferLength
Non-standard УстарелоЭто unsigned long, который указывает число выборок, которые будут возвращены в кадровом буфере каждого события MozAudioAvailable. Это число является общим для всех каналов, и по умолчанию установлено количество каналов * 1024 (например, 2 канала * 1024 выборок = всего 2048).
Для свойства mozFrameBufferLength может быть установлено новое значение для более низкой задержки, больших объёмов данных и т. Д. Указанный размер должен быть числом от 512 до 16384. Использование любого другого размера приводит к возникновению исключения. Лучшее время для установки новой длины — после того, как сработало событие загруженных метаданных, когда известна аудиоинформация, но до того, как аудио началось, или события MozAudioAvailable начали срабатывать.
HTMLMediaElement.mozSampleRate
Только для чтения Non-standard УстарелоВозвращает двойное число, представляющее количество семплов в секунду, которые будут воспроизведены. Например, 44100 выборок в секунду — это частота дискретизации, используемая аудио CD.
HTMLMediaElement.muted
(en-US)Boolean
, определяющий, отключён ли звук. true, если звук отключён, и false в противном случае.HTMLMediaElement.networkState
(en-US) Только для чтенияВозвращает unsigned short (перечисление), указывающее текущее состояние выборки мультимедиа по сети.
HTMLMediaElement.paused
(en-US) Только для чтенияВозвращает
Boolean
, который указывает, приостановлен ли медиа-элемент.HTMLMediaElement.playbackRate
Двойное число, указывающее скорость воспроизведения мультимедиа.
HTMLMediaElement.played
Только для чтенияВозвращает объект
TimeRanges
(en-US), который содержит диапазоны медиаисточников, которые воспроизводил браузер, если таковые имеются.HTMLMediaElement.preload
Это
DOMString
, который отражает атрибут HTMLpreload
, указывающий, какие данные должны быть предварительно загружены, если таковые имеются. Возможные значения:none
,metadata
,auto
.HTMLMediaElement.preservesPitch
(en-US) Non-standardЯвляется
Boolean
, который определяет, будет ли сохранена высота звука. Если установлено значение false, высота звука будет регулироваться в зависимости от скорости звука. Это реализовано с помощью префиксов в Firefox (mozPreservedPitch) и WebKit (webkitPreservedPitch).HTMLMediaElement.readyState
(en-US) Только для чтенияВозвращает
unsigned short
(перечисление), указывающее состояние готовности носителя.HTMLMediaElement.seekable
(en-US) Только для чтенияВозвращает объект
TimeRanges
(en-US), который содержит временные диапазоны, к которым пользователь может обращаться, если таковые имеются.HTMLMediaElement.seeking
Только для чтенияВозвращает
Boolean
, который указывает, находится ли медиа в процессе поиска новой позиции.HTMLMediaElement.sinkId
(en-US) Только для чтения Её поведение в будущем может измениться»> Экспериментальная возможностьВозвращает
DOMString
, который является уникальным идентификатором аудиоустройства, предоставляющего выходные данные, или пустую строку, если используется пользовательский агент по умолчанию. Этот идентификатор должен быть одним из значений MediaDeviceInfo.deviceid, возвращаемых изMediaDevices.enumerateDevices ()
, id-multimedia или id-communications.HTMLMediaElement.src
(en-US)Это
DOMString
, который отражает атрибут HTMLsrc
, который содержит URL-адрес используемого медиа-ресурса.HTMLMediaElement.srcObject
(en-US)MediaStream
, представляющий медиафайл для воспроизведения или воспроизведённый в текущем HTMLMediaElement, или null, если не назначен.HTMLMediaElement.textTracks
(en-US) Только для чтенияВозвращает список объектов
TextTrack
(en-US), содержащихся в элементе.HTMLMediaElement.videoTracks
(en-US) Только для чтенияВозвращает список объектов
VideoTrack
(en-US), содержащихся в элементе.Примечание: Gecko поддерживает воспроизведение только одной дорожки, а разбор метаданных дорожек доступен только для носителей с форматом контейнера Ogg.
HTMLMediaElement.volume
(en-US)Двойной показатель громкости звука, от 0,0 (тихий) до 1,0 (самый громкий).
Обработчики событий
HTMLMediaElement.onencrypted
(en-US)Устанавливает
Event Handler
, вызываемый, когда носитель зашифрован.HTMLMediaElement.onwaitingforkey
(en-US)Устанавливает
EventHandler
(en-US), вызываемый, когда воспроизведение заблокировано во время ожидания ключа шифрования.
Эти атрибуты устарели и не должны использоваться, даже если браузер все ещё поддерживает их.
HTMLMediaElement.initialTime
Только для чтения Non-standardВозвращает значение типа double, указывающее начальную позицию воспроизведения в секундах.
HTMLMediaElement.mozChannels
Только для чтения Non-standard УстарелоВозвращает значение типа double, представляющее количество каналов в аудиоресурсе (например, 2 для стерео).
Устаревшие обработчики событий
HTMLMediaElement.onmozinterruptbegin
Non-standardУстанавливает
EventHandler
(en-US), вызываемый, когда медиа-элемент прерывается из-за менеджера аудио-каналов. Это было специфично для Firefox, оно было реализовано для Firefox OS и было удалено в Firefox 55.HTMLMediaElement.onmozinterruptend
Non-standardУстанавливает
Event Handler
, вызываемый при завершении прерывания. Это было специфично для Firefox, оно было реализовано для Firefox OS и было удалено в Firefox 55.
Этот интерфейс также наследует методы от своих предков HTMLElement
, Element
, Node
и EventTarget
.
HTMLMediaElement.addTextTrack()
Добавляет текстовую дорожку (например, дорожку для субтитров) к элементу мультимедиа.
HTMLMediaElement.captureStream()
(en-US) Экспериментальная возможностьВозвращает
MediaStream
, захватывает поток медиа-контента.HTMLMediaElement.canPlayType()
(en-US)Определяет, может ли указанный тип носителя воспроизводиться.
HTMLMediaElement.fastSeek()
(en-US)Прямо стремится к данному времени.
HTMLMediaElement.load()
(en-US)Сбрасывает носитель в начало и выбирает наилучший из доступных источников из источников, предоставленных с использованием атрибута
src
или элемента<source>
.HTMLMediaElement.mozCaptureStream()
Non-standard[введите описание]
HTMLMediaElement.mozCaptureStreamUntilEnded()
Non-standard[введите описание]
HTMLMediaElement. mozGetMetadata()
Non-standardВозвращает
Object
, который содержит свойства, которые представляют метаданные из воспроизводимого медиаресурса в виде пар {key: value}. Отдельная копия данных возвращается каждый раз, когда вызывается метод. Этот метод должен вызываться после возникновения события загруженных метаданных.HTMLMediaElement.pause()
(en-US)Пауза воспроизведения мультимедиа.
HTMLMediaElement.play()
(en-US)Начинается воспроизведение мультимедиа.
HTMLMediaElement.seekToNextFrame()
(en-US) Non-standard Экспериментальная возможностьСтремится к следующему кадру в медиа. Этот нестандартный экспериментальный метод позволяет вручную управлять считыванием и воспроизведением мультимедиа с настраиваемой скоростью или перемещаться по мультимедиа покадрово для выполнения фильтрации или других операций.
HTMLMediaElement.setMediaKeys()
(en-US) Экспериментальная возможностьВозвращает
Промис
. Устанавливает клавишиMediaKeys
(en-US), используемые при дешифровании медиафайлов во время воспроизведения.HTMLMediaElement.setSinkId()
(en-US) Экспериментальная возможностьУстанавливает идентификатор аудиоустройства, которое будет использоваться для вывода, и возвращает
Promise
. Это работает только тогда, когда приложение имеет право использовать указанное устройство.
Эти методы устарели и не должны использоваться, даже если браузер все ещё поддерживает их.
HTMLMediaElement.mozLoadFrom()
Non-standard УстарелоЭтот метод, доступный только в реализации Mozilla, загружает данные из другого медиа-элемента. Это работает аналогично load () за исключением того, что вместо обычного алгоритма выбора ресурса для источника просто устанавливается значение currentSrc другого элемента. Это оптимизировано, так что этот элемент получает доступ ко всем кешированным и буферизованным данным другого элемента; фактически эти два элемента совместно используют загруженные данные, поэтому данные, загруженные любым из этих элементов, доступны обоим.
Наследует методы от своего родителя HTMLElement
, определённого в миксине GlobalEventHandlers
. Обработайте эти события, используя addEventListener () или назначив обработчик событий свойству oneventname этого интерфейса.
abort
Срабатывает, когда ресурс загружен не полностью, но не в результате ошибки.
canplay
(en-US)Запускается, когда пользовательский агент может воспроизводить мультимедиа, но оценивает, что загружено недостаточно данных для воспроизведения мультимедиа до его конца без необходимости остановки для дальнейшей буферизации контента.
canplaythrough
(en-US)Запускается, когда пользовательский агент может воспроизводить мультимедиа, и оценивает, что было загружено достаточно данных для воспроизведения мультимедиа до его конца, без необходимости остановки для дальнейшей буферизации контента.
durationchange
(en-US)Запускается, когда атрибут продолжительности был обновлён.
emptied
(en-US)Запускается, когда носитель становится пустым; например, когда носитель уже загружен (или частично загружен), и для его перезагрузки вызывается метод
HTMLMediaElement.load ()
.ended
(en-US)Срабатывает, когда воспроизведение останавливается, когда достигнут конец носителя (<audio> или <video>) или если дальнейшие данные недоступны.
error
(en-US)Срабатывает, когда ресурс не может быть загружен из-за ошибки.
loadeddata
(en-US)Запускается, когда первый кадр носителя завершил загрузку.
loadedmetadata
(en-US)Запускается, когда метаданные были загружены
loadstart
(en-US)Запускается, когда браузер начал загружать ресурс.
pause
(en-US)Вызывается, когда обрабатывается запрос на приостановку воспроизведения, и действие переходит в состояние паузы, чаще всего это происходит, когда вызывается медиа
HTMLMediaElement.pause ()
.play
(en-US)Срабатывает, когда свойство paused изменяется с true на false, в результате использования метода
HTMLMediaElement.play ()
или атрибута autoplayplaying
(en-US)Запускается, когда воспроизведение готово начать после приостановки или задержки из-за отсутствия данных.
progress
(en-US)Периодически запускается, когда браузер загружает ресурс.
ratechange
(en-US)Запускается, когда скорость воспроизведения изменилась.
seeked
(en-US)Запускается, когда скорость воспроизведения изменилась.
seeking
Запускается, когда начинается операция поиска
stalled
(en-US)Запускается, когда пользовательский агент пытается извлечь данные мультимедиа, но данные неожиданно не поступают.
suspend
(en-US)Запускается, когда загрузка медиа-данных была приостановлена.
timeupdate
(en-US)Запускается, когда время, указанное атрибутом currentTime, было обновлено.
volumechange
(en-US)Запускается при изменении громкости.
waiting
(en-US)Срабатывает, когда воспроизведение остановлено из-за временной нехватки данных
Характеристики | Статус | Комментарий |
---|---|---|
Media Capture and Streams Определение ‘HTMLMediaElement’ в этой спецификации. | Кандидат в рекомендации | Добавляет sinkId и setSinkId() , и captureStream() . |
Encrypted Media Extensions Определение ‘Encrypted Media Extensions’ в этой спецификации. | Рекомендация | Добавляет MediaKeys (en-US), MediaEncryptedEvent (en-US), setMediaKeys , onencrypted , и onwaitingforkey . |
HTML Living Standard Определение ‘HTMLMediaElement’ в этой спецификации. | Живой стандарт | Без изменений HTML5 |
HTML5 Определение ‘HTMLMediaElement’ в этой спецификации. | Рекомендация | Начальное определение. |
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
- Рекомендации
<video>
и<audio>
HTML-элементы.HTMLVideoElement
иHTMLAudioElement
интерфейсы, полученные из HTMLMediaElement.
- Статьи
- Использование HTML5 аудио и видео (en-US)
- Медиа форматы, поддерживаемые аудио и видео элементами (en-US)
- API веб-аудио (en-US)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on by MDN contributors.
Какие теги мультимедийных элементов появились в HTML5?
HTML5 представил 5 самых популярных тегов медиа-элементов, т. е. Эти теги медиа-элементов изменили всю разработку с использованием HTML.
В этой статье вы кратко узнаете об этих пяти тегах медиа-элементов.
Теги мультимедиа:
- <аудио> : Это встроенный элемент, который используется для встраивания звуковых файлов в веб-страницу.
- : Используется для встраивания видеофайлов в веб-страницу.
- <источник> : Используется для прикрепления мультимедийных файлов, таких как аудио, видео и изображения.
- < embed >: Используется для встраивания внешних приложений, которые обычно представляют собой мультимедийный контент, такой как аудио или видео, в документ HTML.
- : Указывает текстовые дорожки для аудио- и видеокомпонентов мультимедиа.
Преимущество тега Media:
- Плагины больше не требуются
- Скорость — все, что естественным образом интегрировано в браузер, будет отображаться и выполняться быстрее, чем импортированное стороннее
- Собственный (встроенный) элементы управления предоставляются браузером.
- Специальные возможности (клавиатура, мышь) встроены автоматически
Тег Это полезный тег, если вы хотите добавить аудио, например песни, или любые звуковые файлы на свою веб-страницу.
Синтаксис:
<аудио>
Пример: В этом примере мы будем использовать тег
Вывод:
Это стандартный способ встроить видео на вашу веб-страницу.
Синтаксис:
Пример: В этом примере мы увидим использование тега
HTML
< html > < головка > < стиль > h2 { цвет: зеленый; } стиль > головка > 9 0099 < корпус > < центр > < h2 >GeeksforGeeks h2 > < стр >Образец видео p > < видео ширина 90 099 = "400" высота = "350" управление преднатягом> < источник источник = "myvid. mp4" введите = "видео/mp4" > < источник источник = "myvid.ogg" тип = "video/ogg" > видео > центр > корпус > HTML > |
Вывод:
Добавление видео на YouTube:
Видео на YouTube также можно напрямую добавляется на вашу веб-страницу с помощью опции встраивания видео в любое видео на YouTube.
Элемент используется для добавления видео с атрибутом src, но для этого нужно просто перейти к любому видео на YouTube и щелкнуть правой кнопкой мыши по видео, а затем выбрать вариант копирования кода для встраивания.
Вставьте код в редактор кода, и видео будет добавлено на веб-страницу.
HTML
< html > < голова > < заголовок > Заголовок страницы title > head > < тело > < iframe 90 099 ширина = "942" высота = "530" src = "https://www.youtube.com/embed/KWnoiOimNbs" title="Введение на Python | Образец видео для курса Python Foundation | GeeksforGeeks" граница кадра = "0" allow="акселерометр; Автовоспроизведение; запись в буфер обмена; зашифрованные носители; гироскоп; картинка в картинке; web-share" allowfullscreen> 900 99 iframe > корпус > html > 9000 5 |
Вывод:
Используется в качестве контейнера для встраивания плагинов, таких как флэш-анимация.
Синтаксис:
<встроить атрибуты>
Пример: В этом примере мы будем использовать <встроить>
Вывод:
Как видите, элементы
Синтаксис:
Пример: В этом примере мы будем использовать
HTML
< html > < головка > 9 0099 < стиль > h2 { цвет : зеленый; } стиль > головка > < корпус > 90 099 < центр > < h2 >GeeksforGeeks h2 > < h3 >Тег источника h3 90 099 > < аудио управление> < источник 9010 0 |
9 0003 Вывод:
<дорожка>: Используется для указания субтитров, файлов субтитров или различные файлы, содержащие текст, который должен быть виден, когда в нем участвует медиа. Таким образом, это простой сектор для элементов
Синтаксис:
<атрибут дорожки>
Пример: В этом примере мы будем использовать
HTML
9009 9 < html > < голова > < стиль > 9 0099 h2 { цвет: зеленый; } стиль > головка > < корпус > < центр > < h2 >GeeksforGeeks h2 > < h3 >Тег дорожки: аудио и видео h3 > < видео ширина = "300" высота = "300" управление> < источник 9 0099 источник = "myvid. mp4" тип = "видео/mp4" > < дорожка 90 099 src = kind = "subtitle" srclang 9010 0 |
Вывод:
mediaelement - npm
Один файл. Любой браузер. Тот же пользовательский интерфейс.
- Автор: Джон Дайер http://j. hn/
- Веб-сайт: http://mediaelementjs.com/
- Лицензия: MIT
- Значение: Используйте везде, сохраняйте авторские права, было бы здорово, если бы вы дали ссылку сюда.
- Спасибо: мой работодатель, Далласская богословская семинария.
- Участники: все участники
- Введение
- Установка и использование
- API и конфигурация
- Руководство для авторов
- Журнал изменений
- Миграция
- Список дел
Введение
MediaElementPlayer: HTML5
и
player
Полный HTML/CSS аудио/видео плеер, созданный на основе MediaElement.js
. Многие отличные проигрыватели HTML5 имеют полностью отдельный пользовательский интерфейс Flash в резервном режиме, но MediaElementPlayer.js использует один и тот же HTML/CSS для всех проигрывателей.
MediaElement.js
— это набор настраиваемых подключаемых модулей Flash, имитирующих HTML5 MediaElement API для браузеров, которые не поддерживают HTML5 или не поддерживают используемые вами медиакодеки. Вместо использования Flash в качестве резервный вариант , Flash используется для обеспечения совместимости браузера с HTML5 и включения кодеков, таких как H.264 (через Flash), во всех браузерах.
В общем, MediaElement.js
поддерживает IE11+, MS Edge, Chrome, Firefox, Safari, iOS 8+ и Android 4.0+ .
Настоятельно рекомендуется прочитать всю документацию и проверить папку demo
, чтобы получить максимальную отдачу от этого пакета . Зайдите сюда, чтобы начать.
* ВАЖНОЕ ПРИМЕЧАНИЕ для пользователей Safari (8 июня 2017 г.)
Начиная с версии Sierra, политики автовоспроизведения
изменились. Вы можете столкнуться с ошибкой, если попытаетесь выполнить play
программно или с помощью атрибута autoplay
с MediaElement, если не указан атрибут muted
.
Для получения дополнительной информации прочитайте https://webkit. org/blog/7734/auto-play-policy-changes-for-macos/
Установка и использование
Полная документация по установке MediaElement.js
доступен в разделе «Установка».
Краткое руководство по созданию и использованию экземпляров MediaElement
доступно на Usage.
Дополнительные функции можно найти по адресу https://github.com/mediaelement/mediaelement-plugins.
API и конфигурация
MediaElement.js
имеет множество опций, которыми вы можете воспользоваться. Посетите страницу API и конфигурация для получения более подробной информации.
Кроме того, для разработки доступно руководство Utilities/Features
. Посетите Утилиты/Функции для получения более подробной информации.
Руководство для участников
Если вы хотите внести свой вклад в улучшение этого пакета, прочтите Руководство.
ПРИМЕЧАНИЕ . Если вы хотите внести свой вклад в переводы, убедитесь, что вы также проверяете https://github.