Backward Compatibility

We are constantly working to improve webOS TV, and as a result, various specifications and features have been newly added or changed to the webOS TV platform. For example, the web engine used in the webOS TV platform had been changed from WebKit to Blink  at the release of webOS TV 3.0. Due to this kind of changes, your app made for previous webOS TVs might not work on the latest version of webOS TV. It is time for you to consider backward compatibility.

The following guide describes the issues arising from version difference and how to make the code work across all versions of webOS TV.

Adding event handler

Backward compatible code

When adding an event handler, you MUST use the addEventListener() method to make the code works on all versions of webOS TV:

var vid = document.getElementById("myVideo");

vid.addEventListener("loadeddata", function (event) {
    log(JSON.stringify(event));
});

<!-- HTML Code -->
...
<video id="myVideo">
    <source src="./video/oceans-clip.mp4" type="video/mp4" />
</video>

Why use this code?

In webOS TV 1.x and 2.0, when the event of HTMLMediaElement occurs, only the event handler registered by the addEventListener() method can be called. As below, if you have added an event handler as a property type, it will not work correctly.

// JavaScript Code
var vid = document.getElementById("myVideo");

vid.onloadeddata = function (event) {
    log(JSON.stringify(event));
});

<!-- HTML Code -->
...
<video id="myVideo">
  <source src="./video/oceans-clip.mp4" type="video/mp4" />
</video>

Using CSS

A single code that works for all

To make sure that your app is compatible with all versions of webOS TV, put both the prefixed and unprefixed flags in your CSS code as below:

div {
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-name: myMove;
  animation-name: myMove;
}

@-webkit-keyframes myMove {
  /* styles */
}
@keyframes myMove {
  /* styles */
}

.item {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  -webkit-align-items: flex-end;
  justify-content: flex-end;
  align-items: flex-end;
}

Why use this code? 

If you have used the following CSS code according to the latest W3C guidelines, you have probably found that it does not work on webOS TV 2.0  or earlier:

div {
  animation-duration: 4s;
  animation-name: myMove;
}

@keyframes myMove {
  /* styles */
}

.item {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

Some CSS modules including Transforms, Transitions, and Animation were in Candidate Recommendation (CR) state before webOS TV 3.0. At that time, it was guided to implement these CSS modules with a prefix (e.g., webkit-xxx). As their maturity level of the recommendation track has increased, however, W3C has updated its document and advises to drop the vendor prefixes (standard for Blink). To cope with this change, you need to code in a way that works for all webOS TV versions. Refer to the top of the page for the sample code.

Changing video source

Backward compatible code

Before changing the source element, you need to consider the readyState status. We recommend using the load() method for initiating readyState as below:

// JavaScript Code
function changeSource() {
  var vidElement = document.getElementById('myVideo');

  // Remove all source elements
  while (vidElement.firstChild) vidElement.removeChild(vidElement.firstChild);

  // Initiating readyState of HTMLMediaElement
  vidElement.load();

  // Add new source element
  var source = document.createElement('source');
  source.setAttribute('src', './video/multi-soundtrack.mp4');
  source.setAttribute('type', 'video/mp4');
  vidElement.appendChild(source);
}

<!-- HTML Code -->
...
<video id="myVideo">
  <source src="./video/oceans-clip.mp4" type="video/mp4" />
</video>

Why use this code?

The source element is used for playing MPEG, HLS, and DRM format content. According to the HTML5 specification, if the readyState of HTMLMediaElement is not HAVE_NOTHING, the source element cannot be changed or removed. During the video playback, readyState is usually set to a value other than HAVE_NOTHING. However, WebKit used on webOS TV 1.x and 2.0 does not support readyState and keeps the readyState value to HAVE_NOTHING (NULL). With the release of webOS TV 3.0, WebKit is replaced by Blink, which fully supports readyState.

You have probably replaced the source element to change the video content, similar to below. However, this code does not work anymore since webOS TV 3.0.

// JavaScript Code
function changeSource() {
  var vidElement = document.getElementById('myVideo');

  // Remove all source elements
  while (vidElement.firstChild) vidElement.removeChild(element.firstChild);

  // Add a new source element
  var source = document.createElement('source');
  source.setAttribute('src', './video/multi-soundtrack.mp4');
  source.setAttribute('type', 'video/mp4');
  vidElement.appendChild(source);
}

<!-- HTML Code -->
...
<video id="myVideo">
  <source src="./video/oceans-clip.mp4" type="video/mp4" />
</video>

Using Node.js

When developing JS services, you should keep in mind supported Node.js version by webOS TV platform version. For more information in detail, see Supported Node.js version.