blog.atwork.at

news and know-how about microsoft, technology, cloud and more.

Windows Azure als HTML5 Video BLOB Storage verwenden

Wenn man auf einer eigenen Website Videos verwenden möchte, gibt es dazu einige Möglichkeiten. Selber hosten, ein Videoportal wie YouTube od. ähnliches verwenden, oder ... alles ganz anders.

In meinem Fall ging es darum in einem Web, ein Video mit dem HTML5 Video-Tag abzuspielen. Nach dem Konvertieren in die beiden erforderlichen Formate .MP4 und .OGG werden die Files also auf den Webserver geladen und per HTML verlinkt (Code siehe unten).

Nur, was passiert, wenn jetzt viele gleichzeitige Abfragen auf die Webseite kommen? Jedes Video-File ist ein paar Megabyte groß, wie sieht es hier mit Traffic, Last und Verfügbarkeit aus?

Nun, ganz neu gibt es Windows Azure Media Services für Live-Streaming, siehe auch ScottGu: Announcing Windows Azure Media Services. Die Media Services sind allerdings noch im Preview-Status: "To sign up for the preview, click here."

Als schnelle Möglichkeit bietet es sich also an, mal rasch den Azure BLOB Storage für die Video Files zu verwenden. Gesagt, getan: Video-Dateien in den BLOB Container uploaden und die Website anpassen. Hier der HTML5-Code dafür:

<video width="800" height="250" controls="controls" poster="/img/background.jpg" id="video_einfach">
<source src="<yourappid>.blob.core.windows.net/video/einfach.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' />
<source src="<yourappid>.blob.core.windows.net/video/einfach.ogv" type='video/ogg; codecs="theora, vorbis"' />
Your browser does not support the video tag.
</video>

Hübsch (in Visual Studio) formatiert sieht der HTML5-Code so aus:

html5-video

Je nach Browser wird eine Version des Videos mit dem HTML5-Video-Player ausgeliefert und abgespielt, in IE das MP4-File, in FF das .OGV File...

In IE sieht dieser Versuch dann allerdings so aus:

html5-video-ie-mime-type

In Firefox:

html5-video-ff-mime-type

Das Problem ist der Dateityp. Dieser wird falsch geliefert. Also, was tun?

Die Lösung ist zum Glück einfach. Den entscheidenden Tipp fand ich in Stream HTML5 Video from Azure Blob Storage.

Mit Azure Storage Explorer kann der Content Type einzelner Dateien leicht geändert werden. In meinem Beispiel habe ich zwei Versionen des Videos "einfach.mp4" in den BLOB Storage upgeloadet, das sieht standardmäßig so aus:

azure-storage-explorer-video-default

Nun muss nur der Content Type geändert werden, und zwar von "application/octet-stream" wie folgt:

  • video/ogg
  • video/mp4

Die Bearbeitung erfolgt im Azure Storage Explorer per Doppelklick und Anpassen der File-Eigenschaft (Properties) ContentType. Hier wird "video/mp4" bzw. "video/ogg" eingetragen:

azure-storage-explorer-video-mp4

So sehen dann die korrekten Content Types für MP4 und OGV Videos aus:

azure-storage-explorer-video-content-type-correct

Es funktioniert. Der Browser zeigt beim Reload der Seite den Player an...

html5-video-player-ie

Das Video-File muss natürlich genauso downgeloadet werden, aber immerhin, es belastet nicht den (eigenen) Webserver, sondern kommt aus der Wolke.

Es ist somit eine coole und vor allem rasche Lösung, Azure für simples BLOB Hosting von großen Files und Videos zu verwenden. Noch kein Streaming - aber dafür gibt es ja bald die Azure Media Services!

Tipp: Interessierte können sich schon jetzt für Azure Media Services per E-Mail an mediaservices@microsoft.com anmelden.



Loading