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
- [HbbTV 1.1.1] ETSI TS 102 796 – V1.1.1 – Hybrid Broadcast Broadband TV
- [CEA-2014-A] CEA Standard: Web4CE
- [DVB 1.1.1] ETSI TS 102 809 – V1.1.1 – Digital Video Broadcasting (DVB)
- [DAE 1.1] OIPF-T1-R1-Specification-Volume-5-Declarative-Application-Environment
- [Ref Guide 1.0] OIPF-T2-R1_DAE_Reference_Guide
- Vorschau auf HbbTV 1.5
- Präsentation K. Merkel (IRT) HbbTV – Status und Ausblick
- Facit-Digital Studie: Erfolgsfaktoren von Smart TV bzw. Facit-Digital Studien
- Master Thesis von Andreas Wickert: Hybrid-TV 2.0: Die nächste Stufe der Konvergenz von Internet und TV
- Diplomarbeit von Jonathan Ohana: Building of an HbbTV demonstrator
- Opencaster User Manual
- Interessanter Artikel zu Usability und HbbTV von Sven Hoffman
- Kleines HbbTV Beispiel:
Titlebild: http://www.flickr.com/photos/62337512@N00/2749561795/
HbbTV für Anwendungs-Entwickler – Teil 3,
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