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

Такие JS свойства медиа объекта как width, height, videoWidth, videoHeight и poster доступных только для видео элемента и позволяют устанавливать размер области воспроизведения видео контента и рисунок заставку для видео.

 

Свойства только для Video:

// JS свойства, применимые только для video объекта 
           свойство unsigned long width;
           свойство unsigned long height;
  readonly свойство unsigned long videoWidth;
  readonly свойство unsigned long videoHeight;
           свойство DOMString poster;

 

 

.width и .height

//unsigned long, чтение, изменение, default = 0
video.width [ = число unsigned long в px CSS]
video.height [ = число unsigned long в px CSS]

Свойства video.width и video.height присутствуют из медиа элементов только у видео элемента и доступны для чтения и изменения. Эти свойства аналогичны таковым у других элементов(img, iframe, embed, object, video) и задают, для случая с видео, размер области воспроизведения видео контента в пикселях CSS. Значения этих свойств доступны для изменения и не влияют на истинные внутренние размеры самого видео, т.к. определяют лишь размер области показа. Если установленные значения свойств width и height будут иметь не совпадающее соотношение сторон с оригинальным соотношением сторон видео, то, при воспроизведении, видео подстроится под размер заданной области воспроизведения, но с сохранением своих начальных пропорций. Поэтому, в таких случаях могут появиться полосы по бокам или сверху и снизу от видео. Свойства width и height JS объекта video соответствуют одноименным HTML атрибутам width и height  тега <video>, которые они представляют. Свойства width и height JS видео объекта поддерживается всеми браузерами.

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

//получить значение ширины области воспроизведения в px
myVideo.width;
//установить ширину области воспроизведения в px
myVideo.width = 320;

//получить значение высоты области воспроизведения в px
myVideo.height;
//установить высоту области воспроизведения в px
myVideo.height = 240;

 

 

.videoWidth и .videoWidth

//unsigned long, только чтение, default = 0
video.videoWidth
video.videoHeight

Свойства video.videoWidth и video.videoHeight присутствуют только для видео элемента и доступны только для чтения. Эти свойства устанавливаются при инициализации или перезагрузке видео элемента на WEB странице и представляют действительные внутренние размеры видео из файла медиа ресурса, выраженные в пикселях CSS. Если видео файл отсутствует (video.readyState равно HAVE_NOTHING), то значения свойств устанавливаются как 0 ноль. При обновлении и установке этих свойств возникает событие resize  для видео элемента. Свойства videoWidth и videoHeight JS видео объекта поддерживается всеми браузерами.

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

//получить внутреннюю ширину видео в px
myVideo.videoWidth;

//получить внутреннюю высоту видео в px
myVideo.videoHeight;

 

 

.poster

//string, чтение, изменение
video.poster [ = "URL String" ]

Свойство video.poster JS объекта медиа элемента video присутствует только для видео элемента и возвращает или устанавливает строку, определяющую URL путь к файлу изображения, которое будет показано пока видео не доступно или еще не начиналось воспроизводиться. Свойство video.poster JS объекта видео элемента представляет и отражает значение одноименного HTML атрибута poster  тега <video>. Значение по умолчанию для свойства video.poster JS видео объекта, при его инициализации, будет соответствовать первичному значению HTML атрибута poster тега video, или пустой строке, если HTML атрибут poster отсутствует в теге video. Если свойство video.poster не задано (равно пустой строке), то плеер браузера будет пытаться показать первый кадр видео. При задании свойства video.poster JS медиа элемента video, URL путь к файлу изображения можно указать как полный URL вида: http://www.example.com/..., так и как относительный к текущему домену web страницы. При получении же значения свойства video.poster JS видео объекта, всегда будет возвращаться полный URL, как путь к файлу изображения, включая протокол (http:|https:) и домен. Свойство video.poster JS видео объекта поддерживается всеми браузерами.

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

//получить значение poster URL
myVideo.poster;
//установить значение poster URL
myVideo.poster = "http://www.example.com/...png";

 

Демонстрацию получения и изменения значений описанных здесь свойств видео элемента можно посмотреть и попробовать на странице: "Демонстрация JS управления HTML5 video и audio" , где представлены кнопки изменения этих свойств или в консоли браузера на примере видео представленного ниже.

Пример video:

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