HTML5 Dimensions vidéo

Question

Je suis en train d'obtenir les dimensions d'une vidéo dont je suis superposant sur une page avec JavaScript, mais il retourne les dimensions de l'image de l'affiche au lieu de la vidéo réelle, il semble qu'il est en cours calculé avant que la vidéo est chargé.

Answer 1

<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

Spec: https: //html.spec. whatwg.org/multipage/embedded-content.html#the-video-element

Answer 2

Il convient de noter que la solution actuellement acceptée ci-dessus par Sime Vidas ne fonctionne pas vraiment dans les navigateurs modernes car les propriétés videoWidth et videoHeight ne sont pas réglées qu'après l'événement « loadedmetadata » a tiré.

Si vous arrivez à la requête pour les propriétés assez loin après l'élément vidéo est rendu, il peut parfois le travail, mais dans la plupart des cas, cela renvoie une valeur de 0 pour les deux propriétés.

Pour garantir que vous obtenez les valeurs de propriété correctes, vous devez faire quelque chose le long des lignes de:

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

NOTE:. Je n'ai pas pris la peine comptable pour les pré-9 versions d'Internet Explorer dont l'utilisation attachEvent au lieu de addEventListener depuis pré-9 versions de ce navigateur ne supporte pas la vidéo HTML5, de toute façon

Answer 3

Prêt à utiliser la fonction

Voici un prêt à utiliser la fonction qui renvoie les dimensions d'une vidéo asynchrously, sans changer quoi que ce soit dans le document .

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

Voici la vidéo utilisée pour l'extrait de code si vous souhaitez le voir: Big Buck Bunny

Answer 4

Ecoutez l'événement loadedmetadata qui est distribué lorsque l'agent utilisateur vient de déterminer la durée et les dimensions de la ressource média

Section 4.7.10.16 Résumé de l'événement

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

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

Answer 5

Dans Vuejs-je utiliser le code suivant dans la balise montée.

var app = new Vue({
    el: '#id_homepage',
    mounted: function () {
        var v = document.getElementById("id_video");
        var width = v.offsetWidth;
        v.height = Math.floor(width*(9/16)); // dynamically setting video height to maintain aspect ratio
    },
});