Videos im Web und auf mobilen Endgeräten

Nachdem Apple Adobe endgültig aus ihrem iOS verbannt hatte, war klar: Um Videos auf allen Geräten anzeigen zu können, muss man zu HTML5 greifen. Eine nützliche Übersicht über das Thema HTML5 und das Video-Tag gibt es hier.

Dabei wird klar dargestellt, wie und wo die Video- und Audiocodecs arbeiten. Außerdem wird jedem schnell klar, das Video-Tag alleine löst noch keine Probleme: Um wirklich alle Geräte abzudecken, braucht es einen „wilden“ Mix.

„Video for Everybody“ hat eine schöne Arbeit geleistet, die – wenn möglich – HTML5 verwendet und bei nicht HTML5-fähigen Browsern einen Flashfallback macht. Infos bzgl. System und Browsern findet man auf dieser Testseite. 

Ein kurzer Blick in den Quelltext bringt Folgendes zum Vorschein:

Download Video: Closed Format: "MP4" Open Format: "OGG" "WebM"

Hier erkennt man: Das Video muss für die Darstellung auf allen Browsern und mobilen Endgeräte in 3 Formaten abgespeichert werden. Der Vorteil dieser Variante ist das sie komplett ohne JavaScript arbeitet.

www.videojs.com stützt auf diese Arbeit. Hier wurden mittels JavaScript einige Features und kleinere Bugfixes hinzugefügt.

Falls man aber keine Lust/Möglichkeit hat, das Video in allen Formaten abzulegen bzw. auf dem Server zu konvertieren, kann man das Video den Benutzern standardmäßig als Flashvideo anbieten. Und falls das Gerät kein Flash unterstützt, wird die HTML5-Variante angeboten.

Mit dieser Variante deckt man zumindest zusätzlich zu allen Browsern auch noch die mobilen Endgeräte von Apple ab.

Ich benutze hier den Flowplayer als Flashplayer und PrototypeJS als JS-Library.

Dieses Beispiel benutzt das RTMP-Plugin von Flowplayer um das streaming von einem RTMP-Server zu ermöglichen. Des Weiteren wird auf mobilen Endgeräten, die kein Flash supporten – wie zum Beispiel das iOS – der HTML5-Player dargestellt.

Dazu binden wir als erstes die nötigen JavaScript-Dateien ein:

Als nächstes fügen wir ein Element in unser Markup ein das durch das Video-Element/Object-Element ersetzt werden soll.

Nun braucht es nur noch den JavaScript-Aufruf der unser leeres Markup-Element in ein Video umwandelt.

document.on('dom:loaded', function(e) {
        $('exampleId').maVideo({
            defaultImage: '/videotest/img/default.png',
            html5: {
                src: 'http://wwww.public-path-to-video.com/example.mp4',
                width: 640,
                height: 264
            },
            flash: {
                width: 640,
                height: 264,
                flashSettings: {
                    src:'/swf/flowplayer-3.2.7.swf',
                    bgcolor:'#000000'
                },
                playerSettings: {
                    plugins: {
                        rtmp: {
                            url: '/swf/flowplayer.rtmp-3.2.3.swf',
                            netConnectionUrl: 'rtmp://www.netConnectUrl.com/path/'
                        },
                        controls: {
                            buttonColor: 'rgba(0, 0, 0, .9)',
                            buttonOverColor: '#000000',
                            backgroundColor: '#d7d7d7',
                            backgroundGradient: 'medium',
                            sliderColor: '#FFFFFF',
                            sliderBorder: '1px solid #808080',
                            volumeSliderColor: '#FFFFFF',
                            volumeBorder: '1px solid #808080',
                            timeColor: '#000000',
                            durationColor: '#535353',
                            autoHide: false 
                        }
                    },
                    playlist: [{
                        autoPlay: true,
                        provider: 'rtmp',
                        url: 'mp4:example.mp4'
                    }] 
                }
            }
        });

Ein geübtes Auge sieht sofort hier wurde noch eine JavaScript-Datei mehr benutzt als der Flowplayer nötig hat. Die maVideo.js:

var massiveVideo = Class.create({
    options: {},
    initialize: function(element, settings) {
        this.createOptions(element, settings);
        this[this.options.videotype.toLowerCase()]();
    },
    createOptions: function(element, settings) {
        Object.extend(this.options, settings);
        this.options.element = element;
        this.options.videotype = (Prototype.Browser.MobileSafari) ? 'HTML5' : 'Flash';
    },
    html5: function() {
        var video = new Element('video', {
           'width':this.options.html5.width,
           'height':this.options.html5.height
        });
        var source = new Element('source', {
           'src': this.options.html5.src,
           'type': 'video/mp4'
        });
        video.insert(source);
        this.options.element.innerHTML = '';
        this.options.element.insert(video);
    },
    flash: function() {
        var defaultImage = new Element('img', {
           src: this.options.defaultImage
        });
        this.options.element.innerHTML = '';
        this.options.element.insert(defaultImage);
        this.options.element.setStyle({
            width: this.options.flash.width + 'px',
            height: this.options.flash.height + 'px'
        });
        $f(this.options.element.id, this.options.flash.flashSettings, this.options.flash.playerSettings);          
    }
});

Element.addMethods('DIV', {
   maVideo: function(element, settings) {
       var maVid = new massiveVideo(element, settings);
   } 
});

Hier wird lediglich eine simple Klasse erstellt, die eine "Geräteweiche" ausführt und das entsprechende Objekt in ein Element einfügt.

Mittels addMethods() hängen wir das Ganze noch in die PrototypeJS-Library rein und können unsere Videos einfach mittels $('selector').maVideo({settingsObject}); einbinden.

Die maVideo.js wurde bisher auf folgenden Geräten/Plattformen getestet:

• Mac OS X 10.6.8
• Firefox 6.0.1
• Opera 11.51
• Safari 5.1
• Google Chrome 13.0.782

Windows XP

• IE7.0.5730
• Firefox 3.0.19

Windows7

• Firefox 6.0.1
• Opera 11.51
• Safari 5.1
• Google Chrome 13.0.782
• IE7.x
• IE8.x
• IE9.x

iOS

• iPhone3
• iPad