HbbTV für Anwendungs-Entwickler – Teil 2

Was unterscheidet eigentlich eine HbbTV-konforme Webseite von einer normalen Webseite? Nachdem wir nun wissen, was eine HbbTV-Anwendung ist und welche Arten es gibt, geht es jetzt um die Details: Welchen Content-Type haben HbbTV-Anwendungen? Wie kann ich auf Events der Fernbedienung zugreifen?

HbbTV-Anwendung: Webseite mit gewissen Regeln

Bei HbbTV-Anwendungen handelt es sich technisch gesehen um HTML Seiten. JavaScript wird weitgehend unterstützt, somit ist es möglich Bibliotheken wie jQuery einzusetzten. Welche HTML-, CSS-, JavaScript- und DOM-Elemente tatsächlich verfügbar sind, kann im DAE Reference Guide [Ref Guide 1.0] nachgeschlagen werden. Die Unterstützung für HTML5 ist in Planung. Flash wird nicht unterstützt.

HbbTV 1.1.1 Seite 48 - Graphic Safe Area

Einer HbbTV-Anwendung steht eine feste Größe von 1280px * 720px zur Verfügung. Beachtet man die Safe Area, das ist der Bereich, der garantiert auf dem Fernseher dargestellt wird, bleiben noch 1024 * 648 Pixel.

Bei Broadcast Related Applications kann zusätzlich auf die Broadcastinformationen zugegriffen und darauf reagiert werden, z.B. auf die EIT p/f (Event Information Table present / future = Informationen zur aktuellen und folgenden Sendung). Es gibt die Möglichkeit die Anwendungen über Broadcast (DVB) oder Broadband (Internet) zu laden. In der Regel werden sowohl Broadcast Related, als auch Broadcast Independent Applications über das Internet geladen, da die Datenmengen den Broadcast zu sehr auslasten würden. Lediglich die Red Button- und die HD Teletext Anwendungen werden mit dem TV-Signal mitgeliefert.

Systems Overview

HbbTV 1.1.1 Seite 12 – Systems Overview

Wie funktioniert HbbTV und der Red Button?

Um HbbTV-Anwendungen nutzen zu können, ist ein HbbTV-fähiges Empfangsgerät notwendig, welches sowohl mit einem TV-Signal (DVB-S, DVB-C oder DVB-T) verbunden, als auch an das Internet angeschlossen ist. Auf dem Empfangsgerät ist eine Laufzeitumgebung installiert, um die HbbTV-Anwendung ausführen und darstellen zu können [HbbTV 1.1.1, Kapitel 7.2.5].

Diese Laufzeitumgebung enthält:

  • Browser: Der Browser hat Zugriff auf einen Media Player und ist für die Ausführung und Darstellung der Anwendungen verantwortlich.
  • Application Manager:  Der Application Manager wertet die mit dem Broadcast mitgesandte AIT (Application Information Table) aus und überwacht den Lebenszyklus der Anwendungen.

Mit dem TV-Signal, das über Satellit, Kabel oder terrestrisch ausgestrahlt wird, werden zusätzliche Informationen mitgesendet:

  • Das eigentliche Fernsehprogramm (linearer Broadcast – A/V Content)
  • AIT (Application Information Table):
    • Sie wird vom Application Manager  in dem Empfänger ausgelesen.
    • Sie enthält eine URL auf die Anwendung, die aus dem Internet geladen und vom internen Browser dargestellt werden soll, wenn der Red Button der Fernbedienung gedrückt wird.
  • Weitere Daten wie das DSMCC Carousel (Digital Storage Media – Controll and Command, dem einen oder anderen noch bekannt von MHP), welches Stream Events und Anwendungsdaten enthält [HbbTV 1.1.1, Kapitel 4.2.3, 7.2.5, 8.2.1]

Das Red Button Angebot ist jedoch nicht flächendeckend verfügbar und unterscheidet sich in den verschiedenen Übertragungswegen. Beispielsweise wird über Satellit bei deutlich mehr TV-Sendern ein Red Button signalisiert, als über Kabel.

Darstellungsebenen

HbbTV 1.1.1 Seite 46 – Logical Plane Model

Ein Fernseher hat mehrere Ebenen zur Darstellung verschiedener Informationen zur Verfügung. Auf HbbTV-Endgeräten wird die HbbTV-Anwendung auf der „Hybrid Broadcast Broadband TV application graphic plane“ Ebene angezeigt. Es besteht die Möglichkeit den Broadcast (Video Plane) in die HbbTV-Anwendung einzubetten oder auch eine, zum Teil transparente HbbTV-Anwendung, über die laufende Sendung einzublenden, z.B. einen Ticker mit laufend aktualisierten Informationen oder Dolmetscher für Gebärdensprache.  Vor der eigentlichen HbbTV-Anwendung liegt nur noch die Ebene zur Darstellung gerätespezifischer Informationen, wie z.B. Feedback zur Lautstärkeregelung.

_________________________________________________________________________________________________

“Hello HbbTV”

Es folgen nun einige kurze Code-Beispiele, welche charakteristisch sind für eine HbbTV Anwendung. Ein “Hello World” Beispiel kann am Ende des dritten Teils runtergeladen werden.

Mimetype

Um HTML Seiten mit HbbTV Mimetype darzustellen oder URLs mit der Endungen “cehmtl ” zu unterstützen, kann z.B. beim Apache Webserver das “mime.type”-file wie  folgt erweitert werden:

# MIME type                                     Extensions
application/ce-html+xml                         .cehtml
application/vnd.hbbtv.xhtml+xml                 .html
Doctype

Der Doctype einer Anwendung kann auch auf HbbTV gesetzt werden [HbbTV 1.1.1, Kapitel A.2.6.2], es genügt aber Strict XHTML doctype oder Transitional XHTML doctype zu verwenden:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//HbbTV//1.1.1//EN" "<a href="http://www.hbbtv.org/dtd/HbbTV-1.1.1.dtd">http://www.hbbtv.org/dtd/HbbTV-1.1.1.dtd</a>">
<html xmlns="http://www.w3.org/1999/xhtml">
Contenttype

Je nach anfragendem User Agent, kann ein anderer Contenttype gesetzt werden. Die meisten Seiten machen jedoch keine Unterscheidung der verschiedenen User Agents,  beispielsweise aus Caching-Gründen,  und setzten daher den Contenttype immer auf HbbTV.

// Anfrage HbbTV User-Agent: "HbbTV/1.1."1, liefert als Content Type:
application/vnd.hbbtv.xhtml+xml; charset="utf-8"; width=1280; height=720

// Anfrage CE-HTML User-Agent: CE-HTML, liefert als Content Type:
application/ce-html+xml; charset="utf-8"; width=1280; height=720

// Anfrage sonstiger User-Agents: "Firefox/4.0.1", liefert als Content Type:
application/xhtml+xml; charset="utf-8"; width=1280; height=720

OIPF DAE Application Manager API

Der Application Manager ist dafür verantwortlich die AIT auszuwerten und den Lebenszyklus der Anwendung zu überwachen.

HTML:

Zunächst ist es notwendig am Anfang des <body>-Elements den Application Manager [DAE 1.1, Kapitel 7.2] zu definieren, damit dieser den Lebenszyklus der Anwendung überwachen kann:

<body>
    <div style="visibility: hidden; display: none;">
        <object type="application/oipfApplicationManager" id="applicationManager" style="position:absolute; left:0px; top:0px; width:0px; height:0px;"></object>
        <object type="application/oipfConfiguration" id="configuration" style="position:absolute; left:0px; top:0px; width:0px; height:0px;">  </object>
    </div>
...
</body>
JavaScript:

Eine HbbTV-Anwendung wird mit der Methode createApplication aus der Applications Management API gestartet [DAE 1.1,  Kapitel 7.2.2.2]. Hierbei gibt es zwei Möglichkeiten:

  • Broadcast Related Application starten (mit der DVB-URL kann direkt auf das DSM-CC und Events des aktuellen Broadcasts zugegriffen werden): createApplication(“dvb://current.ait/organizationID.appID?parameter”, false);
    •  OrganizationID: ID einer registrierten Organisation wie ARD
    •  appID: ID der HbbTV-Anwendung dieser Organisation
  •  Broadcast Independent Application starten (mit der HTTP-URL besteht keine Verbindung zum aktuellen Broadcast):
    createApplication(“http://www.eine-url.de”, false);

Zunächst holt man sich den applicationManager und die aktuelle Anwendung um sie mit createApplication [DAE1.1, Seite 61] verfügbar zu machen. Im Falle einer Broadcast Independent Application würde statt der „dvb-URL“ eine „http-URL“ eingesetzt werden:

var appManager = document.getElementById("applicationManager");
var currentApp = appManager.getOwnerApplication(document);
var hbbtvApp = currentApp.createApplication("dvb://current.ait/organizationID.appID?parameter", false);

Wenn der User den definierten Knopf seiner Fernbedienung drückt, bei Broadcast Related Apps den Red Button, dann wird die Anwendung mit show() angezeigt und mit hide() [DAE1.1, Seite 60] wieder ausgeblendet:

hbbtvApp.show();
hbbtvApp.hide();

Mit destroyApplication() [DAE1.1, Seite 62] wird die Anwendung wieder beendet, z.B. wenn User den Kanal wechselt oder “Exit” drückt. Bei einer Broadcast Related Application  wird nun wieder der Broadcast angezeigt:

hbbtvApp.destroyApplication();

Hinweis: Es gibt eine JavaScript-Library vom Institut für Rundfunktechnik, kurz IRT (hbbtvlib.js) um den Umgang mit dem Application Manager zu erleichtern.

Die Fernbedienung

Die Knöpfe der Fernbedienung werden teilweise doppelt belegt und müssen somit von der Anwendung angefordert und nach Beenden wieder freigegeben werden, damit sie wieder vollständig dem Empfangsgerät zur Verfügung stehen.

Keys registrieren und freigeben

Keys der Fernbedienung können einzeln oder auch gruppenweise registriert werden (weitere Informationen zu der „KeySet class“ [DAE 1.1, Kapitel 7.2.5]). Nachfolgend werden diese einzelnen und gruppierten Keys registriert:

  • remoteControlKeys.RED: der Red Button
  • remoteControlKeys.NAVIGATION: die Pfeil-, Zurück und Bestätigungstasten
  • remoteControlKeys.VCR: die “Video Cassette Recording” Tasten, wie Play, Pause, Stopp
// Keyset-Objekt wird in der Variablen remoteControlKeys gespeichert
var remoteControlKeys = hbbtvApp.privateData.keyset;
// Die benötigten Keys warden angefordert
remoteControlKeys.setValue(remoteControlKeys.RED + remoteControlKeys.NAVIGATION + remoteControlKeys.VCR);

Nach Beenden der Anwendung müssen die Keys wieder freigeben und es darf nur noch der Red Button registriert werden:

remoteControlKeys.setValue(remoteControlKeys.RED);
Keyevents

KeyEvents, die der User auslöst, können wie folgt abgeprüft werden:

function handleKeyCodes (e) {
    switch (e.keyCode) {
        case  e.VK_PLAY: // e oder KeyEvent
            video.play(1);
        case KeyEvent.VK_PAUSE:
            video.play(0);
...
    }
}

Eine gängige Praxis ist es ein separates JS-File mit den verschiedenen Keycodes anzulegen, um auf verschiedenen Eingabegeräte auf die Events reagieren zu können, z.B. entspricht “116” der F5-Taste einer herkömmlichen Tastatur und “403” der Roten Taste auf Standardfernbedienungen, beispielsweise wenn HbbTV von dem Gerät noch nicht voll unterstützt wird:

...
var VK_RED      = KeyEvent.VK_RED || 403 || 116;
var VK_GREEN    = KeyEvent.VK_GREEN || 404 || 117;
var VK_YELLOW   = KeyEvent.VK_YELLOW || 405 || 118;
var VK_BLUE     = KeyEvent.VK_BLUE || 406 || 119;
...

Ausblick

Wir haben nun einen kleinen technischen Einblilck in die HbbTV-Entwicklung bekommen. Im letzten Teil geht es darum wie folgende Punkte umgesetzt werden können:

  • Die Navigation
  • Die Videointegration
  • Verschiedene Möglichkeiten eine HbbTV-Anwendung zu testen
  • Und welche Tools und Geräte hier zum Einsatz kommen

Wichtige Dokumente und weiterführende Links

HbbTV für Anwendungs-Entwickler – Teil 2, 4.0 out of 5 based on 1 rating

Tags: , , ,

Kommentare


von Bernd
8.4.2012

Danke für diese Übersicht nutze seit Monaten die videoweb Tv Box und bin von hbbtv überzeugt


von Bernd
8.4.2012

Danke mit ihrem Artikel konnte ich einige Kollegen von hbbtv ce-html überzeugen ….
Hoffe sie bleiben dran und können noch mehr über hbbtv veröffentlichen

http://www.infosat.de/Meldungen/?msgID=67271

Info-Digital
Erweiterter HbbTV-Standard: HbbTV-Konsortium veröffentlicht Spezifikation 1.5
04.04.2012
Das HbbTV-Konsortium hat am 4. April die Veröffentlichung der HbbTV-Spezifikation Version 1.5 bekannt gegeben. Auf Basis existierender Standards und Internettechnologien bietet der HbbTV-Standard viele Funktionen, um Rundfunk- und Internet-Dienste auf TV-Geräten darzustellen. Neu in der Version 1.5 ist die Unterstützung von adaptivem HTTP-Streaming auf Basis der kürzlich verabschiedeten MPEG-DASH-Spezifikation (Dynamic Adaptive Streaming over HTTP).
Anzeige

Verbesserte Bildqualität bei niedrigen Internetdatenraten
Damit lässt sich die Bildqualität besonders bei niedrigen Internetdatenraten verbessern, teilte das Institut für Rundfunkttechnik (IRT) mit. Ebenso ermöglicht der HbbTV-Standard ab sofort den Einsatz von verschiedenen Systemen für Rechtemanagement basierend auf der MPEG CENC-Spezifikation (Common Encryption). Ein großer Vorteil für Märkte, in denen mehr als ein DRM-System eingesetzt wird.
Sieben-Tage-EPG über Broadcast-Signal
Die Version 1.5 verbessert auch den Zugriff auf die Programmvorschaudaten. Ein Sieben-Tage-EPG kann jetzt aus dem Broadcast-Signal heraus einheitlich für alle HbbTV-Empfänger automatisch generiert werden – auch für solche, die nicht an das Internet angeschlossen sind. Diese Ergänzung geht zurück auf eine Anforderung des HD-Forums in Frankreich für den dort im terrestrischen Fernsehen eingesetzten Standard TNT 2.0.
Vier neue Mitglieder in HbbTV Steering Group gewählt
Seit der Öffnung für neue Mitglieder im Mai 2011 ist das HbbTV-Konsortium inzwischen auf über 60 Mitglieder angewachsen. Um die Interessen aller Marktpartner breiter zu repräsentieren, wurden in der aktuellen Mitgliederversammlung vier neue Mitglieder in die Steering Group des Konsortiums gewählt. Damit ergänzen jetzt Abertis Telecom, Digital TV Labs, Opera Software und RTL Group die bereits bestehenden Vertreter von ANT Software Limited, EBU, France Télévisions, Institut für Rundfunktechnik GmbH, Nagra, TP Vision, Samsung, SES Astra, Sony Corporation und Television Francaise 1 – TF1.
10. Interoperabilitätsworkshop des HbbTV-Konsortiums beim IRT
Im Mai 2012 findet der 10. Interoperabilitätsworkshop des HbbTV-Konsortiums in den Räumen des Instituts für Rundfunktechnik in München statt. Die Veranstaltung wird abermals das große Interesse der Hersteller von Connected-TVs und Set-Top-Boxen in einem rasant wachsenden HbbTV-Markt deutlich machen. Klaus Illgner-Fehns, Vorsitzender des HbbTV-Konsortiums sagt: „Die Veröffentlichung der Version 1.5 der HbbTV-Spezifikation ist die Antwort auf die große Nachfrage nach neuen Funktionen, die jetzt schnell benötigt werden. Die Arbeit an der Version 2.0 wird demnächst beginnen. Ich freue mich, die neuen Mitglieder in der Steering Group begrüßen zu dürfen und bin sehr zuversichtlich gemeinsam mit ihnen die Zukunft des Konsortiums zu gestalten“.
Hybrid Broadcast Broadband TV oder „HbbTV” wurde von einem Konsortium führender Unternehmen der europäischen Fernsehindustrie entwickelt, um die Verbreitung von Nachrichten-, Informations- und Unterhaltungsangeboten für Konsumenten über Rundfunk und Breitbandnetze mittels Set-Top-Boxen und Fernsehgeräte, die mit einem zusätzlichen Internetanschluss ausgestattet sind, zu vereinheitlichen. Die dabei verwendete Technik orientiert sich an marktüblichen Standards und Internet-Technologien von Open IPTV Forum (OIPF), Consumer Electronic Association (CEA), Digital Video Broadcasting (DVB) und World Wide Web Consortium (W3C).
http://www.hbbtv.org
http://www.irt.de
Dies ist eine Meldung aus unserem digitalen Nachrichtendienst „Digitalmagazin“.
Alle Informationen und Abonnements und Preisen finden Sie unter http://www.digitalmagazin.info.


von Sophia Schäfer
17.4.2012

Hallo Bernd,

danke für die Info zur Version 1.5.

Sophia


von Sophia Schäfer
24.4.2012

Ich habe eben einen interessanten Artikel zu “Navigation am Fernsehgerät – Usability und HbbTV” entdeckt: http://www.usabilityblog.de/2012/04/navigation-am-fernsehgerat-usability-und-hbbtv/


von Fong_Sai_Yuk
23.7.2012

Danke für den interessanten Arktikel.

Eine weitere Info, die Entwicklern von TV Apps helfen könnte:

VK_BACK sollte in den Anwendungen nicht verwendet werden.
Alle namenhaften Hersteller (Philips, Loewe …) haben ihre BACK Taste der Fernbedienung auf den keycode 8 gelegt und lösen VK_BACK_SPACE und dann auch VK_BACK aus, um im Browser auf die letzte Seite zurück zu gehen.

Die Webseite der Net TV Alliance (Philips, LG, Sharp) sagt dazu in ihren FAQs (unter Common coding issues):
“You are not allowed to use e.preventDefault for handling VK_BACK in the homepage of your App. At all times, pressing the back key from App homepage should always send the page back to the Net TV Homescreen.”

Da die meisten ihre Apps auf diesen Geräten funktionieren möchten, wird in allen Apps die ich gesehen habe an den Standards (OIPF, ETSI) vorbeiprogrammiert.

Habe ich leider selber erst in der Praxis gelernt, als die Auftraggeber meiner App sich beschwert haben, dass meine Rückkehrfunktion nicht so funktionert wie sie wollten. Mein Einwand, dass ich die Standards eingehalten haben, war denen natürlich egal


von Luke
11.9.2012

Fong_Sai_Yuk : Do you know how to implement a back button which returns to the Net TV Homescreen without using VK_BACK?

Kommentar schreiben:

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


− 4 = zwei

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>