Htmlvideoelement установить: HTMLMediaElement — Интерфейсы веб API

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, который отражает атрибут HTML autoplay, указывающий, должно ли воспроизведение начинаться автоматически, как только будет доступно достаточно медиафайлов, чтобы сделать это без прерывания.

Примечание: Примечание. Сайты, которые автоматически воспроизводят аудио (или видео с аудиодорожкой), могут быть неприятными для пользователей, поэтому их следует по возможности избегать. Если вы должны предлагать функцию автозапуска, вы должны включить её (требуется, чтобы пользователь специально включил её). Однако это может быть полезно при создании элементов мультимедиа, источник которых будет установлен позднее под контролем пользователя.

HTMLMediaElement.buffered (en-US) Только для чтения

Возвращает объект TimeRanges (en-US), который указывает диапазоны медиаисточника, который браузер буферизировал (если есть) в момент обращения к свойству buffered.

HTMLMediaElement.controller (en-US)

Объект MediaController

, представляющий медиа-контроллер, назначенный элементу, либо null, если ни один не назначен.

HTMLMediaElement.controls (en-US)

Является Boolean, который отражает атрибут HTML controls, указывающий, должны ли отображаться элементы пользовательского интерфейса для управления ресурсом.

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, который отражает атрибут HTML muted, который указывает, должен ли звук вывода медиа-элемента по умолчанию отключаться.

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, который отражает атрибут HTML loop, который указывает, должен ли медиа-элемент начинаться сначала, когда он достигает конца.

HTMLMediaElement.mediaGroup (en-US)

Это DOMString, который отражает атрибут HTML mediagroup, который указывает имя группы элементов, к которой он принадлежит. Группа медиа-элементов имеет общий 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
(en-US)
Только для чтения

Возвращает unsigned short (перечисление), указывающее текущее состояние выборки мультимедиа по сети.

HTMLMediaElement.paused (en-US) Только для чтения

Возвращает Boolean, который указывает, приостановлен ли медиа-элемент.

HTMLMediaElement.playbackRate (en-US)

Двойное число, указывающее скорость воспроизведения мультимедиа.

HTMLMediaElement.played Только для чтения

Возвращает объект TimeRanges (en-US), который содержит диапазоны медиаисточников, которые воспроизводил браузер, если таковые имеются.

HTMLMediaElement.preload

Это DOMString

, который отражает атрибут HTML 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, который отражает атрибут HTML src, который содержит 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 () или атрибута autoplay

playing (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 the height HTML attribute, which specifies the height of the display area, in CSS pixels.

HTMLVideoElement.poster

Is a DOMString that reflects the poster 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 is HAVE_NOTHING, the value is 0.

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 is HAVE_NOTHING, the value is 0.

HTMLVideoElement.width

Is a DOMString that reflects the width HTML attribute, which specifies the width of the display area, in CSS pixels.

Gecko-специфичные свойства

HTMLVideoElement.mozParsedFrames Только для чтения Non-standard

Returns an unsigned long with the count of video frames that have been parsed from the media resource.

HTMLVideoElement.mozDecodedFrames Только для чтения Non-standard

Returns an unsigned long with the count of parsed video frames that have been decoded into images.

HTMLVideoElement.mozPresentedFrames Только для чтения Non-standard

Returns an unsigned long with the count of decoded frames that have been presented to the rendering pipeline for painting.

HTMLVideoElement.mozPaintedFrames Только для чтения Non-standard

Returns an unsigned long with the count of presented frames which were painted on the screen.

HTMLVideoElement.mozFrameDelay Только для чтения Check cross-browser support before using.»> Non-standard

Returns an double with the time which the last painted video frame was late by, in seconds.

HTMLVideoElement.mozHasAudio Только для чтения Non-standard

Returns 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 .
  • Предоставьте список видео в разных форматах, чтобы каждый браузер мог воспроизводить формат, который он поддерживает, используя несколько элементов.
  • Включите скрытые субтитры или субтитры на нескольких языках, используя элемент и субтитры WebVVT.
  • Сообщите браузеру, следует ли начинать загрузку видео при загрузке страницы или только тогда, когда пользователь нажимает кнопку «Воспроизвести», используя атрибут 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 года мы запустили новый регион обработки файлов

.
    2 минуты чтения

    Мы используем Gearman для обработки десятков тысяч и сотен тысяч записей в день. Это резюме работы и исследований, проделанных всеми тремя инженерами Pipe: Octavian, Remus

    .
      9 минут чтения

      Я полагаю, что мы находимся на третьей итерации нашего механизма входа с помощью Google. Я думаю, что на этот раз мы, наконец, сделали это правильно. Это началось как задача, связанная с конфиденциальностью. Мы хотели

        2 минуты чтения

        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 .
        Размер видео : Отредактируйте размер вашего видео двумя вариантами: Полная ширина или Пользовательский размер
        Показать элементы управления : Показать элементы управления видеоплеером.

        Добавить комментарий

        Ваш адрес email не будет опубликован. Обязательные поля помечены *