Такие 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".