Site Logo

Frequently Asked Questions

[General] I removed the source element from the played video element and added a source element with a new video content. But the video would not play

Category: Technical FAQ

If you are experiencing this problem, you have probably replaced the source element to change the video content, similar to below:

// JavaScript Code
function changeSource() {
    var element = document.getElementById("myVideo");
  
    // Remove all source elements
    while (element.firstChild)
        element.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');
    document.getElementById("myVideo").appendChild(source);
}
<!-- HTML Code -->
...
<video id="myVideo">
    <source src="./video/oceans-clip.mp4" type="video/mp4" />
</video>

If you are an experienced webOS TV app developer, you might wonder why the above code which worked smoothly on webOS v1.x and v2.0 all of a sudden doesn’t work on webOS v3.0.

As you know, 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.

This means that the readyState status needs to be considered before changing the source element. We recommend using the load() method for initiating readyState as below:

// JavaScript Code
function changeSource() {
    var element = document.getElementById("myVideo");
  
    // Remove all source elements
    while (element.firstChild)
    element.removeChild(element.firstChild);
  
    // Initicating readyState of HTMLMediaElement
    document.getElementById("myVideo").load();
  
    // Add new source element
    var source = document.createElement("source");
    source.setAttribute('src','./video/multi-soundtrack.mp4');
    source.setAttribute('type','video/mp4');
    document.getElementById("myVideo").appendChild(source);
}
<!-- HTML Code -->
...
<video id="myVideo">
    <source src="./video/oceans-clip.mp4" type="video/mp4" />
</video>