Skip to content

New Feature: HTML-rendered-TTML

Vinay Rosenberg requested to merge github/fork/MobiTV-AB/feature-html-rendered-ttml into development

Created by: TobbeMobiTV

A full-styled HTML-based rendering of EBU-TT-D and other TTML subtitles. The reason for a separate rendering mechanism is that TextTrackCue/VTTCue have very rudimentary styling support.

The rendering has been developed by Solène Buet at EBU and should be a complete EBU-TT-D rendering.

Torbjörn Einarsson and Kenth Andersson from MobiTV have worked with Solène to integrate the HTML rendering in the TextTrackCue/VTTCue timing framework, so that such a track will behave like any other track. The focus has been on EBU-TT-D, but most other TTML subtitle sources should work as well. A list of the supported TTML features in EBU-TT-D are described in Appendix A of the EBU-TT.D spec:https://tech.ebu.ch/docs/tech/tech3380.pdf

To turn on the rendering, the MediaPlayer must be given a

object via the attachTTMLRenderingDiv API. 
        videoElement = document.querySelector(".dash-video-player video");
        TTMLRenderingDiv = document.querySelector("#ttml-rendering-div");
        player.attachView(videoElement);
        player.attachTTMLRenderingDiv(TTMLRenderingDiv);

Here the

should be after the element in the HTML to make the subtitles visible in full-screen mode, like: 
    <div class="dash-video-player">
        <video controls="true"></video>
        <div id="ttml-rendering-div"></div>
    </div>

There is an example page running this in

 samples/captioning/multi-track-captions.html.

Some sample content is:

http://vm2.dashif.org/dash/vod/testpic_2s/multi_subs.mpd
http://vm2.dashif.org/dash/vod/testpic_2s/stpp_two_regions_multi_color.mpd
http://vm2.dashif.org/livesimg//testpic_2s/multi_subs.mpd
http://vm2.dashif.org/livesimg//testpic_2s/stpp_two_regions_multi_color.mpd

The multi_subs have 5 different languages while the multi_color example have 2 regions with different timing and varying color in the lower one. The track needs to be enabled to see this. The example page is showing how.

If no TTMLRenderingDiv is provided, there is a fallback to the previous rudimentary TTML rendering using TextTrackCue/VTTCue.

Merge request reports