Dimensions des vidéos HTML5

Question

J'essaie d'obtenir les dimensions d'une vidéo que je superpose à une page avec JavaScript, mais les dimensions de l'image de l'affiche sont renvoyées au lieu de celles de la vidéo, car il semble qu'elles soient calculées avant le chargement de la vidéo.

Answer 1

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

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

Pour garantir que vous obtenez les bonnes valeurs de propriété, 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 tenir compte des versions antérieures à 9 d'Internet Explorer qui utilisent attachEvent au lieu de addEventListener, car les versions antérieures à 9 de ce navigateur ne prennent pas en charge la vidéo HTML5, de toute façon.

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

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

Answer 3

Fonction "prêt à l'emploi

Voici une fonction prête à l'emploi qui renvoie les dimensions d'une vidéo de manière asynchrone, 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(resolve => {
        // create the video element
        const video = document.createElement('video');

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

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

// ---- Use ---- //
getVideoDimensionsOf("https://www.w3schools.com/html/mov_bbb.mp4")
   .then(console.log);

Voici la vidéo utilisée pour l'extrait si vous souhaitez la voir : Le lapin Big Buck

Answer 4

Écoutez le loadedmetadata qui est envoyé 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/semantics-embedded-content.html#eventdef-media-loadedmetadata

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

Answer 5

C'est ainsi que 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>