Dimensions vidéo HTML5


105

J'essaie d'obtenir les dimensions d'une vidéo que je superpose sur une page avec JavaScript, mais il renvoie les dimensions de l'image de l'affiche au lieu de la vidéo réelle, car il semble qu'elle soit calculée avant le chargement de la vidéo.


Avez-vous abandonné? Il y a de bons indices comme réponses ici!
Juan Mendes

Réponses:


105
<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

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


Est-ce possible avec le format ogg car je ne pense pas que la vidéo inclura de telles métadonnées?
Elliot

@Elliot j'ai testé dans Chrome sur cette démo: people.opera.com/howcome/2007/video/controls.html et ça marche ...
Šime Vidas

Il semble que le lien soit à nouveau rompu
Martin Delille

Désolé le lien n'est pas rompu en fait
Martin Delille

137

Il convient de noter que la solution actuellement acceptée ci-dessus par Sime Vidas ne fonctionne pas réellement dans les navigateurs modernes puisque les propriétés videoWidth et videoHeight ne sont définies qu'après le déclenchement de l'événement "sharedmetadata".

Si vous interrogez ces propriétés assez loin après le rendu de l'élément VIDEO, cela peut parfois fonctionner, mais dans la plupart des cas, cela retournera des valeurs de 0 pour les deux propriétés.

Pour garantir que vous obtenez les valeurs de propriété correctes, vous devez faire quelque chose du genre:

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

REMARQUE: Je n'ai pas pris la peine de comptabiliser les versions antérieures à la 9 d'Internet Explorer qui utilisent attachEvent au lieu de addEventListener car les versions antérieures à la 9 de ce navigateur ne prennent pas en charge la vidéo HTML5, de toute façon.


J'obtiens des valeurs de 100 pour la largeur et la hauteur, et la vidéo n'a pas 100px. Je ne sais pas pourquoi ...
Mikel

2
Cela ne fonctionne malheureusement pas sur Chrome pour Android 49; seulement lorsque la lecture de la vidéo a commencé, les informations deviennent disponibles. Avez-vous d'autres informations à ce sujet? PS1: Je n'ai essayé cela qu'avec des URL vers des fichiers locaux sélectionnés à l'aide d'un élément d'entrée de sélecteur de fichiers. PS2: cela fonctionne sur iOS Safari.
Visionscaper

J'ai créé ce problème sur le suivi des bogues de chrome: bugs.chromium.org/p/chromium/issues/detail?id=598218
Visionscaper

2
Cela ne fonctionnera pas 100% du temps. En de rares occasions, videoWidth et videoHeight seront à zéro lors d'un loadedmetadataincendie. Je viens de le voir sur Chromium 69. Écouter loadeddataest un pari plus sûr.
cleong

18

Fonction prête à l'emploi

Voici une fonction prête à l'emploi qui renvoie les dimensions d'une vidéo de manière asynchrone, sans rien changer 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 si vous souhaitez le voir: Big Buck Bunny


Grande utilisation d'une promesse de fournir des données de balises vidéo de manière asynchrone, exactement ce que je cherchais merci
Ray Andison

Excellent code et prise en charge décente du navigateur: à partir de Chrome 32, Opera 19, Firefox 29, Safari 8 et Microsoft Edge, les promesses sont activées par défaut.
Jeff Clayton

13

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

Section 4.7.10.16 Résumé des événements

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

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


1
@Visionscaper Fixed, merci. N'hésitez pas à apporter de petites modifications aux réponses des autres lorsqu'elles ne changent pas l'intention d'origine.
Juan Mendes

Donwvoter: J'apprécierais une explication pour que cela puisse être amélioré!
Juan Mendes

1

Voici comment cela peut être fait dans Vue:

<template>
    <div>
        <video src="video.mp4" @loadedmetadata="getVideoDimensions"></video>
    </div>
</template>

<script>
export default {
    methods: {
        getVideoDimensions (e) {
            console.log(e.target.videoHeight)
            console.log(e.target.videoWidth)
        }
    }
}
</script>

-1

Dans Vuejs, j'utilise 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
    },
});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.