View on GitHub

openHPI Video Player

openHPI Video Player

Der neue openHPI Video Player basiert auf einer Kombination aus Dart und Polymer.

Struktur

Der Videoplayer besteht aus 5 Polymer-Elementen, die jeweils ein eigenes Dart-Skript haben.

video-player.html

Die video-player.html ist unser Hauptelement. Es kann die Attribute autoplay, setProgress, duration, quality, speed und volume übergeben bekommen. Es bekommt außerdem den Content, der beim Erstellen eines Videoplayers angelegt wird, übergeben. Der Content ist der Teil, welcher beim Erstellen des Videoplayer zwischen den Tags und steht. Das können beispielsweise video-stream's sein.

In diesem Polymerelement wird außerdem die Controlbar (video-controlbar) angelegt.

Die passende .dart-Datei verwaltet die Attribute des Video-Players. Diese sind auch über ein Interface nach außen verfügbar (siehe unten). Möchte man beispielsweise über eine andere Dart-Datei Einfluss auf den Video-Player nehmen, kann man dies über die Methoden dieser Datei tun.

Das Starten des Videos kann übrigens auch über eine Fläche über dem Videoplayer passieren:

Overlay

video-stream.html

Die Datei video-stream.html beinhaletet die tatsächlichen Videos. In dieser Datei wird der video-Tag von HTML verwendet. Er bekommt die übergebene Quelle übergeben. Die Quelle kann eine SD-Source und eine HD-Source sein. Dafür stehen die Attribute sd_src und hd_src zur Verfügung. Zwischen diesen Stream kann auch über die Controlbar gewechselt werden.

Bei den Video-Quellen ist es wichtig, dass das Format video/mp4 ist. Andere Formate werden aktuell nicht unterstützt. Außerdem ist es wichtig, dass die Video-Streams keine eigene Controlbar haben, da diese Funktion von einer eigenen Controlbar übernommen wird.

Dem video-stream Tag kann man außerdem auch die URL für das Poster (Attribut: poster) und das Seitenverhältnis (Attribut: ratio, Default: 16:9) übergeben.

Außerdem bekommt dieses Polymer-Element die Untertitel über das Attribut "subtitles" übergeben. Diese bekommt sie in Form eines Links zu einer Datei im WebVTT Format (.vtt). Dieser Link wird dann in das Track Element von HTML eingebunden. Das hat den Vorteil, dass beispielsweise Screenreader damit umgehen können.

Die Dart-Datei dieses Polymer-Elements setzt ausschließlich die übergebene Werte und wird somit von außerhalb gesteuert.

video-controlbar.html

Die video-controlbar.html beinhaltet das Polymerelement video-controlbar. Mit dieser Controlbar lassen sich alle Video-Streams steuern. Man kann ihr die Attribute isPlaying, setProgress, progressIndicator, duration, speed, volume und showSubtitles übergeben. Diese stehen für die Werte der entsprechenden Funktionen.

Wichtig für den Video-Player ist, dass die core-icon's von Polymer eingebunden werden. Dies passiert oben in der Datei über den folgenden Code:

<link rel="import" href="packages/core_elements/av_icons.html">

Diese müssen jedoch auch vorhanden sein.

Außerdem muss die slider-bar eingebunden werden. Dies ist ein weiteres Polymerelement von uns. Damit wird die Progressbar realisiert.

Im Dart-Skript werden die Befehle, die der Benutzer der Controlbar geben, an die Videostreams weitergegeben. Die aktuellen Werte (Lautstärke, Geschwindigkeit, ...) werden hier gespeichert und nach außen hin verfügbar gemacht.

slider-bar.html

Die Sliderbar wird von der Controlbar als Progressbar verwendet. Sie wurde aufgrund des umfangreichen Skriptes in ein eigenes Polymer-Element ausgelagert.

Die Sliderbar beindet eine paper-progressbar ein. Dieses Element wird dargesellt und mit den übergebenen Werten (max, value, opt. secondValue [zB für Buffering Bar], bubbleText) gefüllt. Ist ein bubbleText-Attribut (z.B. bei der ProgressBar) gesetzt, wird bei Ziehen der Bar eine Textblase angezeigt, die beispielsweise die eingestellte Abspielposition anzeigt.

Im Dart-Skirpt werden die Klicks auf diesen Slider abgefangen. Über ein Datenbinding wird der neue Wert an die Controlbar weitergeben.

Die Sliderbar zeigt übrigens auch die aktuelle Position des Cursors innerhalb der Sliderbar an:

Sliderbar

video-thumbnails.html

Über die Video-Thumbnails lassen sich Thumbnails zu den einzelnen Slides einbinden. Ein video-thumbnail nimmt ein Attribut "starttime" (Startzeit des Thumbnails in Sekunden) und "img_src" (Pfad zum Bild) entgegen.

Video-Player einbinden

Der Video-Player lässt sich wie jedes HTML-Element einbinden.

<video-player>
  <video-stream
    poster="{poster-url}"
    sd_src="{video-url}"
    subtitles="{subtitles-url}">
  </video-stream>
  <video-stream
    poster="{poster-url}"
    sd_src="{video-url}"
    hd_src="{hd-video-url}"
    ratio="4:3">
  </video-stream>
  <video-thumbnail img_src="{thumbnail-url}" starttime="{x}"></video-thumbnail>
  <video-thumbnail img_src="{thumbnail-url}" starttime="{x}"></video-thumbnail>
  <video-thumbnail img_src="{thumbnail-url}" starttime="{x}"></video-thumbnail>
  <video-thumbnail img_src="{thumbnail-url}" starttime="{x}"></video-thumbnail>
  <video-thumbnail img_src="{thumbnail-url}" starttime="{x}"></video-thumbnail>
</video-player>

Es sind also mehrere verschachtelte HTML-Tags. Jedes Tag steht für eines unser Polymer-Elemente. Wichtig ist, dass die Controlbar nicht eingebunden werden muss. Diese ist automatisch vorhanden.

Beispiele

Der Videoplayer kann verschieden konfiguriert werden. Wir zeigen hier einige Beispiele.

Single-Stream

Single Stream Example

<video-player>
  <video-stream
    poster="{poster-url}"
    sd_src="{video-url}" 
    ratio="16:9">
  </video-stream>
</video-player>

Dual-Stream

Dual Stream Example

<video-player>
  <video-stream
    poster="{poster-url}"
    sd_src="{video-url}">
  </video-stream>
  <video-stream
    poster="{poster-url}"
    sd_src="{video-url}"
    hd_src="{hd-video-url}"
    ratio="4:3">
    </video-stream>
</video-player>

Mit Untertiteln

Dual Stream With Subtitles Example

<video-player id="player" showSubtitles>
  <video-stream
    poster="{poster-url}"
    sd_src="{video-url}"
    subtitles="{subtitles-url}">
  </video-stream>
  <video-stream
    poster="{poster-url}"
    sd_src="{sd-video-url}"
    hd_src="{hd-video-url}"
    ratio="4:3">
  </video-stream>
</video-player>

Mit Thumbnails

Thumnails sind ein weiteres custom Polymer-Element, sie können einfach nach folgendem Muster nach den video-streams eingefügt werden. Die starttime wird in Sekunden angegeben. Dual Stream With Thumbnails Example

<video-player id="player">
  <video-stream
    poster="https://i.vimeocdn.com/video/487220623_640.jpg"
    sd_src="https://player.vimeo.com/external/104624360.sd.mp4?s=a7a41026f4c356cc46de876e3e6072af&amp;download=1">
  </video-stream>
  <video-stream
    poster="https://i.vimeocdn.com/video/487308935_960.jpg"
    sd_src="https://player.vimeo.com/external/104693395.sd.mp4?s=06ac8490cbac4ce54ea154fbcc6e930c&amp;download=1"
    hd_src="https://player.vimeo.com/external/104693395.hd.mp4?s=58b93a8179c01c66fb3e33adf5b3e064&amp;download=1"
    ratio="4:3">
  </video-stream>
  <video-thumbnail img_src="thumbnails/125.jpg" starttime="5"></video-thumbnail>
  <video-thumbnail img_src="thumbnails/1850.jpg" starttime="74"></video-thumbnail>
  <video-thumbnail img_src="thumbnails/3425.jpg" starttime="137"></video-thumbnail>
  <video-thumbnail img_src="thumbnails/4300.jpg" starttime="172"></video-thumbnail>
  <video-thumbnail img_src="thumbnails/5100.jpg" starttime="204"></video-thumbnail>
  <video-thumbnail img_src="thumbnails/13275.jpg" starttime="531"></video-thumbnail>
  <video-thumbnail img_src="thumbnails/13625.jpg" starttime="545"></video-thumbnail>
  <video-thumbnail img_src="thumbnails/20075.jpg" starttime="803"></video-thumbnail>
  <video-thumbnail img_src="thumbnails/26925.jpg" starttime="1077"></video-thumbnail>
</video-player>

API

Attribute

Mit diesen Attributen kann das video-player-Element direkt beim Einbinden angepasst werden.

autoplay (ohne Wert): Lässt das Video sofort starten

progress="{int sekunden}": Lässt das Video an einer bestimmten Stelle starten. Reflectable (Kann wieder ausgelesen werden, z.B. um die aktuelle Abspielposition festzustellen.)

duration="{int sekunden}": Optional zur Anzeige der Videodauer, bevor die Videos geladen sind

speed="{double speed}": Abspielgeschwindigkeit. Reflectable

quality="{hd|sd}": Initiale Videoqualität

volume="{int volume [0, 100]}": Lautstärke zwischen 0 und 100. Reflectable

showSubtitles (ohne Wert): Initial Untertitel anzeigen. Reflectable

Browserkompatibilität

Nur aktuellere Chrome-Versionen, die bereits Webcomponents unterstützen. Theoretisch auch aktuelle Versionen von Firefox, Opera, IE, dazu wären aber noch eine tiefgehende Beschäftigung mit der genauen Arbeitsweise der Polyfills und entsprechende Anpassungen nötig. Dieser Aufwand hätte den Projektrahmen gesprengt.