HTML5 Video Abmessungen

Question

Ich versuche, die Abmessungen eines Videos zu erhalten, das ich auf einer Seite mit JavaScript überlagert, jedoch gibt es die Abmessungen des Plakatbildes statt des tatsächlichen Videos zurück, da es scheint, dass es berechnet wird, bevor das Video geladen wird.

Answer 1

Dies sollte auch beachtet werden
dass in einigen Fällen wie HLS-Streams die Funktion "onmetadataloaded" funktioniert ebenfalls nicht.
In diesen Fällen funktioniert diese Lösung perfekt.

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

In Vuejs verwende ich folgenden Code im montierten Tag.

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