Video

Das HTML Video-Element

Zielgruppe sind StudentInnen und ambitionierte Informatik-Amateure

Grundkenntnisse der Informatik und von HTML werden vorausgesetzt.



Video-Auswahl




Das Video wurde nicht mit einer Camera aufgenommen sondern synthetisch mit → SVG-ObjektGrafik erzeugt und in verschiedene Video-Datei-Formate umgewandelt.

Gut verwendbare Video-Formate


Für jedes Beispiel ist der hier verwendete MIME-Typ angegeben. Man braucht diese Angabe zur ↓ HTML-Proggrammierung.
Der mit ↗ bezeichnete Link ladet die isolierte Video-Datei in einem eigenen Browser-Fenster. Das kann je nach Browser und Version zu unterschiedlichen Ergebnissen führen.









Weniger gut verwendbare Video-Formate


▲  Achtung: Es ist möglich, dass ihr Browser-Programm abstürzt, wenn sie versuchen, eines der in diesem Kapitel vorgestellten Video-Formate abzuspielen !













HTML



Für diese Arbeit gibt es keine einfachen Rezepte. Man kann mit 'Versuch und Irrtum' experimentieren, ansonsten helfen meist nur umfangreiche Recherchen und Tests.

Beobachten sie die Datei-Größe vor und nach einer Umwandlung: Eine Verkleinerung bedeutet meist den Verlust von Qualität.



Daher wurden die hier verwendeten Video-Dateien mehrheitlich auf Linux mit Konsolen-Programmen erzeugt und umgewandelt:
Konsoilen-(CLI)-Programme bieten mehr Optionen, lassen sich leicht automatisieren und installieren keine unerwünschte Crapware.
Wenig erfahrene EntwicklerInnen schrecken meist vor der Verwendung von Konsolen-(CLI)-Programmen zurück. Dazu trägt leider das arrogante Verhalten vieler selbst ernannter Gurus in Internet-Foren bei.



<video id="video1" controls="true" style="width:200px; height:100px;">
<source src="video.webm" type="video/webm"/>
Ihr Browser kann das Video nicht anzeigen.
</video>


Innerhalb des <video>-Elements muss sich mindestens 1 <source>-Element befinden, welches den Pfad zu einer Video-Datei angibt.

Das src-Attribut gibt den Pfad zur Video-Datei an und wird genauso verwendet wie für <img>-Elemente (→ Bilder). Die Video-Datei muss sich nicht am gleichen Server befinden, man kann auch einen Internet-Pfad (URL) angeben. Beachten sie die UrheberInnen-Rechte !

Mit dem type-Attribut muss man den MIME-Typ der Video-Datei angeben. Für jedes oben gezeigte Beispiel ist der hier verwendete Typ angeführt.

Der Warnungs-Text sollte angezeigt werden, wenn ein Browser die Video-Datei nicht anzeigen kann. Das wird derzeit leider von keinem gängigen Programm befolgt.
Einige Browser melden statt dessen fälschlich 'Ungültige Quelle', wenn sie unfähig sind, die Datei anzuzeigen.



<video id="video9" controls="true" style="width:200px; height:100px;">
<source src="video.webm" type="video/webm"/>
<source src="video.mp4" type="video/mp4"/>
Ihr Browser kann das Video nicht anzeigen.
</video>



<button onclick="do_video(1)">Play</button>
<button onclick="do_video(0)">Stop</button>
<button onclick="do_video(-1)">Reset</button>

Details der Javascript-Funktionen im ↓ nächsten Kapitel.

Javascript


<script type="text/javascript">

function do_video(opt) {
var n=document.getElementById('video9');
switch(opt) {
case -1: n.pause(); n.currentTime=0; break;
case 0: n.pause(); break;
case 1: n.play(); break;
}
}

</script>

Details zur Programmiersprache → Javascript


Auf den Seiten dieses Webs werden dazu ↑ HTML <button>-Elemente bevorzugt.