Haupt-Reiter

Video auf Webseiten

Formate

Es gibt drei essentielle Formate für Videos im Web. 
MP4, OGG und WEBM. 

80% der Videos im Web sind inzwischen MP4-Videos. 

Bei der Verwendung von Videos gibt es zu beachten, dass MP4 ein obligatorisches Element ist. OGG oder WebM sind ergänzende Video-Formate. Für eine maximal mögliche Broswerkompatibilität in HTML5 sind allerdings all diese drei Formate beim Anlegen empfehelenswert. 

Codecs

Codecs sind am Rande erwähnt, denn sie stellen nru selten eine Fehlerquelle dar und müssen dann geändert werden. Viel wichtiger sind die Standard-Codecs der Videoformate in HTML5-fähigen Browsern. Man unterscheided dabei zwischen video und audio codec.

Die Codecs der einzelnen Formate sind: 

MP4
video codec = h.264
audio codec =  AAC 

OGG
video codec = Theora
audio codec = Vorbis

WebM
video codec = VP8
audio codec = Vorbis

Anwendung 

Eingebunden werden Videos mit dem entsprechenden video-tag <video>

<video width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  Ihr Browser unterstützt kein Video
</video>

Fallback 

Falls der Browser das Video-element nicht unterstützt oder ein entsprechendes Format nicht angegeben ist. Gibt es neben der Möglichkeit einfach das richtige Format zusätzlich anzubieten noch den Veteranen Flash-Player. Für Browser wie IE8 oder IE7, die kein Video-Tag unterstützen ist es obligatorisch, dass ein FlashVideo zusätzlich eingebunden wird. 

<video width="320" height="240">

     <source src="movie.mp4" type="video/mp4">

     <source src="movie.ogg" type="video/ogg">

     <source src="movie.webm" type="video/webm">

     <!-- Flash Fallback -->

     <object width="640" height="360" type="application/x-shockwave-flash" data="flash.SWF">

          <param name="movie" value="flash.SWF" />
          <param name="flashvars" value="controlbar=over&amp;image=POSTER.JPG&amp;file=VIDEO.MP4" />

          <img src="VIDEO.JPG" width="640" height="360" alt="text"  />

     </object>

</video>

Wie werden Videos manipuliert? 

HTML5 Videos lassen sich über Javascript manipulieren. So zum Beispiel das Pausieren, stoppen oder auch das Abfangen, wenn das video einen bestimmten Punkt im Video erreicht

Grundlegende Dinge 

Auch bei Videos im Web gibts paar Regeln bzw. Empfehlungen für Usability und Co. 

1. Videos, die nicht sofort lokalisierbar sind, soltten nicht automatisch starten. (z. B. Video am Ende einer Sidebar)
2. Videos, die sich wiederholen ('loopen'), sollten initial auf stumm sein.  
3. Videos sollten generell eine Abspielleiste besitzen, es sei denn das Video ist ein Stilmittel
4. Die Abspielleiste sollte wenigstens diese Elemente anbieten: Play, Pause, Full Screen, Lautstärkenregelung.

 

Weiterführende Links: http://www.html-seminar.de/html-5-video.htm
 

Tags: 
Bewertung: 
0
Bisher keine Bewertung

Kommentare

Gibt es nicht noch unterschiede wenn man sich z.B über Smartphone ein Video auf einer Webseite anschauen möchte ?

Könnte zu diesem Thema denn auch Videodatenberechnung bzw. allg. Rechenaufgaben gehören?

@marte
Nein es gibt keine Unterschiede. Smartphone-Browser sind generell bereits auf HTML5.eingestellt. 
Im Web gilt für Desktop oder mobile Endgeräte, dass Sie die genannten drei Formate gewährleisten. 

Wenn man es nun für das Thema "Responsive Design" nimmt, gilt hier, wie bei allen anderen Website-Elemente: Angabe in Prozent. Das Video-Tag versteht CSS. 

Nur beim Thema Datenverkehr muss man aufpassen, denn ein Video auf einer Webseite sorgt schon mal dafür, dass das Datenvolumen schon recht darunter leidet. Deshalb ist eine entsprechende Komprimierung oder eine konzeptionelle Entscheidung, dass Video für mobile Endgeräte zu streichen, obligatorisch, Hier gilt: "Mobile First", der wesentliche Content muss gewährleistet werden. 

Kann ein Video nicht auf die Mobil-Version kann man auch ein abgespacktes GIF-Bild oder eine durch Javascript gesteuerte JPEG-Sequenz  verwenden mit dem wesentlichen Inhalt des Videos. 

Wie man das Thema "Mobile" nun angeht für Videos ist letztlich eine Frage des Projektziels und der Relevanz. Die Komprimierung ist wesentlicher Bestandteil für die Entscheidung. 

@ Sarah.Design

Rechenaufgaben gehören hier definitiv nicht dazu. Wir sind auch im Bereich Medienproduktion. Berechnung sind aber generell Teil der Konzeption. Hier geht es nur darum "Wie kommt ein Video auf eine Webseite und was muss man beachten"



 

Hallo drachenvieh,

herzlichen Dank für die Ausführung zur Videoeinbindung!

Allerdings wäre ich vorsichtig mit Aussagen wie "definitiv keine Rechenaufgabe". In den letzten Prüfungen wurden häufig gemischte Aufgaben gestellt. Also Aufgaben mit nur eine Teilaufgabe als Rechenaufgabe. Also lieber mal einen Blick auch auf Rechnungen zum Thema werfen.

Gute Zusammenstellungen hierzu mit Lösungen gibt es auf: http://www.mathemedien.de/pruefung.html

Viele Grüße

Thomas Hagenhofer

Gut, ein know-how zu haben wäre natürlich praktisch. Jedoch kann ich mir bei der Themenbezeichnung und den eingeordneten Themenbereich nicht vorstellen, dass eine Rechenaufgabe verlangt wird. Schließlich geht es um Videos auf Webseiten.

Allerdings könnte eine Frage sein, ob sich ein Video für das Internet eignet, aufgrund der Datenmenge. Da hast du recht. 

Jedenfalls danke für den Link, den find ich klasse,

------------------------------------------------------------------------------------------------------------------------------

Wie werden Videos manipuliert? 

HTML5 Videos lassen sich über Javascript manipulieren. So zum Beispiel das Pausieren, stoppen oder auch das Abfangen, wenn das video einen bestimmten Punkt im Video erreicht

------------------------------------------------------------------------------------------------------------------------------

Also laut dieser Aussage müssten wir ja die ganzen DOM Manipulationen kennen oder verstehe ich das falsch?

Siehe:http://www.w3schools.com/tags/ref_av_dom.asp

 

EDIT:

und bei der Berechnung läuft es dort eher auf Datenkompression hinaus

oder um diese "normale" Datenstrom/Datenmenge berechnung?

Datenmenge:

           B x H x fv x F x t        
D = ------------------------ [MB]
          8 x 1024 x 1024
 

(Kompendium s.986)

 

Datenstrom

        B x H x fv x F
d = ------------------ [MBit/s]
         1.000.000
 

(Kompendium s.986)

B: Breite
H: Höhe
fv: Bildrate in Hz
F = Farbtiefe

      

 

Nein, die DOM-Befehle musst du nicht lernen. Das werden die niemals fragen. Ich dachte es wäre nur schön zu wissen, dass Javascript das Video steuern kann, unabhängig von einer existierenden Kontrollleiste. 

Zur Berechnung 

Du solltest die Datenmenge, Datenmenge mit Kompression und den Datenstrom errechnen können. Fürs Web sind sie alle wichtig. Der Datenstrom ist sogar wichtiger als alles andere. 

Datenmenge = Serverplatz, Download etc. 
Datenstrom = Streaming 

Das Streaming sollte die Wichtigkeit des Datenstroms schon erklären. Ein Video sollte nicht ewig laden müssen bis es beginnt / weitergeht (siehe Youtube). 



 

Ah ok dachte schon aber dann ist es das was ich mir auch darunter vorgestellt habe

danke für die Antwort

Ein super Video findet ihr hier

 

http://www.html-seminar.de/html-5-video.htm