В статье описано использование 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 и определяет циклическое воспроизведение медиа файла при достижении его окончания.
К этой группе свойств 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 объекта 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 объект, который содержит доступные для данного медиа элемента текстовые треки.
Эти свойства медиа объекта доступны только для 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 страницу с Яндекс Диска.