WEBVTT subtitle issue on ROKU and LG TV using Dash stream on HTML5 player

Question

WebVTTV Subtitles not working on dash stream using webvtt subtitles. My app uses native HTML5 player and I can see with the help of mpeg-dash chrome plugin that subtitle do load. However, video plays without subtitles on different smart tvs I tested like Hisense, ROKU, TCL and it simply crashes LG TV .

I can see in network logs, it doesn't make request for text streams at all. There is styling and positioning information within the WebVTTV file, wondering if that is the issue. However, I don't see request for WebVTTV file also as I can see if I test same in chrome Dash plugin.

Test stream : http://vod-pbsamerica.simplestreamcdn.com/pbs/encoded/394438.ism/manifest.mpd?filter=(FourCC%20!%3D%20%22JPEG%22%20%26%26%20systemBitrate%20%3C%203500000)

Example of video tag :

<video id="mediaPlayerVideo" preload="auto" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"><source src="http://vod-pbsamerica.simplestreamcdn.com/pbs/encoded/394438.ism/manifest.mpd?filter=(FourCC%20!%3D%20%22JPEG%22%20%26%26%20systemBitrate%20%3C%203500000)" type="application/dash+xml"></video>

Can't figure out the issue as I don't see anything in network log of the TV browsers on debugging.

I wonder if it's because it can't parse the url of the webvttv file "textstream_eng=1000.webvtt ".

Update: I can see if its m3u8, I can see subtitles playing with webvttv file

Answer 1

Just using TTML format worked. Couldn't work out what was the issue with Dash+WEBVTT on those TVs even though they support HBBTV specs

Answer 2

It may be possible that the native HTML5 video player on the smart TVs you mentioned doesn't fully support DASH with WebVTT subtitles. The inconsistency in behaviour across different devices suggests that it might be a device-specific limitation.

Also, as you mentioned that the subtitles work with an m3u8 (HLS) file, you may consider providing an alternative HLS stream for devices that don't support DASH with WebVTT subtitles. I would do this by implementing a simple feature detection script that checks if the device supports the DASH format with WebVTT subtitles and then switches to the HLS stream if it doesn't. The script would look something like:

function doesSupportDashWithWebVTT() {
  const video = document.createElement("video");

  // Check if the browser supports DASH
  if (!video.canPlayType('application/dash+xml')) {
    return false;
  }

  // Check if the browser supports WebVTT
  if (!video.canPlayType('text/vtt')) {
    return false;
  }
  return true;
}

const videoElement = document.getElementById("mediaPlayerVideo");
const dashSrc = "http://vod-pbsamerica.simplestreamcdn.com/pbs/encoded/394438.ism/manifest.mpd?filter=(FourCC%20!%3D%20%22JPEG%22%20%26%26%20systemBitrate%20%3C%203500000)";
const hlsSrc = "your_hls_stream.m3u8";

if (doesSupportDashWithWebVTT()) {
  videoElement.innerHTML = `<source src="${dashSrc}" type="application/dash+xml">`;
} else {
  videoElement.innerHTML = `<source src="${hlsSrc}" type="application/vnd.apple.mpegurl">`;
}

1. I wonder if it's because it can't parse the url of the webvttv file "textstream_eng=1000.webvtt "?

To verify if the URL is causing the problem, you can test with a different WebVTT file URL that has a standard naming convention (e.g., "textstream_eng_1000.webvtt") and see if the subtitles are displayed correctly.

2. I can see in network logs, it doesn't make request for text streams at all. There is styling and positioning information within the WebVTTV file, wondering if that is the issue. However, I don't see request for WebVTTV file also as I can see if I test same in chrome Dash plugin.

The styling and positioning information within the WebVTT file should not be an issue as long as it follows the correct WebVTT syntax.

As a workaround to this, you can try using some 3rd party JavaScript-based player like Video.js or Shaka Player, which have better support for DASH with WebVTT subtitles. These players handle the streaming and subtitle display themselves, rather than relying on the native HTML5 video player, which should result in more consistent behavior across different devices.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/shaka-player.compiled.min.js"></script>

<video id="videoPlayer" width="640" height="360" controls autoplay></video>

<script>
  const videoElement = document.getElementById("videoPlayer");
  const player = new shaka.Player(videoElement);

  // Listen for errors from the Player.
  player.addEventListener("error", onErrorEvent);

  // Load the DASH manifest
  player.load("http://vod-pbsamerica.simplestreamcdn.com/pbs/encoded/394438.ism/manifest.mpd?filter=(FourCC%20!%3D%20%22JPEG%22%20%26%26%20systemBitrate%20%3C%203500000)").then(function() {
    console.log("The video has now been loaded!");
  }).catch(onError);

  // onError is executed if an error occurs.
  function onErrorEvent(event) {
    onError(event.detail);
  }

  function onError(error) {
    console.error("Error code", error.code, "object", error);
  }
</script>

---

References:

1. Setting up adaptive streaming media sources
2. Codecs in common media types