javascript - HTML5 videodimensjoner

Jeg prøver å få dimensjonene til en video som jeg legger over på en side med JavaScript, men den returnerer dimensjonene til forsidebildet i stedet for den faktiske videoen, ettersom det ser ut til at det blir beregnet før videoen er lastet.

Svar #1

Det bør bemerkes at den for øyeblikket aksepterte løsningen ovenfor av Sime Vidas faktisk ikke fungerer i moderne nettlesere siden videoWidth- og videoHeight-egenskapene ikke blir satt før etter at «loadedmetadata»-hendelsen har blitt utløst.

Hvis du tilfeldigvis etterspør disse egenskapene lenge nok etter at VIDEO-elementet er gjengitt, kan det noen ganger fungere, men i de fleste tilfeller vil dette returnere verdier på 0 for begge egenskapene.

For å garantere at du får de riktige egenskapsverdiene, må du gjøre noe i retning av:

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

MERK: Jeg brydde meg ikke om å ta høyde for versjoner av Internet Explorer før 9 som bruker attachEvent i stedet for addEventListener, siden versjoner før 9 av den nettleseren uansett ikke støtter HTML5-video.

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

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

Svar #3

Klar-til-bruk-funksjon

Her er en klar til bruk-funksjon som returnerer dimensjonene til en video asynkront, uten å endre noe i dokumentet.

// ---- 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", 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);

Her er videoen som ble brukt for utdraget hvis du ønsker å se den: Big Buck Bunny

Svar #4

Lytt etter loadedmetadata-hendelsen som sendes når brukeragenten nettopp har fastslått varigheten og dimensjonene til medieressursen

Seksjon 4.7.10.16 Hendelsesoversikt

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

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

Relaterte artikler