Audio/Video ohne YouTube

Inhaltsverzeichnis
  1. Audio
  2. Video
  3. Weitere Links

Ich gebe zu, dass ich gerne YouTube als schnelle Informationsquelle nutze und viele Inhalte lassen sich so schnell erschließen. Allerdings wird YouTube durch die Werbung auch immer nerviger und daher habe ich geschaut, wie ich Audio/Videos auf der MSXFAQ auch ohne YouTube selbst hosten kann. Mich hat vor allem interessiert, ob ich die Dateien auch auf einer statischen Webseite wie der selbst hosten kann. Sehr schnell habe ich die <audio>- und <video>-Tags des HTML5-Standards gefunden.

Denken Sie daran, die beiden folgenden Tags per CSS auch zu formatieren, z.B. mit einem Rahmen umfassen, zu zentrieren o.ä., damit sie entsprechend sichtbar sind.

Audio

Wenn ich z.B. eine MP3-Datei einfach als Link einbinde, dann laden alle Browser die Datei einfach herunter. Aber mit dem Audio-Tag kann ich die Datei direkt im Browser abspielen lassen. Der HTML-Code sieht dabei wie folgt aus:

<audio 
   controls 
   type="audio/mp3"
   src="media_ohne_yotube_audio.mp3" >
Ihr Browser kann kein AUDIO-Tag wiedergeben. Sie können es unter 
<a href="media_ohne_yotube_audio.mp3">media_ohne_yotube_audio.mp3</a> herunterladen und abspielen
</audio>

Legitime Format sind z.B. MP3 oder OGG. Es gibt natürlich noch viele weitere Format, die aber auch vom Browser und Betriebssystem abhängig sind.

Hier dann die Anzeige im Browser:

Wenn ihr Browser das ""<audio>"-Tag versteht, dann sehen Sie die Abspieloptionen. Ohne HTML5-support zeigt der Browser einfach den alternativen Text mit Downloadmöglichkeit an.

Video

Das gleiche Verfahren ist auch für Video-Dateien möglich. Wobei Sie genau überlegen sollten, ob sie "Autoplay" "und "loop" aktivieren sollten.

<video 
   type="video/mp4" 
   src="media_ohne_youtube_video.mp4" 
   width="480px" height="640px" 
   label="360p" 
   autoplay 
   loop 
   poster="media_ohne_youtube_video.png">
Ihr Browser kann kein HTML5-Video. Sie können das Video aber auf <a src="media_ohne_youtube_video">media_ohne_youtube_video</a> herunterladen
</video>

Bei den Formaten ist die Situation etwas kniffliger, da die meisten Video-Codec entweder nicht kostenfrei oder zumindest die Lizenzfrage "unsicher" sein könnte. Wikipedia hat auf https://en.wikipedia.org/wiki/HTML5_video das Thema beschrieben. Bei H264 (mp4) ist dies unklar aber WebM mit VP8/VP9 wurde von Google entwickelt und frei gestellt.

Weitere Links