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 également de noter
que dans certains cas, comme Flux HLS le "onmetadataloaded" ne fonctionne pas non plus.
Dans ces cas, cette solution fonctionne parfaitement.

var video = document.getElementById("video")
video.onplaying = function () {
    var width = video.videoWidth
    var height = video.videoHeight
    console.log("video dimens loaded w="+width+" h="+height)
}

Answer 2

Dans Vuejs, j'utilise le code suivant dans le tag monté.

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