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

Es ist anzumerken, dass die derzeit akzeptierte Lösung von Sime Vidas in modernen Browsern nicht funktioniert, da die Eigenschaften videoWidth und videoHeight erst nach Auslösen des Ereignisses "loadedmetadata" festgelegt werden.

Wenn Sie diese Eigenschaften weit genug nach der Darstellung des VIDEO-Elements abfragen, kann es manchmal funktionieren, aber in den meisten Fällen wird dies für beide Eigenschaften den Wert 0 ergeben.

Um sicherzustellen, dass Sie die korrekten Eigenschaftswerte erhalten, müssen Sie in etwa so vorgehen:

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

HINWEIS: Ich habe mir nicht die Mühe gemacht, die Vor-9-Versionen des Internet Explorers zu berücksichtigen, die attachEvent anstelle von addEventListener verwenden, da die Vor-9-Versionen dieses Browsers ohnehin kein HTML5-Video unterstützen.

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

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

Answer 3

Gebrauchsfertige Funktion

Hier ist eine einsatzbereite Funktion, die die Abmessungen eines Videos asynchron zurückgibt, ohne etwas im Dokument zu ändern .

// ---- Definitions ----- //

/**
 Returns the dimensions of a video asynchrounsly.
 @param {String} url Url of the video to get dimensions from.
 @return {Promise<{width: number, height: number}>} 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", () => {
            // 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);

Hier ist das Video, das für den Ausschnitt verwendet wurde, wenn Sie es sehen möchten: Big Buck Bunny

Answer 4

Hören Sie auf die loadedmetadata Ereignis, das ausgelöst wird, wenn der Benutzeragent gerade die Dauer und die Abmessungen der Medienressource bestimmt hat

Abschnitt 4.7.10.16 Ereigniszusammenfassung

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

So kann es in Vue gemacht werden:

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