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

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

4 63
javascript jquery html5-video

4 ответа:

<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

60

следует отметить, что в настоящее время принятое решение выше 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.

97

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

раздел 4.7.10.16 сводка событий

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

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

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

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

// ---- 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;
	});
}


// ---- Usation ---- //
getVideoDimensionsOf("http://clips.vorwaerts-gmbh.de/VfE_html5.mp4")
   .then(function(dimensions){
	console.log("Video width: " + dimensions.width) ;
	console.log("Video height: " + dimensions.height) ;
    });

вот видео, используемое для фрагмента, если вы хотите его увидеть:Большой Бак Банни

6