HTML5AudioVideoFallback

Lösung

Mit dem jQuery-Plugin HTML5AudioVideoFallback werden die Medien für alle Browser zugänglich. Dazu wird das Medium mit einem Flash-Player abgespielt, aber nur, wenn der Browser die Elemente nicht richtig interpretieren oder die zur Verfügung stehenden Datei-Formate nicht abspielen kann. Sollte der Flash-Player nicht eingebettet werden können, da zum Beispiel das Flash-Plugin fehlt, werden Links zum Download der Dateien angeboten. Selbiges geschieht auch, wenn dem Flash-Player kein geeignetes Datei-Format zur Verfügung steht. Ist das Flash-Plugin des Browsers veraltet, erscheint die Bitte, dieses zu aktualisieren (expressinstall).

Demo ansehen (mit FlowPlayer als Flash-Fallback)
Demo ansehen (mit NonverBlaster als Flash-Fallback)

Einbindung

Um HTML5AudioVideoFallback zu verwenden, müssen jQuery, swfobject, enablehtml5.min.js und html5audiovideofallback.min.js eingebunden sein. Die enablehtml5.min.js "repariert" die HTML5-Medien-Elemente für ältere Browser. Die html5audiovideofallback.min.js stellt das eigentliche Plugin dar. Auf SWFObject kann verzichtet werden, wenn die Option playerDirectEmbedCall verwendet wird, um den Flash-Player einzubetten (siehe Beispiele).

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/swfobject.min.js"></script>      
<script type="text/javascript" src="js/enablehtml5.min.js"></script>
<script type="text/javascript" src="js/html5audiovideofallback.min.js"></script>

Die Medien werden per ganz normalem HTML5 eingebunden, zum Beispiel wie folgt. Die Pfade zu den Medien können demnach relativ zur HTML-Datei oder absolut angegeben werden. Wenn der Mimetype der jeweiligen <source> direkt angegeben ist, haben es der Browser und das HTML5AudioVideoFallback leichter, diesen herauszufinden.

<!-- Audio -->
<audio controls>
    <source src="audios/myaudio.mp3" type="audio/mpeg" />
    <source src="audios/myaudio.ogg" type="audio/ogg" />
</audio>

<!-- Video -->
<video width="380" height="285" poster="images/myposter.jpg" controls>
    <source type="video/mp4" src="videos/myvideo.mp4" />
    <source type="video/ogg" src="videos/myvideo.ogv" />
    <source type="video/webm" src="videos/myvideo.webm" />
</video>

Nun muss nur noch das Plugin mit der gewünschten Konfiguration aufgerufen werden.

<script type="text/javascript">
    $(document).ready(function(){
        // Videos mit Flowplayer als Flash-Fallback
        $('video').HTML5AudioVideoFallback();
        
        // Audios mit Flowplayer als Flash-Fallback
        $('audio').HTML5AudioVideoFallback({
            flashMediumSrcType: 'audio/mpeg',
            width: 300,
            height: 28,
            params: '{"flashvars": \"config={\'clip\': {\'url\': \'###MEDIUM_SRC###\', \'autoPlay\': 0}, \'canvas\': {\'backgroundColor\': \'#000000\'}, \'plugins\': {\'controls\': {\'fullscreen\': 0, \'height\': 28, \'autoHide\': 0}}}\"}'
        });
    });
</script>

Konfiguration

Standardmäßig wird FlowPlayer als Flash-Player verwendet, der mittels swfobject eingebettet wird. Mit Hilfe der Parameter flashPlayerSrc, initFunction, flashvars, params und attributes kann aber auch ein anderer Flash-Player, wie zum Beispiel NonverBlaster, verwendet werden.

Über die Option playerDirectEmbedCall kann auch ein eigener Einbettungscode statt swfobject verwendet werden. Dies kann sinnvoll sein, um zum Beispiel beim FlowPlayer die Referenz auf das FlowPlayer-Objekt zu erhalten, um auf Events des Players zu reagieren. Die Optionen flashvars, params und attributes haben in diesem Fall keine Auswirkung.

Per Default sind die Einstellungen außerdem für ein MP4-Video (flashMediumSrcType: 'video/mp4') gemacht. Für Audio-Dateien muss der flashMediumSrcType entsprechend angepasst werden (zum Beispiel auf flashMediumSrcType: 'audio/mpeg' für MP3-Dateien). Außerdem sollten für Audio-Dateien width und height spezifiziert werden.

Folgende Optionen können beim Aufruf des Plugins übergeben werden. Diese überschreiben dann die Default-Einstellungen.

Die Platzhalter werden folgendermaßen ersetzt:

Data-Eigenschaften

Auf alle Optionen kann via $('myElement').data('HTML5AudioVideoFallback').myOptionName zugegriffen werden. Desweiteren kann auf folgende Eigenschaften zugegriffen werden:

Methoden

Die folgenden Methoden können per $('myElement').HTML5AudioVideoFallback('myMethodName') aufgerufen werden: