HbbTV für Anwendungs-Entwickler – Teil 3

In den ersten beiden Teilen dieser kleinen Serie habe ich erklärt, welche Arten von HbbTV-Anwendungen es gibt  [HbbTV für Anwendungs-Entwickler – Teil1] und wie diese technisch aussehen [HbbTV für Anwendungs-Entwickler – Teil2].

Jetzt ist noch interessant, wie die Navigation und Videointegration umgesetzt werden können und natürlich wie man als Entwickler eine HbbTV-App testen kann. Darum geht es im dritten und letzten Teil der Serie. Als Abschluss dieser Reihe gibt es eine Beispiel-HbbTV-App zum Download!

Navigation mit CSS§

Navigation mit CSS3

Das Standardverhalten der Navigation (auch Spatial Navigation) springt alle Links in der Reihenfolge ihres Auftretens an. Dieses Verhalten kann mit CSS3 beeinflusst werden. Das ist bei TV-Apps besonders wichtig, da auf Navigationstasten der Fernbedienung reagiert werden muss. Entsprechend dem aktuell aktiven Navigationselement wird ein vordefinierter Punkt angesprungen und somit ist es auch möglich Navigationselemente zu überspringen.

Dies kann entweder direkt im HTML definiert werden:

<a id="playPause" href="...">
 <img id="img_playPause" style="nav-down: #playPause; nav-up: #home; nav-right: #stop;" src="img_playPause" alt="" />
</a>
<a id="stop" href="...">
 <img id="img_stop" style="nav-down: #stop; nav-up: #home; nav-left: #playPause; nav-right: #fullScreen;" src="img_stop" alt="" />
</a>
<a id="fullScreen" href="...">
 <img id="img_fullscreen" style="nav-down: #fullScreen; nav-up: #lang; nav-left: #stop;" src="img_fullscreen" alt="" />
</a>

Oder im CSS:

#playPause {
 nav-up:#home;
 nav-right:#stop;
 nav-left:#fullscreen;
}
#stop {
 nav-up:#home;
 nav-right:#fullscreen;
 nav-left:#playPause;
}
...

So hat man eine flexible Möglichkeit, um die Steuerelemente mit der Fernbedienung anzusteuern. Zumal diese Attribute auch mittels JavaScript beeinflusst werden können.

Das Video-Object

Die Hauptaufgabe des Fernsehers wird immer das Darstellen von Filmen und Videos sein. Diese können klassisch über das Broadcastsignal kommen, von einer DVD oder jetzt auch über das Internet. So ist es nicht verwunderlich, dass in den meisten Fällen das Abspielen von Videos zentraler Bestandteil einer HbbTV-Anwendung ist. Es wird zwischen dem Video/Broadcast-Object [DAE 1.1, Kapitel 7.13] aus dem live Fernsehsignal und dem Audio/Video-Object [CAE-2014-A, Kapitel 5.7], das über das Internet zugänglich gemacht wird, unterschieden. Auf ersteres kann die HbbTV-Anwendung zugreifen und somit in die Anwendung integrieren. Das Video/Broadcast-Object darf bis auf ¼ seiner Größe skaliert werden, was 320px * 180px entspricht [HbbTV 1.1.1, Seite 51]. So kann die eigentliche TV-Sendung in die HbbTV-App integriert werden und der Anwender kann das Live-Programm verfolgen, während die HbbTV-Anwendung zusätzliche Informationen anbietet. Für die Video- und Audio-Dokumente wird kein spezielles Streaming-Protokoll, sondern HTTP/1.1 eingesetzt [HbbTV 1.1.1, Kapitel 7.3.2]. Bevorzugte Formate sind:

  • Video: H.264/MPEG-4 AVC
  • Audio: MPEG-1 Audio Layer 3 (MP3)

Die folgenden Beispiele werden anhand eines Videos dargestellt.

HTML

Im <body>-Element der HbbTV-Anwendung wird das Video über ein <object>-Element eingebunden. Als data wird ihm die Streaming-URL des Videos mitgegeben:

<object id="video" type="video/mp4" style="width:720px; height:405px;">
 <param name="data" value="http://streamURL.mp4" />
</object>

JavaScript

Der aktuelle Status des Videos kann mit playState [CEA-2014-A, Seite 60], [DAE 1.1, Kapitel 7.14.1.1] abgefragt werden:

var playState = video.playState;
switch (playState) {
    case 0: // stopped
    case 1: // playing
    case 2: // paused
    case 3: // connecting
    case 4: // buffering
    case 5: // finished
    case 6: // error à verschiedene Errorcodes [DAE 1.1, Seite 263]
}

Nun kann auf die Nutzereingaben reagiert und das Video abgespielt (play(1)), pausiert (play(0)) oder gestoppt (stop()) werden [CEA-2014-A, Seite 61], [HbbTV 1.1.1, Kapitel 9.1.1.3]:

var video = document.getElementById('video');
// video abspielen
video.play(1);
// pause
video.play(0);
// video stoppen
video.stop();

Die aktuelle Playposition des Videos wird wie folgt abgefragt oder gesetzt [CEA-2014-A, Seite 60], [HbbTV 1.1.1, Kapitel 9.1.1.3]:

// aktuelle play positon im video
var currentPlayPosition =  video.playPosition;
// komplette Länge abfragen
var duration = video.playTime;
// seek: setzt die aktuelle play position auf die neue --> 10000 = 10000 10sek später
video.seek(currentPlayPosition + 10000);

HbbTV Browser und Geräte

Zunächst wird man die Seite direkt auf seinem PC entwickeln und auch testen, die Feinheiten werden dann später direkt auf den einzelnen Geräten überprüft. Die Gerätehersteller sind selbst daran interessiert, dass die Anwendungen auf ihren Geräten fehlerfrei dargestellt werden. Wir haben dafür mit einigen bekannten Herstellern eine Kooperation und können so auf deren zur Verfügung gestellten Geräten testen.

Auf welchen Geräten sollte getestet werden? Zum einen ist es kaum möglich alle Geräte vor Ort zu haben, zum anderen ist der Zeitaufwand auf jedem Gerät zu testen enorm. So hat sich bei uns über die Jahre ein Best-Practice für das Testen herauskristallisiert.

Auf den HbbTV-Geräten kann zwischen vier verschiedenen Browsern unterschieden werden:

  • Opera
  • ANT Galio
  • Access
  • verschiedene auf WebKit basierende Entwicklungen

Hier eine Liste der Testgeräte, mit denen wir gute Erfahrungen gemacht haben:

Gerät Browser User Agent Freie URLs abrufbar
Philips Net TV Opera CE-HTML/1.0 Ja
VideoWeb TV Opera HbbTV/1.1.1 Ja
Technisat DIGIT ISIO S1 Opera HbbTV/1.1.1 Ja
Humax iCord HD+ ANT Galio / seit Dez. 2011 Opera CEHTML/1.0 & HbbTV/1.1.1 Ja
Video 600S ANT Galio HbbTV/1.1.1 Ja
Vestel STB Access NetFront ?? Ja
Volksbox Webedition AppleWebKit HbbTV/1.1.1 & CE-HTML/1.0 Ja
LG Smart TV NetCast (WebKit based) HbbTV/1.1.1 & KHTML Nein
Samsung Smart TV Maple / ab 2012 WebKit based HbbTV/1.1.1 & KHTML Nein

Testgeräte bei Sybit

Es macht Sinn zumindest für jeden der vier „Haupt-Browser“ ein Gerät zum Testen zu haben. Für die Entwicklung können folgende PC-Browser eingesetzt werden:

Browser Webseite Sonstiges
Access NetFront NetFront Browser HbbTV Edition  Anfrage beim Hersteller nötig
Ant Galio ANT Galio Browser  Anfrage beim Hersteller nötig
Opera TV Emulator Opera TV Emulator
Opera PC Browser Opera Tastatur ist oft mit folgenden Keys belegt: F5 = VK_RED,  F6 = VK_GREEN, F7 = VK_YELLOW, F8 = VK_BLUE, Arrow-Keys
Firefox PC Browser Firefox
Nützliche Plugins:

Tastatur ist oft mit folgenden Keys belegt: F5 = VK_RED,  F6 = VK_GREEN, F7 = VK_YELLOW, F8 = VK_BLUE, Arrow-Keys
User Agent umstellen auf: HbbTV/1.1.1

HbbTV (fähige) Browser

Fazit

Wir haben nun einen ganz guten technischen Überblick erhalten, was HbbTV ist, wie entwickelt wird und wie es eingesetzt werden kann.

Ein  Beispiel mit den hier vorgestellten Merkmalen einer HbbTV-Anwendung kann hier heruntergeladen werden. Mit HbbTV entstehen nun eine ganze Reihe an neuen (und bekannten) Möglichkeiten:

  • HD Teletext
  • Videotheken / Catch Up TV
  • TV- und Kinotrailer
  • EPG in die Vergangenheit (in Verbindung mit Catch Up TV) und Zukunft (mit zusätzlichem TV-Trailer)
  • VOD
  • Paid Content und Services
  • Interaktives Quiz
  • Vielfältigkeit der Werbung: individuell, zusätzliche Informationen, Trailer, Call-to-Action über den Red Button
  • Shops: können aus dem Portal des internetfähigen Gerätes, über einen Shop-Kanal oder über Werbung gestartet werden
  • Media Server: auf Filme, Fotos und Musik auf seinem eigenen PC über das Heimnetzwerk zugreifen

In Zukunft wird immer mehr der Inhalt dem Nutzer folgen, d.h. im Wohnzimmer wird der Inhalt auf dem Fernseher konsumiert und kann dann unterwegs auf dem Smartphone oder Tablet weiterverfolgt werden.

Wichtige Dokumente und weiterführende Links

Titlebild: http://www.flickr.com/photos/62337512@N00/2749561795/

HbbTV für Anwendungs-Entwickler – Teil 3, 4.0 out of 5 based on 6 ratings

Tags: , ,

Kommentare


von Sebastian
29.11.2012

Interessanter Artikel, vielen Dank.

Wie ist denn das Testvorgehen auf Samsung SmartTV? Wie Sie oben auch geschrieben haben, ist es nicht möglich eine URL direkt aufzurufen. Wie also dann?

VG Seb


von Tom
25.7.2013

Sehr interessanter Beitrag. Würde gerne mehr erfahren und selber ausprobieren.
Gruß Tom


von Sophia Schäfer
5.8.2013

Hallo Tom,

danke. Zum Ausprobieren und Testen ohne entsprechendes Endgerät empfehle ich das Firefox Add On “Firehbbtv” http://tum-iptv.aw.atosorigin.com/firehbbtv/index.php

Viele Grüße
Sophia

Kommentar schreiben:

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *


fünf + 7 =

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>