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

В статье описываются свойства media.mediaGroup и media.controller JS объекта video и audio.

 

Свойства mediaGroup и controller медиа объекта:

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

 

 

.mediaGroup

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

Свойство media.mediaGroup  JS объекта медиа элемента audio и video возвращает или устанавливает строку, определяющую имя группы, из нескольких медиа элементов, к которой данный медиа элемент принадлежит. Здесь смысл в том, что видео и аудио элементы можно объединить между собой в группу через задание для них одинакового значения свойства media.mediaGroup. Соответственно, медиа элементы, имеющее одно и тоже значение свойства media.mediaGroup, будут принадлежать одной группе, имя которой и есть значение этого свойства. Целью объединения нескольких медиа элементов в одну группу является одновременное управление ими как одним целым, т.е. переданная команда будет применена для всех аудио или видео элементов, входящих в одноименную группу. Свойство media.mediaGroup JS медиа объекта отражает значение одноименного атрибута mediagroup  HTML тега audio и video. Это значит, что значение атрибута mediagroup тега audio и video может динамически изменяться и задаваться через свойство media.mediaGroup JS медиа объекта. По умолчанию, если в теге audio и video не задан HTML атрибут mediagroup, свойство media.mediaGroup не определено, иначе, значение свойства устанавливается из одноименного HTML атрибута. Все браузеры поддерживают свойство mediaGroup JS объекта медиа элемента audio и video. Однако, я заметил такую особенность, что несмотря на то, что свойство должно соответствовать одноименному HTML атрибуту тегов аудио и видео, но на деле, свойство и атрибут ведут себя независимо друг от друга.

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

//установить значение mediaGroup свойства
//для видео элемента примера этой страницы
myVideo.mediaGroup = "myNewGroup";
//получить значение mediaGroup свойства
//для видео элемента примера этой страницы
myVideo.mediaGroup;
//абстрактный пример объединения двух видео с id
//myVideo1 и myVideo2 в медиа группу "myNewGroup"
var video1 = document.getElementById("myVideo1");
var video2 = document.getElementById("myVideo2");
video1.mediaGroup = "myNewGroup";
video2.mediaGroup = "myNewGroup";

//показать медиа группу для myVideo1 и myVideo2 элементов
alert("Video 1 media group: " + video1.mediaGroup +
    ". Video 2 media group: " + video2.mediaGroup);

 

 

.controller

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

Свойство media.controller  JS объекта медиа элемента audio и video возвращает или устанавливает MediaController  JS объект, представляющий текущий контроллер для данного аудио или видео объекта. Медиа контроллер (media controller) - это такой JS объект (экземпляр класса), который предоставляет необходимые методы, свойства и обработчики событий  для управления на web странице медиа элементом audio и video, который он представляет. Иными словами, MediaController - это удобное, объектное представление медиа элемента audio и video в соответствии с концепцией объектно ориентированного программирования (ООП). Это значит, что единожды получив в JS переменную объект MediaController, все дальнейшие манипуляции с медиа элементом можно выполнять уже с полученным MediaController объектом, а не с JS объектом медиа элемента. Однако, несмотря на хорошую идею, на практике, свойство media.controller медиа элемента audio и video не реализовано в браузерах. Наверное причиной этому является то, что JS объект медиа элемента audio и video и так, сам по себе, предоставляет весь необходимый набор свойств и методов для манипуляции, поэтому дублировать их еще и в виде MediaController объекта не имеет большого практического смысла.

MediaController object:

//создание нового медиа контроллера
controller = new MediaController();
//получение текущего медиа контроллера
media.controller [ = controller ];

//свойства объекта медиа контроллера
controller.readyState;
controller.buffered;
controller.seekable;
controller.duration;
controller.currentTime [ = value ];
controller.paused;
controller.playbackState;
controller.played;
controller.defaultPlaybackRate [ = value ];
controller.playbackRate [ = value ];
controller.volume [ = value ];
controller.muted [ = value ];

//методы объекта медиа контроллера
controller.pause();
controller.unpause();
controller.play();

 

Проверка поддержки браузером свойства media.controller:

var myVideo = document.getElementById("video-example-1");

if (myVideo.controller != undefined && myVideo.controller != null) {
        alert("Свойство media.controller поддерживается браузером.");
} else {
  alert("Свойство media.controller НЕ поддерживается браузером.");
}

 

Пример video:

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

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