Audio/Video ohne YouTube
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.
- <audio>: The Embed Audio element
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio - Wikipedia: HTML5 audio
https://en.wikipedia.org/wiki/HTML5_audio - HTML/Tutorials/Multimedia/audio
https://wiki.selfhtml.org/wiki/HTML/Tutorials/Multimedia/audio - Musik mit HTML5 in die Website einbinden über <audio>
https://www.html-seminar.de/html5-musik-einbinden-audio.htm - HTML Audio
https://www.w3schools.com/html/html5_audio.asp
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.
- HTML5 video
https://en.wikipedia.org/wiki/HTML5_video - HTML/Tutorials/Multimedia/video
https://wiki.selfhtml.org/wiki/HTML/Tutorials/Multimedia/video
Weitere Links
- MSXFAQ Podcast
- HTML/Tutorials/Multimedia/audio
https://wiki.selfhtml.org/wiki/HTML/Tutorials/Multimedia/audio - How to Stream Videos Using Javascript and HTML5
https://img.ly/blog/how-to-stream-videos-using-javascript-and-html5/ - Videos für das Web mit HTML 5 - eine Einführung
https://www.elstel.org/html5video/FlashVersusHtml5Video.html.de