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

Группа JS свойств controls медиа объекта video и audio позволяет выполнять управление медиа объектом через установку таких состояний для аудио и видео как: громкость звука, полное отключение звука, показ или скрытие панели управления медиа плеером.

 

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

Содержание:

свойство boolean controls;
свойство double volume;
свойство boolean muted;
свойство boolean defaultMuted;

 

 

.controls

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

Свойство controls  медиа элемента audio и video устанавливает или возвращает значения true или false. Свойство controls JS медиа объекта отражает значение одноименного атрибута controls  HTML элемента audio и video. Если свойство controls задано как true, то медиа плеер будет отображать панель управления медиа элементом. Если свойство controls задано как false, то панель управления у медиа плеера будет скрыта. Иначе сказать, свойство controls JS объекта audio или video указывает браузеру должен ли он отображать или скрывать панель управления медиа плеером.

Стандартная панель управления медиа плеера браузера, обычно, содержит такие элементы управления как:

  • Play - воспроизведение;
  • Pause - пауза;
  • Seeking - ползунок прокрутки виде на шкале;
  • Volume - громкость;
  • Fullscreen - развернуть на полный экран;
  • Captions/Subtitles - выбор файла заголовков/субтитров, если доступны;
  • Track - выбор медиа файла, если доступно.

Значение по умолчанию для свойства controls устанавливается как false. Свойство controls поддерживается всеми браузерами.

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

//включить показ панели управления
myVideo.controls = true;
//выключить показ панель управления
myVideo.controls = false;

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

 

 

.volume

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

Свойство volume  медиа элемента audio и video устанавливает или возвращает текущее значение громкости звука при воспроизведении медиа файла. Значение является числом (double) в диапазоне от 0.0 до 1.0, где 0.0 соответствует самому тихому состоянию звука, что равносильно выключенному звуку, а 1.0 самому громкому состоянию звука. Свойство volume аудио и видео доступно как для чтения так и для изменения, что позволяет динамически изменять громкость воспроизведения медиа файла при помощи JS кода. Если при задании нового значения для свойства volume медиа элемента audio и video будет попытка установить значение, находящееся вне диапазона 0.0-1.0, то будет выдана ошибка и исключение IndexSizeError, поэтому целесообразно сделать проверку значения свойства volume перед его изменением. Значение по умолчанию для свойства volume медиа элемента audio и video задается как 1.0, однако браузеры могут пере устанавливать значение этого свойства из своей сессии, где они сохраняют последнее, выбранное пользователем, значение уровня громкости для медиа плеера. Свойство volume медиа элемента audio и video поддерживается всеми браузерами.

Примеры значений свойство volume медиа элемента audio и video:

  • 1.0 максимальная громкость (100%), значение по умолчанию;
  • 0.5 половинная громкость (50%);
  • 0.0 минимальная громкость (0%), т.е. выключенный звук.

Также, нужно помнить, что если свойство media.muted медиа элемента будет задано как true, то значение свойства media.volume будет игнорироваться и звук будет полностью выключен в медиа плеере.

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

//установка максимальной громкости (100%)
myVideo.volume = 1.0;

//установка половинной громкости (50%)
myVideo.volume = 0.5;

//установка минимальной громкости (0%),
//равно выключению звука
myVideo.volume = 0.0;

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

 

 

.muted

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

Свойство muted  медиа элемента audio и video устанавливает или возвращает значения true или false и определяет текущее состояние звука, т.е. должен ли быть включен звук или нет при воспроизведении медиа файла в плеере в текущий момент. Это свойство предназначено для пользовательских манипуляций текущим состоянием звука при воспроизведении медиа файла. Не путать со свойством media.defaultMuted, которое задает состояние звука по умолчанию при загрузке web страницы и инициализации медиа элемента. Если свойство muted для аудио или видео задано пользователем как true, то звук будет выключен в плеере, и медиа файл будет воспроизводиться без звука, и наоборот, если свойство muted заданно как false, то звук будет включен. Если свойство muted будет задано как true, то свойство media.volume медиа элемента, задающее уровень громкости звука, будет игнорироваться, и звук при воспроизведении медиа файла будет выключен. При инициализации, свойство muted устанавливается по умолчанию как false, что означает включенный звук при воспроизведении медиа файла. Однако, браузеры могут запоминать предыдущее состояние свойства muted и пере устанавливать значение этого свойства в последнее, сохраненное в их сессии, состояние. Если HTML элемент audio или video имеет атрибут muted (или muted="true"), то браузер, при загрузке web страницы и инициализации медиа элемента, установит свойство media.muted как true, вне зависимости от последнего сохраненного в его сессии пользовательского значения. Свойство muted медиа элемента audio и video поддерживается всеми браузерами.

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

//отключить звук
myVideo.muted = true;

//включить звук
myVideo.muted = false;

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

 

 

.defaultMuted

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

Свойство defaultMuted  медиа элемента audio и video устанавливает или возвращает значения true или false и определяет состояние звука по умолчанию при загрузке web страницы и инициализации медиа элемента. Значение true свойства defaultMuted определяет выключенное состояние звука по умолчанию для медиа элемента при его загрузке, а значение false свойства defaultMuted задает включенное состояние для звука. Свойство defaultMuted доступно как для чтения, так и для изменения, однако нужно помнить, что это свойство определяет только состояние звука по умолчанию для загружаемого медиа элемента и динамическое изменение значения этого свойства не имеет эффекта. Для изменения текущего состояния звука уже загруженного медиа элемента нужно использовать свойство media.muted медиа элемента, которое управляет именно текущим состоянием звука. Свойство defaultMuted JS медиа объекта отражает значение атрибута muted HTML элемента audio и video. Это значит, что если HTML элемент audio или video имеет атрибут muted (или muted="true"), то браузером при загрузке web страницы и инициализации медиа элемента свойства media.defaultMuted и media.muted будут всегда установлены как true, что будет соответствовать выключенному звуку в медиа плеере. Однако, если HTML элемент audio или video не имеет атрибут muted, то браузер при загрузке web страницы и инициализации медиа элемента установит свойство media.defaultMuted как false, что будет соответствовать включенному состоянию звука в медиа плеере. Свойство же media.muted будет установлено как false, если оно не было ранее определено пользователем и сохранено браузером в сессии, иначе, браузер установит последнее пользовательское значение из своей сессии. Значение по умолчанию для свойства defaultMuted задано как false, что означает включенное состояние звука для медиа элемента. Свойство defaultMuted медиа элемента audio и video поддерживается всеми браузерами.

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

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

 

 

 

Пример video:

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

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