Blog

Ich werde in der nächsten Zeit immer mal wieder etwas über den HTML-Videotag schreiben. Ich habe das Gefühl mir laufen ständig Dinge im Bezug auf ihn über den Weg, über die es sich lohnt zu schreiben.

Heute beschäftigen wir uns mit der dynamischen Ermittlung der Größe eines Videos. Dies wird vor allem dann gebraucht, wenn man seine Seite dynamisch an die Größe eines Videos anpassen möchte und man nicht von einer bestimmten Videogröße ausgehen kann. Ein Praxisbeispiel wäre beispielsweise ein Videoplayer, der für Videos im 16:9 Format anders angezeigt wird als für Videos im 4:3 Format.

Um die Größe von einem Videotag zu erfahren können die Eigenschaften "videoHeigh" und "videoWidth" verwendet werden:

<video id="foo" src="foo.mp4"></video>

var videoNode = document.getElementById("foo");
videoNode.videoHeight; // gibt die Höhe des Videos zurück
videoNode.videoWidth; // gibt die Breite des Videos zurück

Wird das Video per Ajax nachgeladen sind diese Variablen aber unter Umständen noch nicht gesetzt, wenn man direkt danach auf sie zugreifen möchte. Dafür gibt es das Event "loadedmetadata".
Da der Internet Explorer 8 wieder eine Extrawurst benötigt sieht der Code dafür so aus:

// Ajax Aufruf (jQuery)
$.get('/getVideo/23409', function(data){

    // Video Node erstellen
    var videoNode = document.createElement('video');
    videoNode.src = data.videoUrl;
    $('#videoPlayer').append(videoNode);

    if (!videoNode.addEventListener) {

        // Für IE8
        videoNode.attachEvent("loadedmetadata", function(e) {
            console.log('Eigenschaften gesetzt:', videoNode.videoHeight, videoNode.videoWidth)
        });

    } else {

        // Für die anderen Browser
        videoNode.addEventListener("loadedmetadata", function(e) {
            console.log('Eigenschaften gesetzt:', videoNode.videoHeight, videoNode.videoWidth)
        }, false);
    }   

});

Viel Spaß beim ausprobieren und Implementieren