В статье описываются свойства 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" .