HTML5 видео размеры

Question

Я пытаюсь получить размеры видео, которое я накладываю на страницу с помощью JavaScript, однако оно возвращает размеры изображения плаката, а не фактическое видео, поскольку кажется, что оно рассчитывается до видео загружен.

Answer 1

Следует отметить, что принятое в настоящее время решение Sime Vidas, описанное выше, на самом деле не работает в современных браузерах, поскольку свойства videoWidth и videoHeight не устанавливаются до тех пор, пока не сработало событие «loadedmetadata ».

Если вы случайно запросили эти свойства после визуализации элемента VIDEO, он может иногда работать, но в большинстве случаев он возвращает значения 0 для обоих свойств.

Чтобы гарантировать, что вы получите правильныйЗначения свойств, которые вам нужно сделать что-то вроде:

var v = document.getElementById("myVideo");
v.addEventListener( "loadedmetadata", function (e) {
    var width = this.videoWidth,
        height = this.videoHeight;
}, false );

ПРИМЕЧАНИЕ. Я не удосужился учесть версии Internet Explorer до 9, которые используют attachEvent вместо addEventListener, так как версии до 9 этогоВ любом случае, браузер не поддерживает видео HTML5.

Answer 2

<video id="foo" src="foo.mp4"></video>

var vid = document.getElementById("foo");
vid.videoHeight; // returns the intrinsic height of the video
vid.videoWidth; // returns the intrinsic width of the video

Спецификация: https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element

Answer 3

Готовая к использованию функция

Вот готовая к использованию функция, которая асинхронно возвращает размеры видео, без каких-либо изменений в документе .

// ---- Definitions ----- //

/**
 Returns the dimensions of a video asynchrounsly.
 @param {String} url Url of the video to get dimensions from.
 @return {Promise} Promise which returns the dimensions of the video in 'width' and 'height' properties.
 */
function getVideoDimensionsOf(url){
	return new Promise(function(resolve){
		// create the video element
		let video = document.createElement('video');

		// place a listener on it
		video.addEventListener( "loadedmetadata", function () {
			// retrieve dimensions
			let height = this.videoHeight;
			let width = this.videoWidth;
			// send back result
			resolve({
				height : height,
				width : width
			});
		}, false );

		// start download meta-datas
		video.src = url;
	});
}


// ---- Use ---- //
getVideoDimensionsOf("http://clips.vorwaerts-gmbh.de/VfE_html5.mp4")
   .then(({width, height}) => {
	console.log("Video width: " + width) ;
	console.log("Video height: " + height) ;
    });

Вот видео, использованное для фрагмента, если вы хотите его увидеть: Big Buck Bunny

Answer 4

Прослушивание события loadedmetadata, которое отправляется, когда пользовательский агент только что определил продолжительность и размеры медиаресурса

Раздел 4.7.10.16 Сводка события

https://www.w3.org/TR/html5/semantics-embedded-content.html#eventdef-media-loadedmetadata

videoTagRef.addEventListener('loadedmetadata', function(e){
    console.log(videoTagRef.videoWidth, videoTagRef.videoHeight);
});