Материалы для WEB разработки на LAMP
JS свойства состояния воспроизведения video и audio

JS playback state свойства медиа объекта характеризуют различные состояния медиа плеера, которые могут быть при воспроизведении им медиа файла аудио или видео. Например, текущая позиция воспроизведения, длительность медиа файла, осуществляется ли проигрывание или включена пауза, авто воспроизведение, воспроизведение по кругу и другие.

 

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

Содержание статьи

// Свойства playback state
           свойство double currentTime;
  readonly свойство unrestricted double duration;
  readonly свойство boolean paused;
           свойство double defaultPlaybackRate;
           свойство double playbackRate;
  readonly свойство TimeRanges played;
  readonly свойство TimeRanges seekable;
  readonly свойство boolean ended;
           свойство boolean autoplay;
           свойство boolean loop;

 

 

.currentTime

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

Свойство currentTime  медиа объекта video и audio устанавливает или возвращает текущую позицию времени воспроизведения медиа файла. Значение свойства имеет формат double и является числом с плавающей запятой, и представляет время в секундах, например: '60.125'. Если выполнено изменение или установка свойства currentTime в заданное новое значение, то воспроизведение медиа фала будет перенесено к этой новой временной позиции. Если медиа файл в момент изменения свойства currentTime еще не загружен и не готов (readyState является HAVE_NOTHING = 0), то значение default playback start position (по умолчанию = 0) будет установлено в заданное значение, и когда файл загрузиться, его воспроизведение начнется уже не с начала, а уже с заданной временной позиции. Все браузеры поддерживают это свойство. Использовать свойство currentTime медиа объекта очень для управления воспроизведением медиа файла video или audio и перемещения по нему. Например, можно создать временные закладки для медиа файла видео или аудио в виде ссылок и навесить на них JS изменение свойства currentTime, получив, таким образом, навигацию по медиа файлу.

Пример использования свойства media.currentTime

//задать текущую позицию воспроизведения
//вперед на 10 секунд
myVideo.currentTime += 10;
//назад на 10 секунд
myVideo.currentTime -= 10;
//к 60 секунде файла
myVideo.currentTime = 60;

//показать значение свойства currentTime
alert(myVideo.currentTime);

 

 

.duration

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

Свойство duration  медиа элемента audio и video возвращает общую длительность медиа файла в секундах (in seconds). Если медиа файл не доступен, то свойство duration возвращает NaN (Not-a-Number) значение. Если медиа файл не может быть ограничен по длительности (например, потоковое audio или video с не объявленным конечным временем), то свойство duration возвращает положительное значение бесконечности. Браузер устанавливает свойство duration прежде чем начать воспроизведение медиа файла или его части и прежде чем установить свойство readyState = 1 (HAVE_METADATA) или в большее значение, даже если это требует извлечения данных из нескольких частей меда файла. Свойство duration элемента audio и video поддерживается всеми браузерами.

Пример использования свойства media.duration

//показать значение свойства duration
alert(myVideo.duration + " seconds");

 

 

.paused

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

Свойство paused  медиа элемента audio и video возвращает true если воспроизведение медиа файла было остановлено, в противном случае возвращает false. Использование свойства позволяет проверить было ли аудио или видео остановлено (поставлено на паузу). Если paused = true, то это значит, что медиа файл не воспроизводиться в данный момент, если paused = false, то это значит, что медиа файл в текущий момент проигрывается. Изначально, свойство paused устанавливается браузером как true. Свойство paused медиа элемента audio и video поддерживается всеми браузерами.

Пример использования свойства media.paused

//показать значение свойства paused
alert(myVideo.paused);

 

 

.defaultPlaybackRate  и  .playbackRate

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

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

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

Свойства defaultPlaybackRate и playbackRate могут иметь отличные друг от друга значения, что позволяет понять прокручивает ли пользователь медиа файл, в какую сторону и с какой скоростью. Формат значения свойств defaultPlaybackRate и playbackRate - число с плавающей точкой, которое, по своей сути, является множителем для скорости воспроизведения медиа файла. Значение по умолчанию для свойств defaultPlaybackRate и playbackRate установлено как 1.0, что соответствует нормальной скорости воспроизведения.

Примеры значений для свойств defaultPlaybackRate и playbackRate:

  •  1.0 - нормальная скорость;
  •  0.5 - замедленная, половина от нормальной;
  •  2.0 - в два раза быстрее от нормальной;
  • -1.0 - воспроизведение назад с нормальной скоростью;
  • -0.5 - замедленное воспроизведение назад, половина от нормальной скорости.

Пример использования свойства media.playbackRate

//увеличить текущую скорость воспроизведения
myVideo.playbackRate += 0.1;

//уменьшить текущую скорость воспроизведения
myVideo.playbackRate -= 0.1;

//задать текущую скорость воспроизведения
myVideo.playbackRate = 1.0;

//показать текущую скорость воспроизведения
alert(myVideo.playbackRate);

 

 

.played

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

Свойство played  медиа элемента audio и video доступно только для чтения и возвращает TimeRanges  JS объект, который представляет и содержит временные диапазоны воспроизведенных пользователем частей медиа audio или video файла. Метки start и end в этих диапазонах являются временем от начала медиа файла на временной шкале, которая покрывает объект. Если пользователь воспроизводил медиа файл несколько раз и каждое воспроизведение выполнялось с новой стартовой позиции, то TimeRanges объект будет содержать несколько временных диапазонов, каждый из которых будет соответствовать своему случаю воспроизведения. При этом, если при воспроизведении видео или аудио будет поставлено на паузу, а потом проигрывание продолжиться с этого же места, то случай воспроизведения будет один, т.е. такая ситуация соответствует одному временному интервалу. Однако если пользователь будет воспроизводить файл каждый раз меняя стартовую позицию начала воспроизведения, то каждый такой случай будет считаться самостоятельным временным интервалом. Таким образом, свойство played позволяет узнать воспроизведенные пользователем временные отрезки медиа файла audio или video, которые он выбрал на временной шкале плеера и проиграл. Свойство played поддерживается всеми браузерами.

Свойства и методы TimeRanges объекта применительно к свойству played:

media.played.length;
  • length свойство TimeRanges объекта - readonly, значение unsigned long, вернет количество воспроизведенных пользователем временных диапазонов для audio/video файла, которые содержаться в TimeRanges объекте;
time = media.played.start(index);
  • start() метод TimeRanges объекта вернет значение double in seconds - стартовую позицию в секундах для временного диапазона, как время от начала медиа файла на временной шкале плеера, соответствующее заданному индексу временного диапазона в TimeRanges объекте или IndexSizeError в случае ошибки, когда в TimeRanges объекте нет временных диапазонов;
time = media.played.end(index);
  • end() метод TimeRanges объекта вернет, значение double in seconds - конечную позицию в секундах для временного диапазона, как время от начала медиа файла на временной шкале плеера, соответствующее заданному индексу временного диапазона в TimeRanges объекте или IndexSizeError в случае ошибки, когда в TimeRanges объекте нет временных диапазонов.

Замечание: Index начинается с 0 для временных диапазонов в TimeRanges объекте. Учитывая то, что если в TimeRanges не будет содержится временных диапазонов, то для его методов start() и end() будет возвращена ошибка IndexSizeError, поэтому, для предупреждения такой ситуации целесообразно перед использованием этих методов проверить через played.length количество имеющихся в TimeRanges объекте временных диапазонов.

Пример использования свойства media.played

//количество воспроизведенных диапазонов
myVideo.played.length;

//Время старта первого временного диапазона
//от начала медиа файла в секундах
myVideo.played.start(0);

//Время окончания первого временного диапазона
//от начала медиа файла в секундах
myVideo.played.end(0);

//Показать некоторую информацию о TimeRanges объекте
if(myVideo.played.length > 0) {
  alert("Length: " + myVideo.played.length +
  " | Start for 0 index: " +
      myVideo.played.start(0)
      + " | End for 0 index: " +
      myVideo.played.end(0)
    );
} else {
  alert("No played part of video")
};

 

 

.seekable

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

Свойство seekable  медиа элемента audio и video доступно только для чтения и возвращает TimeRanges  JS объект, который представляет и содержит временные диапазоны медиа audio или video файла, в пределах которых пользователю доступно воспроизведение файла и изменение позиции воспроизведения. Каждый такой временной диапазон (seekable time-range) указывает время начала и окончания части медиа аудио или видео файла, которая доступна пользователю для проигрывания и перемещения позиции воспроизведения по ней. Иными словами, пользователь, в пределах этого диапазона, может свободно перемещать курсор воспроизведения и устанавливать его любое место в пределах этого диапазона и воспроизводить медиа файл с выбранной позиции. Время начала и окончания для временных диапазонов задается как число секунд от начала audio или video файла. Если браузеру пользователя доступна любая точка медиа файла, например, когда это простой audio или video файл и браузер и сервер поддерживают HTTP Range requests, то свойство media.seekable будет возвращать объект содержащий всего один временной диапазон, начало которого будет установлено как время первого кадра (как правило = 0), и конец которого будет как время первого кадра плюс значение свойства media.duration (длительности), которое будет равно времени последнего кадра медиа файла или может быть положительной бесконечностью, если его невозможно определить, например, для потокового медиа файла. Также, значение временных диапазонов TimeRanges объекта, возвращенного свойством media.seekable может постоянно меняться если браузер выполняет буферизацию потокового медиа файла не имеющего конца. Таким образом, свойство media.seekable возвращает TimeRanges объект с временными диапазонами медиа файла, в пределах которых пользователь реально сможет проиграть аудио или видео файл. Этот аспект может быть очень полезным при использовании потокового мультимедиа и при нелинейном воспроизведении файла, т.к. файл может воспроизводиться не полностью, а лишь реально доступными для воспроизведения частями. Свойство media.seekable поддерживается всеми браузерами.

Свойства и методы TimeRanges объекта применительно к свойству seekable:

//readonly, unsigned long
media.seekable.length;
  • length свойство TimeRanges объекта, полученного как значение свойства media.seekable, вернет количество временных диапазонов audio или video файла в пределах которых пользователю доступно воспроизведение и перемещение по файлу;
//double in seconds от начала файла
startTime = media.seekable.start(index);
  • метод start() JS объекта TimeRanges вернет стартовую позицию в секундах для временного диапазона соответствующего индекса, как время от начала медиа файла на временной шкале плеера, или IndexSizeError в случае отсутствия такого индекса в TimeRanges объекте;
//double in seconds от начала файла
endTime = media.seekable.end(index);
  • метод end() JS объекта TimeRanges вернет конечную позицию в секундах для временного диапазона соответствующего индекса, как время от начала медиа файла на временной шкале плеера, или IndexSizeError в случае отсутствия такого индекса в TimeRanges объекте.

Замечание: Для временных диапазонов в TimeRanges объекте значения Index начинается с 0. Если указанный индекс будет отсутствовать в TimeRanges объекте, то возникнет ошибка IndexSizeError.

Пример использования свойства media.seekable

//количество доступных для воспроизведения
//временных диапазонов медиа файла
myVideo.seekable.length;

//Время старта первого временного диапазона
//от начала медиа файла в секундах
myVideo.seekable.start(0);

//Время окончания первого временного диапазона
//от начала медиа файла в секундах
myVideo.seekable.end(0);

//Показать некоторую информацию о TimeRanges объекте
if(myVideo.seekable.length > 0) {
  alert("Length: "
      + myVideo.seekable.length +
      " | Start for 0 index: " +
      myVideo.seekable.start(0)
      + " | End for 0 index: " +
      myVideo.seekable.end(0)
    );
} else {
  alert("No seekable part of video")
};

 

 

.ended

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

Свойство ended  медиа элемента audio и video доступно только для чтения и возвращает true если в процессе проигрывания медиа файла в прямом направлении (воспроизведение вперед) курсор позиции воспроизведения достиг окончания медиа файла на временной шкале плеера, в противном случае свойство ended возвращает false. Иными словами, свойство ended позволяет определить, достиг ли курсор позиции воспроизведения, в процессе проигрывании медиа файла вперед, конца временной шкалы плеера или нет. При этом медиа файл не обязательно мог быть воспроизведен полностью. Например, пользователь мог перемешать курсор воспроизведения по временной шкале и проиграть только конечную часть медиа файла. В любом случае, когда курсор позиции воспроизведения достигает, именно в процессе прямого проигрывания, конца audio или video файла на временной шкале плеера, браузер устанавливает свойство ended как true. Если, после этого, сдвинуть курсор воспроизведения в сторону начала файла на любое значение, то свойство ended будет переустановлено браузером в значение false. Если курсор позиции воспроизведения будет поставлен в конец временной шкалы плеера пользователем, но при этом не будет выполнено прямое воспроизведение файла, то свойство ended не измениться и будет как false. Т.е. не достаточно просто поставить курсор в конец шкалы, должно быть именно воспроизведение, и именно прямого направления. Свойство ended медиа элемента audio и video поддерживается всеми браузерами.

Пример использования свойства media.ended

//показать значение свойства ended
alert(myVideo.ended);

 

 

.autoplay

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

Свойство autoplay  медиа элементов video и audio устанавливает или возвращает флаг true|false, который определяет старт воспроизведения audio/video файла сразу после его загрузки. Если свойство autoplay содержит значение true, то медиа файл аудио или видео начнет воспроизводиться сразу после его загрузки. Если autoplay = false, то автоматический старт проигрывания медиа файла после его загрузки не будет выполняться. По умолчанию значение свойства autoplay для медиа элемента установлено как false. Свойство autoplay отражает значение одноименного атрибута "autoplay"  HTML элементов video и audio. Свойство autoplay медиа элемента, если установлено в true, то переопределяет свойство media.preload, которое в этом случае игнорируется, так как медиа файл должен быть загружен и воспроизведен. Свойство autoplay поддерживается всеми браузерами.

Пример использования свойства media.autoplay

//Установить автовоспроизведение медиа файла
myVideo.autoplay = true;

//показать значение свойства autoplay
alert(myVideo.autoplay);

 

 

.loop

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

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

Пример использования свойства media.loop

//установить воспроизведение по кругу
myVideo.loop = true;

//показать значение свойства loop
alert(myVideo.loop);

 

 

Пример video для демонстрации свойств в консоли:

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

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