{"json_modified": "2016-07-25T02:12:41.021438", "uuid": "7ad88593-171f-4860-bd93-fcce2fe365ac", "title": "Adding captions and subtitles to HTML5 video", "url": "/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video", "tags": ["subtitles", "HTML5", "track", "captions", "WebVTT", "Media"], "translations": [{"uuid": "2923753f-22d0-4b1f-8f1c-af4ee5043bc5", "title": "Ajouter des l\u00e9gendes et des sous titres \u00e0 des vid\u00e9os HTML 5", "url": "/fr/docs/Web/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video", "tags": [], "summary": "In other articles we looked at how to <a href=\"https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/cross_browser_video_player\">build a cross browser video player</a> using the <a href=\"/fr/docs/Web/API/HTMLMediaElement\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>HTMLMediaElement</code></a> and <a href=\"/fr/docs/Web/API/Window/fullScreen\" title=\"Cette propri&#xE9;t&#xE9; indique si la fen&#xEA;tre est affich&#xE9;e en mode plein &#xE9;cran ou non. Elle n'est fiable qu'&#xE0; partir de Gecko 1.9 (Firefox 3), voir les Notes plus bas.\"><code>Window.fullScreen</code></a> APIs, and also at how to <a href=\"https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/Video_player_styling_basics\">style the player</a>. This article will take the same player and show how to add captions and subtitles to it, using <a href=\"/fr/docs/Web/API/Web_Video_Text_Tracks_Format\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>the WebVTT format</code></a> and the <a href=\"/fr/docs/Web/HTML/Element/track\" title=\"L'&#xE9;l&#xE9;ment HTML &lt;track&gt; est utilis&#xE9; en tant qu'&#xE9;l&#xE9;ment appartenant aux &#xE9;l&#xE9;ments&#xA0; media qui sont &lt;audio&gt; et &lt;video&gt;. Cet &#xE9;l&#xE9;ment isol&#xE9; ne repr&#xE9;sente rien. Il permet de d&#xE9;finir des donn&#xE9;es d&#xE9;pendant du temps et li&#xE9;es aux m&#xE9;dias.\"><code>&lt;track&gt;</code></a> element.", "localization_tags": ["inprogress"], "locale": "fr", "last_edit": "2015-04-21T00:25:55", "review_tags": []}, {"uuid": "f8d1281e-571c-48d0-8e73-2d64237e41c0", "title": "HTML5 video\u306b\u30ad\u30e3\u30d7\u30b7\u30e7\u30f3\u3068\u5b57\u5e55\u3092\u3064\u3051\u308b\u65b9\u6cd5", "url": "/ja/docs/Web/Apps/Build/Manipulating_media/Adding_captions_and_subtitles_to_HTML5_video", "tags": ["Guide", "Example"], "summary": "In other articles we looked at how to <a href=\"https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/cross_browser_video_player\">build a cross browser video player</a> using the <a href=\"/ja/docs/Web/API/HTMLMediaElement\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>HTMLMediaElement</code></a> and <a href=\"/ja/docs/Web/API/Window.fullScreen\" title=\"&#x3053;&#x306E;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x306F;&#x3001;&#x30A6;&#x30A3;&#x30F3;&#x30C9;&#x30A6;&#x304C;&#x30D5;&#x30EB;&#x30B9;&#x30AF;&#x30EA;&#x30FC;&#x30F3;&#x30E2;&#x30FC;&#x30C9;&#x3067;&#x8868;&#x793A;&#x3055;&#x308C;&#x3066;&#x3044;&#x308B;&#x304B;&#x3069;&#x3046;&#x304B;&#x3092;&#x793A;&#x3057;&#x307E;&#x3059;&#x3002;&#x3053;&#x308C;&#x306F;&#x3001;Gecko 1.9 (Firefox 3) &#x4EE5;&#x964D;&#x3067;&#x306E;&#x307F;&#x4FE1;&#x983C;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;&#x4EE5;&#x4E0B;&#x306E;&#x6CE8;&#x8A18;&#x3092;&#x53C2;&#x7167;&#x3057;&#x3066;&#x304F;&#x3060;&#x3055;&#x3044;&#x3002;\"><code>Window.fullScreen</code></a> APIs, and also at how to <a href=\"https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/Video_player_styling_basics\">style the player</a>. This article will take the same player and show how to add captions and subtitles to it, using <a href=\"/ja/docs/Web/API/Web_Video_Text_Tracks_Format\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>Web_Video_Text_Tracks_Format</code></a> and the <a href=\"/ja/docs/Web/HTML/Element/track\" title=\"track &#x8981;&#x7D20;&#x306F;&#x30E1;&#x30C7;&#x30A3;&#x30A2;&#x8981;&#x7D20; (&lt;audio&gt; &#x304A;&#x3088;&#x3073; &lt;video&gt;) &#x306E;&#x5B50;&#x3068;&#x3057;&#x3066;&#x4F7F;&#x7528;&#x3059;&#x308B;&#x3082;&#x306E;&#x3067;&#x3001;&#x305D;&#x308C;&#x81EA;&#x8EAB;&#x306F;&#x4F55;&#x3082;&#x8868;&#x3057;&#x307E;&#x305B;&#x3093;&#x3002;&#x3053;&#x306E;&#x8981;&#x7D20;&#x306F;&#x3001;&#x6642;&#x9593;&#x6307;&#x5B9A;&#x3055;&#x308C;&#x305F;&#x30C6;&#x30AD;&#x30B9;&#x30C8;&#x30C8;&#x30E9;&#x30C3;&#x30AF; (&#x307E;&#x305F;&#x306F;&#x6642;&#x7CFB;&#x5217;&#x30C7;&#x30FC;&#x30BF;) &#x3092;&#x6307;&#x5B9A;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;\"><code>&lt;track&gt;</code></a> element.", "localization_tags": ["inprogress"], "locale": "ja", "last_edit": "2014-06-14T23:05:29", "review_tags": []}], "modified": "2016-07-25T02:12:40", "label": "Adding captions and subtitles to HTML5 video", "localization_tags": [], "locale": "en-US", "id": 114643, "last_edit": "2016-07-25T02:12:33", "summary": "In other articles we looked at how to <a href=\"https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/cross_browser_video_player\">build a cross browser video player</a> using the <a href=\"/en-US/docs/Web/API/HTMLMediaElement\" title=\"The HTMLMediaElement interface adds to HTMLElement the properties and methods needed to support basic media-related capabilities&#xA0;that are&#xA0;common to audio and video. The HTMLVideoElement and HTMLAudioElement elements both inherit this interface.\"><code>HTMLMediaElement</code></a> and <a href=\"/en-US/docs/Web/API/Window/fullScreen\" title=\"This property indicates whether the window is displayed in full screen mode or not. It is only reliable in Gecko 1.9 (Firefox 3) and later, see the Notes below.\"><code>Window.fullScreen</code></a> APIs, and also at how to <a href=\"https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/Video_player_styling_basics\">style the player</a>. This article will take the same player and show how to add captions and subtitles to it, using <a href=\"/en-US/docs/Web/API/Web_Video_Text_Tracks_Format\" title=\"WebVTT is a format for displaying timed text tracks (e.g. subtitles or captions) with the &lt;track&gt; element. The primary purpose of WebVTT files is to add text overlays to a &lt;video&gt;. WebVTT is a text based format, which must be encoded in UTF-8 format. Where you can use spaces you can also use tabs.\"><code>the WebVTT format</code></a> and the <a href=\"/en-US/docs/Web/HTML/Element/track\" title=\"The HTML &lt;track&gt; element is used as a child of the media elements&#x2014;&lt;audio&gt; and &lt;video&gt;. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files) &#x2014; Web Video Text Tracks.\"><code>&lt;track&gt;</code></a> element.", "sections": [{"id": "Captioned_video_example", "title": "Captioned video example"}, {"id": "HTML5_and_Video_Captions", "title": "HTML5 and Video Captions"}, {"id": "Captions_versus_subtitles", "title": "Captions versus subtitles"}, {"id": "The_<track>_element", "title": "The <track> element"}, {"id": "WebVTT", "title": "WebVTT"}, {"id": "Modifications_to_the_HTML_and_CSS", "title": "Modifications to the HTML and CSS"}, {"id": "HTML_Markup", "title": "HTML Markup"}, {"id": "CSS_Changes", "title": "CSS Changes"}, {"id": "Subtitle_implementation", "title": "Subtitle implementation"}, {"id": "Initial_setup", "title": "Initial setup"}, {"id": "Building_a_caption_menu", "title": "Building a caption menu"}, {"id": "Subtitle_menu_CSS", "title": "Subtitle menu CSS"}, {"id": "Styling_the_displayed_subtitles", "title": "Styling the displayed subtitles"}, {"id": "Browser_Compatibility", "title": "Browser Compatibility"}, {"id": "Internet_Explorer", "title": "Internet Explorer"}, {"id": "Safari", "title": "Safari"}, {"id": "Chrome_and_Opera", "title": "Chrome and Opera"}, {"id": "Firefox", "title": "Firefox"}, {"id": "Plugins", "title": "Plugins"}], "slug": "Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video", "review_tags": []}