Tutorials

Common mistakes to avoid

This section starts collecting typical pitfalls when developing HbbTV applications. New issues can be added to the tracker to and will be published on this page.

TRACKER

1. DOM element rendering with display:none

HbbTV applications cannot rely on any specific behaviour for objects where CSS display is set to “none”. Some HbbTV implementations will not initialise these objects while others will. Setting CSS display to “none” in an HbbTV application should be considered an error in the application. 

2. Missing CORB support

Many devices do not implement CORB properly and allow requests that should be blocked.

The HTML5 browser in an HbbTV device is typically derived from a desktop browser version between 2 and 4 years old. This results in new web security features starting to appear in HbbTV devices ahead of any requirement in the specification. If something fails on a desktop browser due to a new web security feature, developers should expect it to also fail in some HbbTV TV sets. 

One example of this is Cross-Origin Read Blocking (CORB, see HbbTV A.3.14) which will be enforced on some TV sets but not on others. 

3. Using new web technologies when not necessary

Many HbbTV TV sets in consumer’s home will be 4-6 years old and will probably include browsers at least 2 years older than that. You can refer to caniuse to see when a particular feature was widely implemented in desktop browsers.

In order for an app to reach the largest number of consumers, developers should be cautious in their choice of web technologies, sticking to CSS2. Avoiding CSS3 (e.g. not using features like flexbox) and limiting themselves to ES3 is encouraged. Some technologies may have polyfills to bridge the gap between a modern app and an older browser.

4. Not explicitly stopping broadcast video before playing broadband

HbbTV applications wanting to play broadband video with the HTML5 video element need to explicitly ensure that any broadcast video that might already be in progress is stopped. Some implementations (mistakenly) stop broadcast video when not done explicitly which is the opposite of what is required.

Some applications assume this mistaken behaviour and fail on correct implementations. For an application to work on as many devices as possible, any broadcast video needs to be explicitly stopped before using the HTML5 video element.

5. Assuming HLS support

The HbbTV specification includes DASH and does not include HLS. While some HbbTV products support both HLS and DASH, in some cases this may be an accidental carry-over from Smart TV and not tested in the context of HbbTV. In any case, it’s unsafe to assume HbbTV terminals correctly support HLS.

If use of HLS content is a hard requirement then use of JavaScript HLS players like hls.js on top of MSE is recommended.

Although MSE was only formally introduced in HbbTV with specification version 2.0.3, in fact MSE support is widespread. It was commercially viable to deploy HbbTV applications that rely on MSE as early as 2018, see Kumpel-Tag mit Andy, (slide 18).