Analyse: Design, Aufbau und Funktionen von Video-Flash-Playern

Rubrik » Web Design Technik

videoplayer.jpg Video-Flash-Player unter der Lupe | Video-Streaming und IP-TV gehören seit mehreren Jahren zu den heiß umkämpftesten Gebieten im Internet. Die Hitze steigt im Angesicht von HD-TV-Streams und dem jüngst überarbeiteten Flash-Plugin für ein noch exzellenteres Streaming. Kern jedes Video-Portals ist hierbei der jeweilige Video-Flash-Player. Verschiedenartig aufgebaut konzipierten Designer den Player nicht nur für das Abspielen von Videos, sondern im Besondern auch für die virale Verbreitung. Phlow hat sich neun verschiedene Video-Flash-Player angeschaut und beschreibt die jeweiligen Bedienelemente.

Analysierte Video-Flash-Player folgender Portale

Der Yahoo! Video-Flash-Player

Das Video-Portal "Y! Video" von Yahoo bietet neben handverlesenen Videos aus dem eigenen user-generated content exklusive Videoclips von Shows etc. an. Baut man den Yahoo! Video-Flash-Player auf seiner eigenen Website ein, dann sieht man folgende Bedienelemente in der Funktionsleite unterhalb der Video-Anzeige - Einige dieser Buttons blenden weitere Elemente in der Video-Anzeige ein.

  • Großer Play-Button im Videofeld, der über ein Startbild liegt,wenn das Video noch nicht gestartet wurde
  • Play/Pause-Button in der Funktionsleiste
  • Zeitlaufleiste
  • Zeitanzeige - veränderte die Zeitanzeige bei Klick zwischen abgelaufener und restlicher Laufzeit
  • Info-Button - blendet Zusatzinformationen zum Clip in der Video-Anzeige ein
    • verkleinertes Videofenster
    • Coverflow mit Vor- und Rückspulknopf mit weiteren Clips
    • Anzeige des Titels des Videoclips
    • Anzahl der Views
    • Share-Button - öffnet den Dialog für die Share-Funktion
  • Share-Button
    • verlinktes Yahoo-Logo
    • verkleinertes Videofenster
    • Link zum Video
    • Embed-HTML-Code
    • Thumbnail-HTML-Code mit Link und kleinem Bild
    • Links zu verschiedenen Social-Communities wie Stumble Upon, Delicious, Facebook, MySpace, Reddit und Digg
  • Lautstärkesymbol - Klick auf das Symbol schaltet zwischen Mute On/Off hin und her
  • Lautstärkeleiste in Form einer gestrichelten Anzeige
  • Fullscreen-Button

Der Sevenload Video-Flash-Player

"sevenload ist die erste und größte Medienplattform für Bilder und Videos in Deutschland.", heißt es auf der About-Website. Auch sevenload ist ein Video-Portal auf dem man obendrein jedoch zustäzlich Bilder und Fotos hochladen kann. Der Sevenload-Player blendet folgende Symbole ein, wenn man ihn auf der eigenen Website einbaut:

  • Großer Play-Button - wenn der Videoclip noch nicht gestartet wurde
  • Play/Pause-Button in der Funktionsleiste unterhalb des Video-Fensters
  • Stop-Button
  • Zeitlaufleiste - Buffering wird in der Zeitlaufleiste angezeigt
  • Abgelaufene und verbleibende Zeit oberhalb der Zeitlaufleiste
  • Lautsprechersymbol - Mute On/Off - kein Lautstärkeregler wird eingeblendet
  • Sevenload-Logo - Bei Mouse-Over wird "Open Menu" eingeblendet
    • "This video on sevenload" => Klick auf den Menüpunkt befördert einen auf die Sevenload-Website zum Clip
    • "Smooth Video"
    • "Use externally..." => öffnet "Embed"-Formular mit Javascript oder HTML-Code
    • "Original Size" => Zieht die Größe des Clips auf die Originalgröße
    • "Keep aspect ratio" => Display Aspect Ratio = Seitenverhältnis
    • "Force 16:9" => zieht den Clip auf das 16:9-Verhältnis
    • "Maximal width and height" => zieht den Clip auf die maximal Größe des Players

Der Revver Video-Flash-Player

Revver ist eine Videoclip-Plattform, die von den eigenen Werbeeinnahmen Geld an die Produzenten weiterleitet. Doch nicht nur die Inhaltsproduzenten verdienen mit Revver, sondern auch die so genannten "Sharer". Wer Revver bzw. die Clips bei der Verbreitung unterstützt erhält 20% der Werbeeinnahmen. Die restlichen Einnahmen teilt Revver 50/50 mit den Videoclip-Produzenten. Baut man einen Revver-Player auf einer Website ein, sieht man folgende Bedienelemente nachdem der Player geladen wurde:

  • Großer Play-Button mitten im Videofeld
  • Play/Pause-Button in der Funktionleiste unterhalb des Videobereichs
  • Laufleiste
    • Abgelaufene und verbleibende Zeit wird nur einblendet bei Mouse-Over über den Laufzeitzeiger
  • Menu - blendet fünf Symbole ein - bleibt solange eingeblendet bis man es mit "close menu" wieder schließt
    • Overview
    • Embed - Zwei Optionen mit Basic (HTML-Code) und Advanced Code (Javascript) stehen zur Verfügung
    • Share - blendet URL ein und eine Email-Funktion ein
    • Related Vids
    • Creator - Bei Klick auf den Creator-Button blendet Revver weitere Videos des Produzenten ein
  • Symbol für Fullscreen
  • Revver-Logo
  • Lautstärkeregler - blendet bei Mouse-Over einen vertikalen Schieberegler ein

Anmerkungen zum Revver-Player

Blendet man mit Menu weitere Funktionen ein, so erhält man auch die typische "share"-Funktion. Diese zeigt neben der URL zum Clip auch mehrere Eingabefelder ein, um sich in einem Email-Provider anzumelden. Dafür übergibt man Revver seinen Benutzernamen und sein Passwort. Emails lassen sich somit nicht direkt per Email-Eingabe an Freunde versenden. Und wer bitte, gibt freiwillige einem anderen Service seine Email-Kontodaten ein. Sehr strange.

Der Vimeo Video-Flash-Players

Vimeo ist ein Video-Portal wie YouTube und bietet seit neuestem auch einen HD-Kanal. Dieser bietet die Möglichkeit, Videos in HD-Auflösung hochzuladen und abzuspielen. Die Videos müssen dazu eine Auflösung von 1280x720 Pixel haben und werden dann automatisch in ein HD-Video (Flash) umgewandelt. Diese Videos können aber nicht auf eigenen Websites eingebaut werden.

Fährt man mit dem Mauszeiger über die Video-Darstellung blendet der Vimeo Video-Player folgende Funktionen ein:

  • Play/Pause-Button
  • Laufleiste mit genauer Zeitangabe der Position im Clip
  • Etwas eigenwillige Lautstärkeanzeige in Form von vertikalen Strichen
  • Button für Fullscreenmodus
  • Share-Button
  • Embed-Button

Die Funktionen "share" und "embed"

Ein Klick auf "embed" bzw. "share" öffnet ein Popup-Fenster, dass sich über die Website legt. Während "share" dem Benutzer das schnelle Eintragen des Video-Clips auf Flickr, Facebook, StumbleUpon, Delicious und Digg ermöglicht und man das Video per Email weiterempfehlen kann, ruft man mit "embed" den HTML-Code zum Einfügen auf.

Das Design des Players gestaltet der Benutzer selbst. Dabei stehen ihm Größe, Onscreen-Info - Anzeige des Startbildschirms und Farbe. Das AJAX-gesteuerte PopUp bietet darüberhinaus eine Preview-Funktion, um das Aussehen des Players gegenzuchecken. Das Preview passt sich automatisch nach der Eingabe neuer Paramter an.


Der Hobnox Video-Flash-Players

Hobnox bezeichnet sich als "eine Online-Entertainment und Rich Media Publishing Plattform." Weiter heisst es auf der About-Website: "Wir verbinden qualitätsorientiertes Web-TV, moderne Community-Infrastruktur und einzigartige Technologien." Dazu bietet Hobnox großformatiges Video-Streaming.

Baut man einen Videoclip von Hobnox auf der eigenen Website ein, so zeigt der Player konstant Funktionen unterhalb des Player an und blendet bei einem Mouse-Over über den Videobereich weitere Funktionen ein:

  • Logo des jeweiligen Hobnox-Kanals
  • Play/Pause-Button im Video-Fenster wenn der Clip nicht läuft
  • Play/Pause-Button in der Funktionsleiste
  • Zeitangabe (abgelaufene Zeit)
  • Zeitleiste mit dreieckigem Schieberegler
  • Zeitangabe 2 (verbleibende Zeit)
  • Lauststärkeregler mit horizontalem Reglerbalken

Eingeblendete Funktionen bei Mouse-Over:

  • Email zum weiterempfehlen - öffnet Formular im Videofenster
  • Embed Code - öffnet Formular im Videofenster mit Copy-Funktion
  • URL zum Clip - öffnet Formular im Videofenster mit Copy-Funktion

Der Dailymotion Video-Flash-Player

"Bei Dailymotion geht es darum, Videos zu sehen, zu teilen und diese in die heutige Welt des Internets zu integrieren.", lautet es bei Dailymotion dem französischen Video-Portal mit deutschem Ableger. Baut man einen Dailymotion Flash-Video-Player auf der eigenen Website ein, so sieht man eine Funktionsleiste über die weitere Funktionen innerhalb der Video-Anzeige eingeblendet werden können.

  • Großer Play-Button über einem Startbild => wird eingeblendet wenn das Video nicht läuft
  • Großer Pause-Button in der Video-Anzeige => wird eingeblendet wenn das Video gestoppt wird
  • Play/Pause-Button in der Funktionsleiste
  • Rückspul-Button
  • Zeitlaufleiste => bei Mouse-Over blendet der Player ein Zeitzeigerdreieck mit der Zeitangabe ein
  • Lautsprechersymbol => schaltet Ton an/aus
  • ansteigendes Dreick für die Regelung der Lautstärke
  • Icon mit kleinem Käfer => öffnet Formular für Feedback
  • Zeitanzeige => Klick auf die Zeitanzeige schaltet zwischen gelaufener und verbleibender Zeit hin und her
  • Button für Fullscreen-Modus
  • Dailymotion-Logo => Klick bewirkt nichts
  • Menu-Button => öffnet Menu mit Funktionen zur Anzeige (Smooth, Low Definition, Standard Definition), Größe (Original Size, Default Size, Extended Size, Fullscreen) und weiteren Funktionen (Related Videos, URL/Embed-Code, "Share this video", "More Information")
    • Related Videos blendet Cover-Flow ein
    • URL/Embed-Code blendet Link und HTML-Code-Snippet ein
    • More Information blendet Titel, Sternchenwertung, Kurzbeschreibung und Informationen zum Clip ein

Der Brightcove Video-Flash-Player

Brightcove ist eine Internet TV Plattform, die sich auf die Distribution und den Konsum von medialen Video-Inhalten spezialisiert hat. Brightcove will Produzenten und größere Rundfunkanstalten bei der Übertragung im Internet unterstützen. Kurz und knackig behauptet Brightcove: "Most importantly, we give people the freedom to easily find, watch and participate in a broad range of video content—when and where they choose."

Baut man den Brightcove-Video-Flash-Player auf seiner eigenen Website ein, dann sieht man die folgenden Bedienelemente und weitere, wenn man bestimmte Buttons in der Funktionsleiste anklickt. Die Funktionsleiste blendet Brightcove konstant ein.

  • Großer Play-Button mit "Play"-Text => erscheint nur, wenn man den Mauszeiger über die Video-Anzeige fährt
  • "More Videos"-Button => erscheint nur, wenn man den Mauszeiger über die Video-Anzeige fährt
  • Oben rechts wird ein Station-Logo eingeblendet
  • Play/Pause-Button in der Funktionsleiste - bei Mouse-Over wird zusätzlich eine Textblase mit "Play" angezeigt
  • Zeitanzeige mit verbleibender Zeit
  • Zeitanzeige mit restlicher Zeit
  • Zeitbalken => bei Mouse-Over erscheint ein Zeiger-Button um den Videoclip vorzuspulen
  • "email"-Button mit Brief-Icon => blendet Formular zum direkten Versand einer Email ein
  • "get link"-Button mit Ketten-Icon => blendet die URL zum Clip ein
  • "get code"-Button mit Größer/Klein-Zeichen-Icon => blendet HTML-Code zum "embedden" ein
  • Lautsprechersymbol => bei Klick auf das Icon wird ein vertikaler Lautstärkeregler eingeblendet (bei Mouse-Over erscheint eine Sprechblase mit "Open Volume Controls")
  • Logo von Brightcove mit Text "Menu" => das Menu blendet sieben große Icons als Ebene über dem angezeigten Video-Bild an sowieund ein X-Icon zum Schließen
    • Briefumschlag-Icon => Sprechblase mit "Email This"
      • blendet Formular ein, um eine Email an einen Freund zu schicken
    • Kette-Icon => Sprechblase mit "Get Link"
      • blendet URL ein
    • Größer/Klein-Zeichen-Icon => Sprechblase mit "Get Code"
      • blendet HTML-Code fürs "embedden" ein
    • Dokument-mit-Stift-Icon => Sprechblase mit "Blog this"
      • blendet Formular ein über welches man Blogger, Typepad und LiveJournal befeuern kann => zusätzlich wird der Username und das Passwort abgefragt
    • Brightcove-Icon => Sprechblase mit "About"
      • blendet Kurzinformationen über Brightcove ein samt Links
    • Warnschild-mit-Ausrufezeichen-Icon => Sprechblase mit "Report This"
      • verkleinert die Video-Anzeige und blendet Report-Button ein
    • rundes Fragezeichen-Icon => Sprechblase mit "Help"
      • verkleinert die Video-Anzeige und blendet Kurzhilfe ein mit Link auf die Website

Der YouTube Video-Flash-Players

YouTube.com hat in den letzten Jahren die Benutzerführung von Video-Flash-Playern maßgeblich bestimmt. Zur Zeit verpasst YouTube den Trend zu höheren Auflösungen beim Video-Streaming. Zahlreiche artgleiche Video-Portale bieten größere Player mit schärferen Bildern an. Baut man einen Player von YouTube auf seinen eigenen Websites ein, sieht man konstant folgende Komponenten:

  • Play/Pause-Button - im Videofenster, wenn der Clip noch nicht gestartet wurde
  • Play/Pause-Button - in der Funktionsleiste
  • Zeitlaufleiste
  • Zeitanzeige - Bei Klick auf die Zeitanzeige läuft die Zeit vor- oder rückwärts
  • Lautsprechersymbol - Bei Mouse-Over blendet der Player einen vertikalen Lautstärkeregler ein
  • Menu - blendet weitere Funktionen ein
    • URL zum Clip
    • embed-Code
    • Coverflow - bietet weitere Clips an und blendet by Mouse-Over den Titel des jeweiligen Clips ein
    • Playbutton
  • YouTube-Logo
  • Button für Fullscreen - wird nur auf der YouTube-Website

Anmerkungen zum YouTube-Video-Player

Zieht man den Zeiger in der Laufleiste hin und her verändert er sich nicht. Erstaunlich ist, dass der Button für die Fullscreen-Anzeige nur auf der YouTube-Website selbst eingeblendet wird. Baut man den YouTube-Player in einer eigenen Website, erscheinen die Symbole nicht. Der Grund erschließt sich mir nicht wirklich.

Weitere Blogs und Websites zum Thema Flash und HD-Video

Open Source Video Flash Player


Weblogs zum Thema

Als Favorit speichern » AddThis Social Bookmark Button

Kommentare

bin über basicthinking hier reingestolpert. guter artikel bzw. sehr ausführliche beschreibungen. besonders haben mir auch die clips gefallen. sind sehenswert. kannte ich noch nicht alle.

meint: dontyouknowme am 20.02.08

Sehr guter Artikel mit vielen Infos. Wobei mir hier die Struktur bzw. der direkte Vergleichi (tabellarisch oder so..) fehlt.

Und ihr habt die kleine videocommunity.com vergessen... HD-Player inkl.

aber ansonsten: weiter so!!

meint: Uwe am 21.02.08

seh ich auch so: hier fehlt der super Player von videocommunity.com

meint: silverbird am 21.02.08

hallo silverbird und uwe: vielen lieben dank für die tipps. die beiden player schaue ich mir umgehend an :)

meint: mo. am 21.02.08

Kommentar schreiben!

Kommentare:

Klick-Konzept - Essentielles Webdesign