HTML5 Player: A Cost-effective Way to Bring Video to Tizen and WebOS

When you design a strategy that fits your streaming market, you will notice that there are a lot of devices and platforms to cover. In this article, we will try to shed some light on Tizen/WebOS applications and explain why we provide our player on these platforms as a HTML5-based solution.

Samsung Tizen and LG webOS

Tizen is the smart TV brand for Samsung. WebOS is the equivalent TV brand name for LG. These two platforms deserve special attention because they deviate from Android TV, which is the dominant platform for other television brands. When doing a comparison between the two platforms, it is only natural we start with considering the available technological stacks. LG allows WebOS-developers to use both HTML5, C/C++ or QML-stacks. Tizen offers HTML5, .NET (C#) and C/C++-based applications.

Figure 1 - Samsung Tizen and LG webOS allows similar technological stacks.

Leaving the specific differences between the native languages aside, generally speaking, native applications are more performant compared to web-stack equivalents. In the real world, though, many things are a trade-off. Factors to consider include controlling the development cost, avoiding codebase duplication, keeping granular control over playback and providing a consistent viewing experience.

Native Approach

Developing two separate native applications for both Tizen and WebOS will be more expensive, as the underlying platform APIs are not interchangeable and thus will lead to extra integration logic. This is logic that cannot be reused between the two platforms. Contrast this with an HTML5 based application: most of your business specific logic is reusable out of the box, which reduces the time to develop and maintain both applications.

Developing native applications requires hiring and retaining experienced developers to write applications for these platforms. Using an HTML5-approach on the other hand, allows you to assign developers you may already have available in-house. As code (and potentially developers) are shared over the different products, the viewer experience can be more consistent with end-users, regardless of what platform they pick.

The underlying native playback pipelines are specifically designed for that platform, so the implementation is mostly a black box - meaning there is little to no knowledge in order to make use  . If technical limitations arise, it may be hard to troubleshoot the problem or provide a solution for that. HTML5-applications provide both the native playback pipelines as well as the more open and standard MSE/EME-browser APIs. The latter provides much more control over the playback pipelines. This is especially critical when considering different models of Tizen and WebOS. Different versions come with different limitations and quirks. Using MSE/EME makes it easier to work around this.

EME/SME Approach

When kicking off a project that involves Tizen and/or WebOS, we recommend taking the age and lean-back nature of the experience in the picture.

Smart TVs in general, and Tizen and WebOS in particular, come with outdated versions of browser engines. This is especially true for older devices, where the MSE/EME-versions may still be draft standards, which means there are minor differences in implementation. You may need to consider a video player that is able to handle these differences gracefully. When creating your business logic, you also need to translate your code (both JavaScript and CSS) back to older versions of browsers. This is typically not too bad, because most tooling makes it easy to go back to JavaScript ES5.

UI, Navigation and Playback Control

Users interact with their television with a remote control. As a result, they will not use a mouse, touch screen or a keyboard. It is key to implement your business logic so it can handle this gracefully. While this may sound intimidating, it is not that complicated. You could compare a remote control with a keyboard. It is even easier to draw the parallel with keyboard accessibility: how do you make your complete application available to users using only a select few keys? In this case, we would have to consider the arrow keys and the confirm button. The goal is to design your product so it can be navigated with only these buttons. You can then add less common keys to expand the logic, such as the play/pause button or the subtitles-button. 

To make things easier, we developed a reference application for both Tizen and WebOS so you can explore how this looks like in the real world. This example is stand-alone from the product. You can use the THEOplayer SDK without it, but we recommend checking it out as a starting point to explore the platform and potentially develop further on top of it.

Figure 2 - LG webOS version 2018 and above allows for a hybrid navigation system of remote (keyboard) and mouse.

WebOS is the exception to the rule, as their TV-models of 2018 and later form a hybrid between a remote (keyboard) and mouse navigation. The remote control can control actions in a way that is very similar to a mouse-input. We do recommend starting with basic remote control (as described earlier) and adding functionality for clicking on top of it. After all, not all WebOS-devices have the magic remote-functionality.

To keep the reference application simple, we decided to not include this functionality in the reference application.

Native vs HTML5-Based Approach

If you like to learn more about how we make development on these platforms easier with our THEOplayer SDK, feel free to reach out to one of our experts.

Need guidance in cost-effectively reaching the big screen? We're here to help!