{"action":"closed","issue":{"url":"https://api.github.com/repos/wet-boew/wet-boew/issues/7017","labels_url":"https://api.github.com/repos/wet-boew/wet-boew/issues/7017/labels{/name}","comments_url":"https://api.github.com/repos/wet-boew/wet-boew/issues/7017/comments","events_url":"https://api.github.com/repos/wet-boew/wet-boew/issues/7017/events","html_url":"https://github.com/wet-boew/wet-boew/issues/7017","id":99453708,"number":7017,"title":"Multimedia Player - Video: Can't display CC on 4.0.11","user":{"login":"hebroin","id":11916335,"avatar_url":"https://avatars.githubusercontent.com/u/11916335?v=3","gravatar_id":"","url":"https://api.github.com/users/hebroin","html_url":"https://github.com/hebroin","followers_url":"https://api.github.com/users/hebroin/followers","following_url":"https://api.github.com/users/hebroin/following{/other_user}","gists_url":"https://api.github.com/users/hebroin/gists{/gist_id}","starred_url":"https://api.github.com/users/hebroin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hebroin/subscriptions","organizations_url":"https://api.github.com/users/hebroin/orgs","repos_url":"https://api.github.com/users/hebroin/repos","events_url":"https://api.github.com/users/hebroin/events{/privacy}","received_events_url":"https://api.github.com/users/hebroin/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-08-06T14:46:23Z","updated_at":"2015-08-06T15:12:12Z","closed_at":"2015-08-06T15:12:12Z","body":"I want to add captions to a video and I can't get it to show anything. The CC section only show a &nbsp; and is never updated according to timing. I tried with a TTML and inline captions, but neither works. I even tried to copy the captions from the demo and it doesn't work.\r\n\r\nThe `<div class=\"wb-mm-cc\">` is never updated. Any help appreciated. Thx!\r\n\r\nHere's the figure element\r\n```html\r\n<figure class=\"wb-mltmd wb-mltmd-inited video cc_on\" id=\"wb-auto-2\">\r\n\t\r\n\r\n<!-- Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)\r\nwet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html -->\r\n<!-- DataAjaxFragmentStart -->\r\n<div class=\"display\">\r\n    <button class=\"wb-mm-ovrly playing\" type=\"button\" data-role=\"none\" aria-controls=\"wb-auto-2-md\"><span class=\"wb-inv\">Lire</span></button><video title=\"B15-OPLENTUS15-011.mp4\" id=\"wb-auto-2-md\">\r\n\t\t<source type=\"video/mp4\" src=\"http://localhost:55934/gs/handler/getmedia.ashx?moid=2445&amp;dt=2&amp;g=4\">\r\n                <track src=\"#inline-captions\" kind=\"captions\" data-type=\"text/html\" srclang=\"fr\" label=\"Français\"></track>\r\n\t</video>\r\n</div>\r\n<div class=\"wb-mm-cc\">&nbsp;</div>\r\n<div class=\"wb-mm-ctrls\">\r\n    <div class=\"frstpnl\">\r\n        <div class=\"btn-group\">\r\n            <button type=\"button\" class=\"btn btn-default playpause\" aria-controls=\"wb-auto-2-md\" title=\"Lire\" data-state-on=\"Lire\" data-state-off=\"Pause\"><span class=\"glyphicon glyphicon-play\"><span class=\"wb-inv\">Lire</span></span></button>\r\n            <button type=\"button\" class=\"btn btn-default mute\" aria-controls=\"wb-auto-2-md\" title=\"Activer le mode muet\" data-state-on=\"Activer le mode muet\" data-state-off=\"Désactiver le mode muet\" aria-pressed=\"false\"><span class=\"glyphicon glyphicon-volume-up\"><span class=\"wb-inv\">Activer le mode muet</span></span></button>\r\n            <input type=\"range\" class=\"volume\" aria-controls=\"wb-auto-2-md\" title=\"Volume\" min=\"0\" max=\"100\" value=\"100\" step=\"5\">\r\n        </div>\r\n    </div>\r\n    <div class=\"tline\">\r\n        <div class=\"wb-mm-txtonly\">\r\n            <p class=\"wb-mm-tmln-crrnt\"><span class=\"wb-inv\">Position actuelle :</span><span>00:01:37</span></p>\r\n            <p class=\"wb-mm-tmln-ttl\"><span class=\"wb-inv\">Temps total :</span><span>00:05:21</span></p>\r\n        </div>\r\n        <div class=\"wb-mm-prgrss\">\r\n            <progress tabindex=\"0\" aria-live=\"off\" max=\"100\" value=\"30.3\"></progress>\r\n        </div>\r\n    </div>\r\n    <div class=\"lastpnl\" style=\"width:7em;\">\r\n        <div class=\"btn-group\">\r\n            <button type=\"button\" class=\"btn btn-default cc\" title=\"asdf\" aria-pressed=\"true\" onclick=\"elmFullscreen(document.getElementById('wb-auto-2-md'));\"><span class=\"glyphicon glyphicon-fullscreen\"><span class=\"wb-inv\">undefined</span></span></button>\r\n            <button type=\"button\" class=\"btn btn-default cc\" aria-controls=\"wb-auto-2-md\" title=\"Afficher le sous-titrage\" data-state-on=\"Afficher le sous-titrage\" data-state-off=\"Masquer le sous-titrage\" aria-pressed=\"true\"><span class=\"glyphicon glyphicon-subtitles\"><span class=\"wb-inv\">undefined</span></span></button>\r\n        </div>\r\n    </div>\r\n</div>\r\n<!-- DataAjaxFragmentEnd -->\r\n\r\n\r\n\t<figcaption>\r\n\t\t<details id=\"inline-captions\">\r\n\t\t\t<summary>Trouver un emploi - Transcription et Sous-Titres HTML5</summary>\r\n<p class=\"wet-boew-vd\"><strong>(La vidéo débute par une image de l'animatrice s'avançant vers la caméra. Un trait rouge suit le texte «&nbsp;Trouver un emploi&nbsp;».)</strong></p>\r\n<p><span class=\"wb-tmtxt\" data-begin=\"2.34s\" data-dur=\"3.04s\">Bonjour, je m'appelle Amélie et je travaille </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"5.37s\" data-dur=\"1.50s\">à Service Canada.</span></p>\r\n<p class=\"wet-boew-vd\"><strong>(Coupure et plan moyen de l'animatrice. DESSIN AU TRAIT&nbsp;: Le bonhomme-allumettes apparaît à l'écran.)</strong></p>\r\n<p><span class=\"wb-tmtxt\" data-begin=\"6.87s\" data-dur=\"2.24s\">Vous savez que trouver un emploi est un travail à </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"9.11s\" data-dur=\"2.74s\">temps plein qui exige beaucoup d'efforts</span></p>\r\n<p class=\"wet-boew-vd\"><strong>(DESSIN AU TRAIT&nbsp;: Le bonhomme-allumettes penche la tête en signe de découragement, mais la relève ensuite avec énergie en regardant l'écran d'ordinateur qui apparaît à l'écran.)</strong></p>\r\n<p><span class=\"wb-tmtxt\" data-begin=\"11.85s\" data-dur=\"2.54s\">mais il ne faut pas vous laisser décourager </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"14.38s\" data-dur=\"2.24s\">par l'ampleur de la tâche.</span></p>\r\n<p><span class=\"wb-tmtxt\" data-begin=\"16.62s\" data-dur=\"2.77s\">Nous avons mis à votre disposition de nombreux </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"19.39s\" data-dur=\"2.87s\">outils et programmes en ligne pour vous aider </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"22.26s\" data-dur=\"2.00s\">à trouver un emploi.</span></p>\r\n<p class=\"wet-boew-vd\"><strong>(Gros plan de l'animatrice. Une page du site Guichet emplois apparaît à l'écran. Les mots «&nbsp;Guichet emplois&nbsp;» apparaissent à l'intérieur d'une bulle.)</strong></p>\r\n<p><span class=\"wb-tmtxt\" data-begin=\"24.26s\" data-dur=\"2.67s\">Peu importe l'emploi que vous cherchez, </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"26.93s\" data-dur=\"2.97s\">vous trouverez sur Internet de nombreux sites Web </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"29.90s\" data-dur=\"3.00s\">où les employeurs affichent leurs postes vacants.</span></p>\r\n<p class=\"wet-boew-vd\"><strong>(DESSIN AU TRAIT&nbsp;: Le bonhomme-allumettes se place de profil. Les mots «&nbsp;mis à jour quotidiennement&nbsp;» et «&nbsp;48 heures&nbsp;» apparaissent à l'intérieur d'une bulle sous «&nbsp;Guichet emplois&nbsp;».)</strong></p>\r\n<p><span class=\"wb-tmtxt\" data-begin=\"32.90s\" data-dur=\"2.50s\">L'un de ces sites, Guichet emplois, </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"35.40s\" data-dur=\"2.47s\">est mis à jour quotidiennement.</span></p>\r\n<p><span class=\"wb-tmtxt\" data-begin=\"37.87s\" data-dur=\"2.40s\">Vous y trouverez des occasions d'emploi </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"40.27s\" data-dur=\"1.67s\">partout au pays.</span></p>\r\n<p><span class=\"wb-tmtxt\" data-begin=\"41.94s\" data-dur=\"2.97s\">Et puisque le site est mis à jour quotidiennement, </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"44.91s\" data-dur=\"3.40s\">n'oubliez pas d'y jeter un coup d'oeil régulièrement.</span></p>\r\n<p><span class=\"wb-tmtxt\" data-begin=\"48.31s\" data-dur=\"2.14s\">Vous y trouverez les postes affichés au cours </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"50.45s\" data-dur=\"2.50s\">des dernières 48 heures.</span></p>\r\n<p class=\"wet-boew-vd\"><strong>(Les mots «&nbsp;faites valoir vos compétences&nbsp;» et «&nbsp;liste des emplois correspondant à vos critères de recherche par courriel&nbsp;» apparaissent à l'intérieur d'une bulle sous «&nbsp;Guichet emplois&nbsp;».)</strong></p>\r\n<p><span class=\"wb-tmtxt\" data-begin=\"52.95s\" data-dur=\"2.44s\">Guichet emplois vous permet également de faire valoir </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"55.39s\" data-dur=\"3.27s\">vos compétences, et de vous inscrire pour recevoir </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"58.66s\" data-dur=\"3.47s\">par courriel une liste des emplois qui correspondent </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"62.13s\" data-dur=\"2.87s\">à vos critères de recherche.</span></p>\r\n<p class=\"wet-boew-vd\"><strong>(Gros plan de l'animatrice. Une photo de l'édifice du Parlement apparaît en arrière-plan. DESSIN AU TRAIT&nbsp;: L'adresse «&nbsp;emplois.gc.ca&nbsp;» apparaît sur une pancarte plantée dans la pelouse devant le Parlement, et le bonhomme-allumettes pointe vers la pancarte.)</strong></p>\r\n<p><span class=\"wb-tmtxt\" data-begin=\"65.00s\" data-dur=\"3.40s\">Si vous voulez travailler a gouvernement du Canada, </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"68.40s\" data-dur=\"3.87s\">consultez le site emplois.gc.ca, </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"72.27s\" data-dur=\"2.97s\">qui répertorie les postes ouverts au public </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"75.24s\" data-dur=\"3.14s\">dans l'ensemble de la fonction publique fédérale.</span></p>\r\n<p><span class=\"wb-tmtxt\" data-begin=\"78.38s\" data-dur=\"2.17s\">Notez que certains ministères, </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"80.55s\" data-dur=\"3.30s\">comme l'Agence du revenu du Canada et Parcs Canada, </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"83.85s\" data-dur=\"4.04s\">affichent aussi les postes vacants sur leur propre site.</span></p>\r\n<p class=\"wet-boew-vd\"><strong>(Plan moyen de l'animatrice. DESSIN AU TRAIT&nbsp;: Le bonhomme-allumettes pointe vers une page du site Guichet emplois où les mots «&nbsp;Nom d'utilisateur&nbsp;» et «&nbsp;Mot de passe&nbsp;» sont mis en évidence.)</strong></p>\r\n<p><span class=\"wb-tmtxt\" data-begin=\"87.89s\" data-dur=\"3.97s\">Vous aurez fort probablement à préparer un curriculum vitae </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"91.86s\" data-dur=\"2.87s\">et une lettre de présentation lorsque vous ferez </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"94.73s\" data-dur=\"3.10s\">une demande d'emploi, et bien entendu, </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"97.83s\" data-dur=\"2.27s\">vous voudrez faire bonne impression.</span></p>\r\n<p class=\"wet-boew-vd\"><strong>(Les mots «&nbsp;Concepteur de CV&nbsp;» apparaissent à l'intérieur d'une bulle.)</strong></p>\r\n<p><span class=\"wb-tmtxt\" data-begin=\"100.10s\" data-dur=\"1.77s\">Nous pouvons vous aider!</span></p>\r\n<p><span class=\"wb-tmtxt\" data-begin=\"101.87s\" data-dur=\"2.90s\">Grâce à l'outil Concepteur de CV, </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"104.77s\" data-dur=\"2.90s\">que vous trouverez sur le site Guichet emplois, </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"107.67s\" data-dur=\"2.40s\">vous pourrez obtenir des conseils, </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"110.08s\" data-dur=\"3.70s\">choisir un modèle et créer un curriculum vitae </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"113.78s\" data-dur=\"2.20s\">d'allure professionnelle.</span></p>\r\n<p class=\"wet-boew-vd\"><strong>(Gros plan de l'animatrice. Une page du site Guichet emplois apparaît à l'écran. Les mots «&nbsp;Navigation carrière&nbsp;» apparaissent à l'intérieur d'une bulle.)</strong></p>\r\n<p><span class=\"wb-tmtxt\" data-begin=\"115.98s\" data-dur=\"2.74s\">Si vous ne savez pas quel type d'emploi vous intéresse, </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"118.72s\" data-dur=\"3.44s\">consultez l'outil Navigation carrière, </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"122.16s\" data-dur=\"2.57s\">qui pourra vous aider à choisir une carrière </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"124.72s\" data-dur=\"1.54s\">qui vous convient.</span></p>\r\n<p class=\"wet-boew-vd\"><strong>(DESSIN AU TRAIT&nbsp;: Le bonhomme-allumettes parle à un autre bonhomme-allumettes assis derrière un bureau surmonté d'un panneau où figurent les mots «&nbsp;orientation professionnelle&nbsp;».)</strong></p>\r\n<p><span class=\"wb-tmtxt\" data-begin=\"126.26s\" data-dur=\"3.64s\">Aussi, le gouvernement de votre province ou territoire </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"129.90s\" data-dur=\"2.57s\">offre sans doute un service d'orientation professionnelle </span>\r\n<span class=\"wb-tmtxt\" data-begin=\"132.47s\" data-dur=\"3.47s\">qui pourrait vous aider dans vos démarches.</span></p>\r\n<p class=\"wet-boew-vd\"><strong>(Gros plan de l'animatrice. DESSIN AU TRAIT&nbsp;: Le logo de Service Canada apparaît et le bonhomme-allumettes fait un salut.)</strong></p>\r\n<p><span class=\"wb-tmtxt\" data-begin=\"135.94s\" data-dur=\"3.00s\">À Service Canada, nous sommes au service des gens.</span></p>\r\n<p class=\"wet-boew-vd\"><strong>(L'écran devient noir.)</strong></p>\r\n\t\t</details>\r\n\t</figcaption>\r\n</figure>\r\n```"}}