Java Script управление HTML5 video и audio, примеры, шаблоны

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

Автор
Андрей Болдырев

Андрей Болдырев

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

В статье описано использование Java Script для управления и манипуляции HTML5 video и audio объектами, приведены примеры и шаблоны кода. Пост является центральной статьей по теме JS управления медийным элементом аудио и видео на web странице и, схематично, в виде краткого оглавления с ссылками на детализирующие посты, представляет интерфейс HTML5 медиа элемента и реализуемые для него JS методы и свойства. Элементы HTML5 audio и video представляют собой управляемые сценариями объекты DOM, которые имеют методы, свойства и события, что предоставляет расширенные возможности гибкого управления HTML5 плеером при помощи JavaScript. Пока еще не все методы, свойства и события, описанные в спецификации HTML5 для медиа элементов, реализуются в полной мере браузерами, но, уже имеющиеся, позволяют удовлетворить большинство потребностей по управлению воспроизведением медиа файлов на web странице.

Спецификация HTML Media Elements audio и video:

см. interface HTMLMediaElement

см. Демонстрация JS управления HTML5 video и audio" 

  // Статусы ошибки
  readonly свойство MediaError error;

  // Статусы сетевого состояния
           свойство DOMString src;
  readonly свойство DOMString currentSrc;
           свойство DOMString crossOrigin;
  const unsigned short NETWORK_EMPTY = 0;
  const unsigned short NETWORK_IDLE = 1;
  const unsigned short NETWORK_LOADING = 2;
  const unsigned short NETWORK_NO_SOURCE = 3;
  readonly свойство unsigned short networkState;
           свойство DOMString preload;
  readonly свойство TimeRanges buffered;
  void load();
  string canPlayType(DOMString type);

  // Статусы готовности для воспроизведения
  const unsigned short HAVE_NOTHING = 0;
  const unsigned short HAVE_METADATA = 1;
  const unsigned short HAVE_CURRENT_DATA = 2;
  const unsigned short HAVE_FUTURE_DATA = 3;
  const unsigned short HAVE_ENOUGH_DATA = 4;
  readonly свойство unsigned short readyState;
  readonly свойство boolean seeking;

  // Статусы воспроизведения
           свойство double currentTime;
  readonly свойство unrestricted double duration;
  Date getStartDate();
  readonly свойство boolean paused;
           свойство double defaultPlaybackRate;
           свойство double playbackRate;
  readonly свойство TimeRanges played;
  readonly свойство TimeRanges seekable;
  readonly свойство boolean ended;
           свойство boolean autoplay;
           свойство boolean loop;
  void play();
  void pause();

  // media controller
           свойство DOMString mediaGroup;
           свойство MediaController controller;

  // Контроль, управление
           свойство boolean controls;
           свойство double volume;
           свойство boolean muted;
           свойство boolean defaultMuted;

  // Треки
  readonly свойство AudioTrackList audioTracks;
  readonly свойство VideoTrackList videoTracks;
  readonly свойство TextTrackList textTracks;
  TextTrack addTextTrack(TextTrackKind kind,
            optional DOMString label = "",
            optional DOMString language = "");

  // Свойства только Video элемента
           свойство unsigned long width;
           свойство unsigned long height;
  readonly свойство unsigned long videoWidth;
  readonly свойство unsigned long videoHeight;
           свойство DOMString poster;

Свойства медиа элемента: src, crossorigin, preload, autoplay, mediagroup, loop, muted и controls, применимы для всех медиа элементов audio и video.

 

 

 

Методы JS, применимые к HTML элементам Audio и Video:

Ниже приведены методы JS и примеры для них, позволяющие манипулировать HTML медиа элементами аудио и видо на веб странице при помощи Java Script. Здесь, в листингах кода, будет писаться применение методов JS к переменной с именем myVideo, подразумевая, что в этой переменной содержится JS объект video примера.

 

.load()

myVideo.load (); //void

Метод load(), примененный к медийному элементу audio или video на странице, вызывает перезагрузку и обновление этого HTML5 элемента на web странице. Метод используют для применения сделанных HTML изменений медиа элемента аудио или видео. Например, это может быть изменение источника (src) медиа файла. У метода нет входных параметров и возвращаемого значения.

 

.canPlayType()

var isSupp = myVideo.canPlayType ( "mediaType" ); //string

Метод canPlayType() позволяет проверить поддерживает ли браузер указанный тип медиа файла (MIME type) или нет. Метод ожидает в качестве параметра строку как MIME тип медиа файла, который может опционально содержать и кодек медиа файла. Метод возвращает значения: "probably" - скорее всего поддерживает, "maybe" - вероятно поддерживает, или "" пустую строку, когда браузер не поддерживает этот тип медиа файла.

 

.play()

myVideo.play (); //void

Метод play(), примененный к элементу audio или video на web странице запускает воспроизведение медиа файла. Метод не имеет входных параметров и возвращаемого значения.

 

.pause()

myVideo.pause (); //void

Метод pause(), примененный к элементу audio или video на web странице останавливает воспроизведение медиа файла. Метод не имеет входных параметров и возвращаемого значения.

 

.addTextTrack()

 

//new TextTrack object
var track1 = myVideo.addTextTrack ( kind [, label [, language ] ] );

Метод addTextTrack() позволяет добавить в лист текстовых треков HTML5 медиа элемента video или audio новую текстовую дорожку и возврашает созданный новый TextTrack объект, который предоставляет возможность JS управления текстовым треком через доступные для него методы и свойства созданного TextTrack объекта.

 

 

 

Свойства JS объекта медиа элементов Audio и Video:

Свойства состояния ошибки для медиа объекта

.error

//MediaError object, только чтение
media.error

Свойство error медиа элемента audio и video возвращает MediaError  объект, содержащий статус последней возникшей ошибки.

 

 

Свойства сетевого состояния для медиа объекта 

.src

//string, чтение и изменение
media.src [ = "URL String" ]

Свойство src медиа элемента audio и video определяет URL адрес пути к медиа файлу и отражает значение одноименного атрибута src  HTML тега <audio> и <video>.

.currentSrc

//string, только чтение
media.currentSrc

Свойство currentSrc медиа элемента audio и video возвращает строку, содержащую текущий абсолютный URL адрес пути к медиа файлу источнику, включая протокол (http:|https:) и домен.

.crossOrigin

//string, чтение и изменение, default = NULL
media.crossOrigin [ = "anonymous|use-credentials" ]

Свойство crossOrigin медиа элемента audio и video возвращает или устанавливает строковое значение, которое указывает браузеру на необходимость выполнения CORS (Cross-origin resource sharing)  запроса для данного элемента. Свойство crossOrigin отражает значение одноименного атрибута crossorigin  HTML тега <audio> и <video>.

.networkState

//unsigned short, только чтение
media.networkState

Свойство networkState медиа элемента audio и video возвращает текущий статус сетевой активности для медиа элемента в формате числа, которому соответствуют константы.

.preload

//string, чтение и изменение, default = "none|empty string"
media.preload [ = "auto|metadata|none" ]

Свойство preload медиа элемента audio и video определяет, как должен браузер загружать медиа файл при загрузке web страницы и отражает значение одноименного атрибута preload  HTML тега <audio> и <video>.

.buffered

//TimeRanges object, только чтение
media.buffered

Свойство buffered медиа элемента audio и video возвращает TimeRanges  объект, который содержит метки частей медиа файла, уже загруженные и помещенные в буфер браузера.

 

 

Свойства состояния готовности для воспроизведения медиа объекта 

JS свойства readyState и seeking медиа элемента video и audio характеризуют готовность медиа плеера к воспроизведению файла аудио или видео.

 

.readyState

//unsigned short, только чтение
media.readyState

Свойство readyState медиа элемента audio и video доступно только для чтения и возвращает статус готовности медиа элемента для воспроизведения файла аудио или видео.

 

.seeking

//boolean, только чтение
media.seeking

Свойство seeking медиа элемента audio и video доступно только для чтения и возвращает значение true только если в текущий момент пользователь выполняет поиск по медиа файлу, иначе false.

 

 

Свойства состояния воспроизведения медиа объекта

Эти свойства характеризуют различные состояния медиа объекта при воспроизведении.

 

.currentTime

//double, чтение и изменение, default = 0
media.currentTime [ = time in seconds ]

Свойство currentTime медиа объекта video и audio устанавливает или возвращает текущую позицию времени воспроизведения медиа файла.

 

.duration

//double, только чтение
media.duration

Свойство duration медиа элемента audio и video возвращает общую длительность медиа файла в секундах.

 

.paused

//boolean, только чтение
media.paused

Свойство paused медиа элемента audio и video возвращает true если медиа файл не воспроизводиться, иначе возвращает false.

 

.defaultPlaybackRate   и  .playbackRate

//double, чтение и изменение, default = 1.0
media.defaultPlaybackRate [ = скорость воспроизведения ]
media.playbackRate [ = скорость воспроизведения ]

Свойства медиа элемента audio и video: defaultPlaybackRate - устанавливает или возвращает скорость по умолчанию для воспроизведения медиа файла; playbackRate - устанавливает или возвращает текущую скорость воспроизведения для медиа файла.

 

.played

//TimeRanges object, только чтение
media.played

Свойство played медиа элемента audio и video возвращает TimeRanges JS объект, который содержит временные диапазоны воспроизведенных пользователем частей медиа файла.

 

.seekable

//TimeRanges object, только чтение
media.seekable

Свойство seekable медиа элемента audio и video возвращает TimeRanges JS объект, который содержит временные диапазоны медиа файла, в пределах которых пользователю доступно воспроизведение.

 

.ended

//boolean, только чтение
media.ended

Свойство ended медиа элемента audio и video возвращает true|false и указывает, достиг ли курсор позиции воспроизведения окончания медиа файла или нет.

 

.autoplay

//boolean, чтение и изменение, default = false
media.autoplay [ = true|false ]

Свойство autoplay медиа элементов video и audio устанавливает или возвращает значение true|false и управляет автоматическим стартом воспроизведения медиа файла после его загрузки.

 

.loop

//boolean, чтение и изменение, default = false
media.loop [ = true|false ]

Свойство loop медиа элемента audio и video устанавливает или возвращает значение true|false и определяет циклическое воспроизведение медиа файла при достижении его окончания.

 

 

Медиа контроллер video и audio

К этой группе свойств JS объекта video и audio относятся два свойства: media.mediaGroup и media.controller.

 

.mediaGroup

//string, чтение и изменение
media.mediaGroup [ = "myMediaGroupName" ]

Свойство media.mediaGroup JS объекта медиа элемента audio и video определяет имя группы, из нескольких медиа элементов, к которой данный медиа элемент принадлежит.

 

.controller

//MediaController object, чтение и изменение
media.controller [ = MediaController object ]

Свойство media.controller JS объекта медиа элемента audio и video определяет MediaController JS объект, представляющий текущий контроллер для данного аудио или видео объекта.

 

 

Свойства управления медиа объекта

Эти свойства определяют различные параметры воспроизведения медиа файла.

 

.controls

//boolean, чтение и изменение, default = false
media.controls [ = true|false ]

Свойство controls медиа элемента audio и video управляет отображением панели управления в медиа плеере.

 

.volume

//double, чтение, изменение, default = 1.0
media.volume [ = число от 0.0 до 1.0 ]

Свойство volume медиа элемента audio и video задает текущее значение громкости звука при воспроизведении медиа файла.

 

.muted

//boolean, чтение, изменение, default = false
media.muted [ = true|false ]

Свойство muted медиа элемента audio и video управляет отключением звука при воспроизведении медиа файла.

 

.defaultMuted

//boolean, чтение, изменение, default = false
media.defaultMuted [ = true|false ]

Свойство defaultMuted медиа элемента audio и video управляет отключением звука при инициализации медиа элемента.

 

 

Tracks JS свойства медиа элемента

К Tracks свойствам JS объекта audio и video принадлежат следующие: audioTracks, videoTracks, textTracks. Эти свойства доступны только для чтения и возвращают соответствующий им TrackList JS объект.

 

.audioTracks

//AudioTrackList object, только чтение
media.audioTracks

Свойство audioTracks возвращает AudioTrackList JS объект, который содержит доступные для медиа элемента audio треки - audio файлы.

 

.videoTracks

//VideoTrackList object, только чтение
media.videoTracks

Свойство videoTracks возвращает VideoTrackList JS объект, который содержит доступные для медиа элемента video треки - video файлы.

 

.textTracks

//TextTrackList object, только чтение
media.textTracks

Свойство textTracks медиа элементов video и audio возвращает TextTrackList JS объект, который содержит доступные для данного медиа элемента текстовые треки.

 

 

JS свойства только video объекта 

Эти свойства медиа объекта доступны только для video элемента и позволяют устанавливать размер области воспроизведения видео контента и рисунок заставку.

 

.width и .height

//unsigned long, чтение, изменение, default = 0
video.width [ = число unsigned long в px CSS]
video.height [ = число unsigned long в px CSS]

Свойства video.width и video.height присутствуют только у видео элемента и определяют размер области воспроизведения видео контента в пикселях CSS.

 

.videoWidth и .videoWidth

//unsigned long, только чтение, default = 0
video.videoWidth
video.videoHeight

Свойства video.videoWidth и video.videoHeight присутствуют только для видео элемента и представляют внутренние размеры видео из файла медиа ресурса в пикселях CSS.

 

.poster

 

//string, чтение, изменение
video.poster [ = "URL String" ]

Свойство video.poster JS объекта медиа элемента video присутствует только для видео элемента и определяет URL путь к файлу изображения, которое будет показано пока видео не доступно или еще не начиналось воспроизводиться.

 

Пример video:

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

Для работы в консоли с примером видео на этой странице при демонстрации JS использовано присвоение объекта видео в переменную JS с именем "myVideo".

//присвоение объекта примера видео этой страницы в переменную JS
var myVideo = document.getElementById("video-example-1");

Поэтому для экспериментов в консоли вы можете использовать эту переменную.

Например: myVideo.play(); - запустит воспроизведение примера видо на этой странице.

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