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), который указывает диапазоны медиаисточника, который браузер буферизировал (если есть) в момент обращения к свойствуbuffered
.HTMLMediaElement.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
, указывающий настройку CORS для этого медиаэлемента.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. duration
Только для чтенияВозвращает значение типа 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
.HTMLMediaElement.mediaKeys
Только для чтения Экспериментальная возможностьВозвращает объект
MediaKeys
(en-US) или ноль. MediaKeys — это набор ключей, которые связанный HTMLMediaElement может использовать для дешифрования мультимедийных данных во время воспроизведения.HTMLMediaElement.mozAudioCaptured
Только для чтения Non-standardВозвращает
Boolean
. Связанный с захватом аудиопотока.HTMLMediaElement.mozFragmentEnd
Non-standardДвойник, обеспечивающий доступ к времени окончания фрагмента, если медиа-элемент имеет URI-фрагмент для currentSrc, в противном случае он равен продолжительности медиа.
HTMLMediaElement.mozFrameBufferLength
Non-standard DeprecatedЭто unsigned long, который указывает число выборок, которые будут возвращены в кадровом буфере каждого события MozAudioAvailable. Это число является общим для всех каналов, и по умолчанию установлено количество каналов * 1024 (например, 2 канала * 1024 выборок = всего 2048).
Для свойства mozFrameBufferLength может быть установлено новое значение для более низкой задержки, больших объёмов данных и т. Д. Указанный размер должен быть числом от 512 до 16384. Использование любого другого размера приводит к возникновению исключения. Лучшее время для установки новой длины — после того, как сработало событие загруженных метаданных, когда известна аудиоинформация, но до того, как аудио началось, или события MozAudioAvailable начали срабатывать.
HTMLMediaElement.mozSampleRate
Только для чтения Non-standard DeprecatedВозвращает двойное число, представляющее количество семплов в секунду, которые будут воспроизведены. Например, 44100 выборок в секунду — это частота дискретизации, используемая аудио CD.
HTMLMediaElement.muted
(en-US)Boolean
, определяющий, отключён ли звук. true, если звук отключён, и false в противном случае.HTMLMediaElement.networkState
Возвращает unsigned short (перечисление), указывающее текущее состояние выборки мультимедиа по сети.
HTMLMediaElement.paused
(en-US) Только для чтенияВозвращает
Boolean
, который указывает, приостановлен ли медиа-элемент.HTMLMediaElement.playbackRate
(en-US)Двойное число, указывающее скорость воспроизведения мультимедиа.
HTMLMediaElement.played
Только для чтенияВозвращает объект
TimeRanges
(en-US), который содержит диапазоны медиаисточников, которые воспроизводил браузер, если таковые имеются.HTMLMediaElement.preload
Это
, который отражает атрибут HTMLDOMString
preload
, указывающий, какие данные должны быть предварительно загружены, если таковые имеются. Возможные значения: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 Этот API вышел из употребления и его работа больше не гарантируется.Возвращает значение типа double, указывающее начальную позицию воспроизведения в секундах.
HTMLMediaElement.mozChannels
Только для чтения Non-standard DeprecatedВозвращает значение типа double, представляющее количество каналов в аудиоресурсе (например, 2 для стерео).
Устаревшие обработчики событий
HTMLMediaElement.onmozinterruptbegin
«> Non-standard Этот API вышел из употребления и его работа больше не гарантируется.Устанавливает
EventHandler
(en-US), вызываемый, когда медиа-элемент прерывается из-за менеджера аудио-каналов. Это было специфично для Firefox, оно было реализовано для Firefox OS и было удалено в Firefox 55.HTMLMediaElement.onmozinterruptend
Non-standard Этот API вышел из употребления и его работа больше не гарантируется.Устанавливает
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 DeprecatedЭтот метод, доступный только в реализации 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)Срабатывает, когда воспроизведение остановлено из-за временной нехватки данных
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)
Last modified: , by MDN contributors
HTMLVideoElement — Интерфейсы веб API
HTMLVideoElement
интерфейс предоставляет специальные свойства и методы для манипулирования видео объектов. Он также наследует свойства и методы HTMLMediaElement
и HTMLElement
.
Список поддерживаемых форматов медиа варьируются из одного браузера в другой. Вы должны либо предоставить ваше видео в одном формате которые поддерживаются всеми актуальными браузерами, или предоставить множественные источники видео в достаточно разных форматах чтобы все браузеры которые вам нужны поддерживали их.
Inherits properties from its parent, HTMLMediaElement
, and HTMLElement
.
HTMLVideoElement.height
Is a
DOMString
that reflects theheight
HTML attribute, which specifies the height of the display area, in CSS pixels.HTMLVideoElement.poster
Is a
DOMString
that reflects theposter
HTML attribute, which specifies an image to show while no video data is available.HTMLVideoElement.videoHeight
(en-US) Только для чтенияReturns an
unsigned long
containing the intrinsic height of the resource in CSS pixels, taking into account the dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used by the resource. If the element’s ready state isHAVE_NOTHING
, the value is0
.HTMLVideoElement.videoWidth
(en-US) Только для чтенияReturns an
unsigned long
containing the intrinsic width of the resource in CSS pixels, taking into account the dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used by the resource. If the element’s ready state isHAVE_NOTHING
, the value is0
.HTMLVideoElement.width
Is a
DOMString
that reflects thewidth
HTML attribute, which specifies the width of the display area, in CSS pixels.
Gecko-специфичные свойства
HTMLVideoElement.mozParsedFrames
Только для чтения Non-standardReturns an
unsigned long
with the count of video frames that have been parsed from the media resource.HTMLVideoElement.mozDecodedFrames
Только для чтения Non-standardReturns an
unsigned long
with the count of parsed video frames that have been decoded into images.HTMLVideoElement.mozPresentedFrames
Только для чтения Non-standardReturns an
unsigned long
with the count of decoded frames that have been presented to the rendering pipeline for painting.HTMLVideoElement.mozPaintedFrames
Только для чтения Non-standardReturns an
unsigned long
with the count of presented frames which were painted on the screen.HTMLVideoElement.mozFrameDelay
Только для чтения Check cross-browser support before using.»> Non-standardReturns an
double
with the time which the last painted video frame was late by, in seconds.HTMLVideoElement.mozHasAudio
Только для чтения Non-standardReturns a
Boolean
(en-US) indicating if there is some audio associated with the video.
Inherits methods from its parent, HTMLMediaElement
, and HTMLElement
.
HTMLVideoElement.getVideoPlaybackQuality()
(en-US) Экспериментальная возможностьReturns a
VideoPlaybackQuality
(en-US) objects that contains the current playback metrics.
Specification |
---|
HTML Standard # htmlvideoelement |
BCD tables only load in the browser
with JavaScript enabled. Enable JavaScript to view data.- HTML element implementing this interface:
<video>
. - Demo of video paint statistics
- Supported media formats (en-US)
Last modified: , by MDN contributors
Использование HTML-элемента для воспроизведения видео на вашем веб-сайте
Мы прошли долгий путь с тех пор, как Flash стал де-факто подключаемым модулем для надежного воспроизведения видео в браузерах.
Сегодня это так же просто, как добавить 3 строки HTML-кода:
<элементы управления видео>
Элемент сегодня является стандартным способом встраивания видео на веб-страницы. Он уже некоторое время поддерживается всеми современными браузерами и обладает достаточной функциональностью.
Вы также можете использовать сегодня является стандартным способом встраивания видео на веб-страницы. Он уже некоторое время поддерживается всеми современными браузерами и обладает достаточной функциональностью.
Вы также можете использовать
для аудиоконтента, но элемент
может обеспечить более подходящее взаимодействие с пользователем.
Вот более сложный пример:
<элементы управления видео controlList="nodownload" poster="initialimage.png" muted>
Приведенный выше видеоплеер:
- показывает изображение для предварительного просмотра
- воспроизводит видео 640×480, звук которого по умолчанию отключен
- скрывает кнопку загрузки
- имеет ссылку на видео в качестве запасного варианта для очень старых браузеров
Не стесняйтесь копировать , вставлять и адаптировать код под свои нужды .
Но видеоплееры, встроенные в современные браузеры, имеют еще больше возможностей:
- Отображение или скрытие элементов управления видео, включая воспроизведение/паузу, громкость, переключение в полноэкранный режим и ползунок поиска с помощью
управляет атрибутом
. - Скрытие (новых) кнопок загрузки, полноэкранного режима или удаленного воспроизведения с помощью атрибута
controlList
(только Chrome 58, пример кода) - Установите изображение плаката для отображения во время загрузки или невоспроизведения видео с помощью атрибута
poster
. - Предоставьте список видео в разных форматах, чтобы каждый браузер мог воспроизводить формат, который он поддерживает, используя несколько
- Включите скрытые субтитры или субтитры на нескольких языках, используя элемент
- Сообщите браузеру, следует ли начинать загрузку видео при загрузке страницы или только тогда, когда пользователь нажимает кнопку «Воспроизвести», используя атрибут
preload
. - Автоматическое воспроизведение видео, как только оно будет готово, с использованием атрибута
autoplay
- Воспроизведение видео один раз или в цикле с помощью
цикл
атрибут. - Укажите, хотите ли вы воспроизводить видео без звука (без звука), используя атрибут
без звука
. Например, автоматические видеоролики на Facebook отображают параметр отключения звука, наложенный на видео. - Укажите точку в видео, с которой должно начаться воспроизведение, добавив
#t=20
к URI видео (URI фрагментов мультимедиа, пример) -
воспроизведениеRate
иdefaultPlaybackRate
Атрибуты, доступные через DOM, позволяют нам управлять скоростью воспроизведения видео - Укажите, что видео должно воспроизводиться встроенно в Safari на iOS 10+, используя новый атрибут
playsinline
.
Какими бы мощными они ни были, некоторые вещи не охвачены. Для показа рекламы с использованием списков воспроизведения и аналитики вам следует рассмотреть коммерческие решения, такие как JW Media Player, Flow Player и Cloudinary или video. js с открытым исходным кодом. В Cloudinary также есть сравнение видеоплеера HTML5 со многими другими перечисленными решениями.
Это версия документа Google, опубликованная в блоге, которой мы поделились с нашими клиентами, когда представляли регион EU2. В сентябре 2021 года мы запустили новый регион обработки файлов
.Мы используем Gearman для обработки десятков тысяч и сотен тысяч записей в день. Это резюме работы и исследований, проделанных всеми тремя инженерами Pipe: Octavian, Remus
.Я полагаю, что мы находимся на третьей итерации нашего механизма входа с помощью Google. Я думаю, что на этот раз мы, наконец, сделали это правильно. Это началось как задача, связанная с конфиденциальностью. Мы хотели
Pipe Services S. R.L. 2015–2022
HTML-видеоэлемент — для хорошего отображения контента с помощью HTML-видео
В этой статье вы узнаете об элементе HTML-видео и о том, как его использовать.
Вы также можете посмотреть этот видеоурок:
Об элементе HTML Video
Элемент HTML Video предназначен для того, чтобы сделать вашу страницу более привлекательной и повысить коэффициент конверсии. Вы можете использовать этот элемент, чтобы поделиться видео на своем веб-сайте или в блоге.
Доступ к элементу
HTML VideoШаг 1: Нажмите на значок Plus , который является функцией Добавить элемент
Шаг 2: Нажмите на Элемент HTML Video в раскрывающемся меню
Шаг 3: Перетащите нужный элемент в редактор страниц, а затем начните его использовать.
Перетащите этот элемент на свой макет и посмотрите, как его можно настроить.
Конфигурация элемента HTML Video
Этот элемент имеет множество различных параметров, позволяющих точно настроить внешний вид контента для достижения наилучшего коэффициента конверсии.
Параметры в 9Вкладки 0009 General и Styling относятся к этому элементу.
Общая конфигурацияСодержание | |
HTML Video URL: . Загрузка Video или URL, просто на MID MID. Поддерживаются только форматы видео: MP4, WebM, и Ogg . | |
Размер видео : Отредактируйте размер вашего видео двумя вариантами: Полная ширина или Пользовательский размер | |
Показать элементы управления : Показать элементы управления видеоплеером. |