HTML5-Videodimensionen

104

Ich versuche, die Abmessungen eines Videos abzurufen, von dem ich eine Seite mit JavaScript überlagere. Es werden jedoch die Abmessungen des Posterbilds anstelle des tatsächlichen Videos zurückgegeben, da es anscheinend vor dem Laden des Videos berechnet wird.

Elliot
quelle
Hast du aufgegeben? Hier gibt es gute Hinweise als Antworten!
Juan Mendes

Antworten:

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

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

Šime Vidas
quelle
Ist dies mit dem ogg-Format möglich, da ich nicht glaube, dass das Video solche Metadaten enthalten wird?
Elliot
@Elliot Ich habe in Chrome auf dieser Demo getestet: people.opera.com/howcome/2007/video/controls.html und es funktioniert ...
Šime Vidas
Es scheint, dass die Verbindung wieder unterbrochen ist
Martin Delille
Entschuldigung, der Link ist in der Tat nicht unterbrochen
Martin Delille
136

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

Wenn Sie diese Eigenschaften nach dem Rendern des VIDEO-Elements weit genug abfragen, funktioniert dies manchmal. In den meisten Fällen werden jedoch für beide Eigenschaften Werte von 0 zurückgegeben.

Um sicherzustellen, dass Sie die richtigen Eigenschaftswerte erhalten, müssen Sie Folgendes tun:

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

HINWEIS: Ich habe mich nicht darum gekümmert, Vor-9-Versionen von Internet Explorer zu berücksichtigen, die attachEvent anstelle von addEventListener verwenden, da Vor-9-Versionen dieses Browsers HTML5-Videos sowieso nicht unterstützen.

natlee75
quelle
Ich erhalte Werte von 100 für Breite und Höhe, und Video hat keine 100 Pixel. Ich weiß nicht warum ...
Mikel
2
Dies funktioniert unter Chrome für Android 49 leider nicht. Erst wenn das Video abgespielt wurde, werden die Informationen verfügbar. Weitere Einblicke dazu? PS1: Ich habe dies nur mit URLs zu lokalen Dateien versucht, die mit einem Dateiauswahl-Eingabeelement ausgewählt wurden. PS2: Es funktioniert unter iOS Safari.
Visionscaper
Ich habe dieses Problem im Chrom-Bug-Tracker erstellt: bugs.chromium.org/p/chromium/issues/detail?id=598218
Visionscaper
2
Dies wird nicht 100% der Fälle funktionieren. In seltenen Fällen sind videoWidth und videoHeight bei loadedmetadataBränden Null . Ich habe es gerade auf Chromium 69 gesehen. Zuhören loadeddataist eine sicherere Wette.
Cleong
18

Gebrauchsfertige Funktion

Hier ist eine gebrauchsfertige 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} Promise which returns the dimensions of the video in 'width' and 'height' properties.
 */
function getVideoDimensionsOf(url){
	return new Promise(function(resolve){
		// create the video element
		let video = document.createElement('video');

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

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


// ---- Use ---- //
getVideoDimensionsOf("http://clips.vorwaerts-gmbh.de/VfE_html5.mp4")
   .then(({width, height}) => {
	console.log("Video width: " + width) ;
	console.log("Video height: " + height) ;
    });

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

Yairopro
quelle
Großartige Verwendung eines Versprechens, Video-Tag-Daten asynchron zu liefern, genau das, wonach ich gesucht habe, danke
Ray Andison
Großartiger Code und gute Browserunterstützung: Ab Chrome 32, Opera 19, Firefox 29, Safari 8 und Microsoft Edge sind Versprechen standardmäßig aktiviert.
Jeff Clayton
13

Warten Sie auf das loadedmetadataEreignis, das ausgelöst wird, wenn der Benutzeragent gerade die Dauer und die Abmessungen der Medienressource festgelegt 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);
});
Juan Mendes
quelle
Richtiger Link: w3.org/TR/html5/…
Visionscaper
1
@Visionscaper Behoben, danke. Fühlen Sie sich frei, kleine Änderungen an den Antworten anderer vorzunehmen, wenn diese die ursprüngliche Absicht nicht ändern.
Juan Mendes
Donwvoter: Ich würde mich über eine Erklärung freuen, damit dies verbessert werden kann!
Juan Mendes
1

So geht das in 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>
Iljitsch
quelle
-1

In Vuejs verwende ich folgenden Code im gemounteten 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
    },
});
Aseem
quelle