{"action":"created","issue":{"url":"https://api.github.com/repos/Dash-Industry-Forum/dash.js/issues/705","labels_url":"https://api.github.com/repos/Dash-Industry-Forum/dash.js/issues/705/labels{/name}","comments_url":"https://api.github.com/repos/Dash-Industry-Forum/dash.js/issues/705/comments","events_url":"https://api.github.com/repos/Dash-Industry-Forum/dash.js/issues/705/events","html_url":"https://github.com/Dash-Industry-Forum/dash.js/pull/705","id":102137018,"number":705,"title":"New Feature: HTML-rendered-TTML","user":{"login":"TobbeMobiTV","id":5443098,"avatar_url":"https://avatars.githubusercontent.com/u/5443098?v=3","gravatar_id":"","url":"https://api.github.com/users/TobbeMobiTV","html_url":"https://github.com/TobbeMobiTV","followers_url":"https://api.github.com/users/TobbeMobiTV/followers","following_url":"https://api.github.com/users/TobbeMobiTV/following{/other_user}","gists_url":"https://api.github.com/users/TobbeMobiTV/gists{/gist_id}","starred_url":"https://api.github.com/users/TobbeMobiTV/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/TobbeMobiTV/subscriptions","organizations_url":"https://api.github.com/users/TobbeMobiTV/orgs","repos_url":"https://api.github.com/users/TobbeMobiTV/repos","events_url":"https://api.github.com/users/TobbeMobiTV/events{/privacy}","received_events_url":"https://api.github.com/users/TobbeMobiTV/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"AkamaiDASH","id":7864462,"avatar_url":"https://avatars.githubusercontent.com/u/7864462?v=3","gravatar_id":"","url":"https://api.github.com/users/AkamaiDASH","html_url":"https://github.com/AkamaiDASH","followers_url":"https://api.github.com/users/AkamaiDASH/followers","following_url":"https://api.github.com/users/AkamaiDASH/following{/other_user}","gists_url":"https://api.github.com/users/AkamaiDASH/gists{/gist_id}","starred_url":"https://api.github.com/users/AkamaiDASH/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/AkamaiDASH/subscriptions","organizations_url":"https://api.github.com/users/AkamaiDASH/orgs","repos_url":"https://api.github.com/users/AkamaiDASH/repos","events_url":"https://api.github.com/users/AkamaiDASH/events{/privacy}","received_events_url":"https://api.github.com/users/AkamaiDASH/received_events","type":"User","site_admin":false},"milestone":null,"comments":4,"created_at":"2015-08-20T13:19:34Z","updated_at":"2015-08-20T21:31:14Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/Dash-Industry-Forum/dash.js/pulls/705","html_url":"https://github.com/Dash-Industry-Forum/dash.js/pull/705","diff_url":"https://github.com/Dash-Industry-Forum/dash.js/pull/705.diff","patch_url":"https://github.com/Dash-Industry-Forum/dash.js/pull/705.patch"},"body":"A full-styled HTML-based rendering of EBU-TT-D and other TTML subtitles.\r\nThe reason for a separate rendering mechanism is that TextTrackCue/VTTCue have very rudimentary styling support.\r\n\r\nThe rendering has been developed by Solène Buet at EBU and should be a complete EBU-TT-D rendering.\r\n\r\nTorbjö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\r\n\r\nTo turn on the rendering, the MediaPlayer must be given a \\<div\\> object via the attachTTMLRenderingDiv API.\r\n\r\n            videoElement = document.querySelector(\".dash-video-player video\");\r\n            TTMLRenderingDiv = document.querySelector(\"#ttml-rendering-div\");\r\n            player.attachView(videoElement);\r\n            player.attachTTMLRenderingDiv(TTMLRenderingDiv);\r\n\r\nHere the \\<div\\> should be after the \\<video\\> element in the HTML to make the subtitles visible in full-screen mode, like:\r\n\r\n        <div class=\"dash-video-player\">\r\n            <video controls=\"true\"></video>\r\n            <div id=\"ttml-rendering-div\"></div>\r\n        </div>\r\n\r\nThere is an example page running this in \r\n\r\n     samples/captioning/multi-track-captions.html.\r\n\r\nSome sample content is:\r\n\r\n    http://vm2.dashif.org/dash/vod/testpic_2s/multi_subs.mpd\r\n    http://vm2.dashif.org/dash/vod/testpic_2s/stpp_two_regions_multi_color.mpd\r\n    http://vm2.dashif.org/livesimg//testpic_2s/multi_subs.mpd\r\n    http://vm2.dashif.org/livesimg//testpic_2s/stpp_two_regions_multi_color.mpd\r\n\r\nThe 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.\r\n\r\nIf no TTMLRenderingDiv is provided, there is a fallback to the previous rudimentary TTML rendering using TextTrackCue/VTTCue."},"comment":{"url":"https://api.github.com/repos/Dash-Industry-Forum/dash.js/issues/comments/133184812","html_url":"https://github.com/Dash-Industry-Forum/dash.js/pull/705#issuecomment-133184812","issue_url":"https://api.github.com/repos/Dash-Industry-Forum/dash.js/issues/705","id":133184812,"user":{"login":"AkamaiDASH","id":7864462,"avatar_url":"https://avatars.githubusercontent.com/u/7864462?v=3","gravatar_id":"","url":"https://api.github.com/users/AkamaiDASH","html_url":"https://github.com/AkamaiDASH","followers_url":"https://api.github.com/users/AkamaiDASH/followers","following_url":"https://api.github.com/users/AkamaiDASH/following{/other_user}","gists_url":"https://api.github.com/users/AkamaiDASH/gists{/gist_id}","starred_url":"https://api.github.com/users/AkamaiDASH/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/AkamaiDASH/subscriptions","organizations_url":"https://api.github.com/users/AkamaiDASH/orgs","repos_url":"https://api.github.com/users/AkamaiDASH/repos","events_url":"https://api.github.com/users/AkamaiDASH/events{/privacy}","received_events_url":"https://api.github.com/users/AkamaiDASH/received_events","type":"User","site_admin":false},"created_at":"2015-08-20T21:31:14Z","updated_at":"2015-08-20T21:31:14Z","body":"@TobbeMobiTV  Code review complete. Looks great.   Please seem my comments for the attachTTMLRendering.... regarding videomodel...."}}