{"id":33,"date":"2012-08-23T23:52:34","date_gmt":"2012-08-23T23:52:34","guid":{"rendered":"http:\/\/www.w3.org\/community\/texttracks\/?p=33"},"modified":"2012-08-23T23:55:16","modified_gmt":"2012-08-23T23:55:16","slug":"webvtt-support-in-browsers","status":"publish","type":"post","link":"https:\/\/www.w3.org\/community\/texttracks\/2012\/08\/23\/webvtt-support-in-browsers\/","title":{"rendered":"WebVTT support in browsers"},"content":{"rendered":"<p>In recent months, several of the big browsers have either released &lt;track&gt; element support with WebVTT or are providing experimental builds with support.<\/p>\n<p><strong>IE 10<\/strong><\/p>\n<p>Microsoft provided &lt;track&gt; element support in the Internet Explorer 10 Platform Preview 4 to developers on 30th November 2011. IE 10 supports basic versions of both the WebVTT and the TTML format.<\/p>\n<p>The browser preview can be <a title=\"IE 10 download\" href=\"http:\/\/ie.microsoft.com\/testdrive\/Info\/Downloads\/Default.html\" target=\"_blank\" rel=\"nofollow\">downloaded<\/a>. A <a title=\"IE text track test page\" href=\"http:\/\/ie.microsoft.com\/testdrive\/Graphics\/VideoCaptions\/\" target=\"_blank\" rel=\"nofollow\">test page<\/a> has been provided. <a title=\"IE10 captioning documentation\" href=\"http:\/\/html5labs.interoperabilitybridges.com\/prototypes\/video-captioning\/video-captioning\/info\" target=\"_blank\" rel=\"nofollow\">Documentation<\/a> is available.<\/p>\n<p><strong>Google Chrome<\/strong><\/p>\n<p>Google Chrome 18 added &lt;track&gt; element support behind a flag in about November 2011. You can activate it by going to chrome:\/\/flags and &#8220;Enable element&#8221;. Google Chrome only supports WebVTT.<\/p>\n<p>There is extensive documentation at <a title=\"HTML5 rocks on text tracks\" href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/track\/basics\/\" target=\"_blank\" rel=\"nofollow\">HTML5Rocks<\/a>.<\/p>\n<p><strong>Safari<\/strong><\/p>\n<p>Apple released &lt;track&gt; element support in Safari 6 in July 2012. Safari also only supports WebVTT. Like Google Chrome, it builds on the implementation in WebKit, which is trying to be fairly feature-complete for WebVTT.<\/p>\n<p><strong>Opera<\/strong><\/p>\n<p>In August 2012 Opera released an <a title=\"opera next with text track\" href=\"http:\/\/my.opera.com\/desktopteam\/blog\/2012\/08\/03\/summer-core-update\" target=\"_blank\" rel=\"nofollow\">Opera Next<\/a> version with WebVTT and &lt;track&gt; support. There is also a <a title=\"Opera Developer blog post on track\" href=\"http:\/\/dev.opera.com\/articles\/view\/an-introduction-to-webvtt-and-track\/\" target=\"_blank\" rel=\"nofollow\">Opera Developer blog post<\/a> on &lt;track&gt; to explain this feature further.<\/p>\n<p><strong>What about Firefox?<\/strong><\/p>\n<p>Firefox has some <a title=\"Firefox bug for text track ui\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=515898\" target=\"_blank\" rel=\"nofollow\">work<\/a> in <a title=\"Firefox tracking bug for text track implementation\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=629350\" target=\"_blank\" rel=\"nofollow\">progress<\/a> supporting WebVTT, but there aren&#8217;t any official builds with support available yet.<\/p>\n<p>In any case: there is still lots to do. Several of the browser implementations don&#8217;t support the full feature set yet. Where they do, they may not be interoperable since the spec may have been interpreted slightly differently, or may have changed since the implementation.<\/p>\n<p>We&#8217;re starting to create a test suite with example WebVTT files that test different features. The simple &#8220;show text at certain time interval&#8221; support is certainly interoperable, but some of the more advanced layout features may not be.<\/p>\n<p>It&#8217;s certainly time to start experimenting with the feature, even if you may still need a JavaScript polyfill or a specific video player that supports track through other means:<\/p>\n<ul>\n<li><a title=\"video.js track support\" href=\"http:\/\/videojs.com\/docs\/tracks\/\" target=\"_blank\" rel=\"nofollow\">video.js player<\/a><\/li>\n<li><a title=\"LongTail video track support\" href=\"http:\/\/www.longtailvideo.com\/addons\/plugins\/84\/Captions\" target=\"_blank\" rel=\"nofollow\">jwplayer<\/a><\/li>\n<li><a title=\"MediaElement track support\" href=\"http:\/\/mediaelementjs.com\/\" target=\"_blank\" rel=\"nofollow\">MediaElementJS player<\/a><\/li>\n<li><a title=\"Leanback Player track support\" href=\"http:\/\/leanbackplayer.com\/\" target=\"_blank\" rel=\"nofollow\">LeanBack player<\/a><\/li>\n<li><a title=\"js videosub ployfill\" href=\"http:\/\/www.storiesinflight.com\/js_videosub\/\" target=\"_blank\" rel=\"nofollow\">js_videosub polyfill<\/a><\/li>\n<li><a title=\"playr polyfill for track\" href=\"http:\/\/www.delphiki.com\/html5\/playr\/\" target=\"_blank\" rel=\"nofollow\">Playr polyfill<\/a><\/li>\n<li><a title=\"captionator track polyfill\" href=\"https:\/\/github.com\/cgiffard\/Captionator\" target=\"_blank\" rel=\"nofollow\">Captionator polyfill<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In recent months, several of the big browsers have either released &lt;track&gt; element support with WebVTT or are providing experimental builds with support. IE 10 Microsoft provided &lt;track&gt; element support in the Internet Explorer 10 Platform Preview 4 to developers &hellip; <a href=\"https:\/\/www.w3.org\/community\/texttracks\/2012\/08\/23\/webvtt-support-in-browsers\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":308,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"yes","footnotes":""},"categories":[4,8],"tags":[10,9,5],"class_list":["post-33","post","type-post","status-publish","format-standard","hentry","category-information","category-news","tag-texttracks","tag-track-element","tag-webvtt"],"_links":{"self":[{"href":"https:\/\/www.w3.org\/community\/texttracks\/wp-json\/wp\/v2\/posts\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.w3.org\/community\/texttracks\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.w3.org\/community\/texttracks\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/texttracks\/wp-json\/wp\/v2\/users\/308"}],"replies":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/texttracks\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":10,"href":"https:\/\/www.w3.org\/community\/texttracks\/wp-json\/wp\/v2\/posts\/33\/revisions"}],"predecessor-version":[{"id":43,"href":"https:\/\/www.w3.org\/community\/texttracks\/wp-json\/wp\/v2\/posts\/33\/revisions\/43"}],"wp:attachment":[{"href":"https:\/\/www.w3.org\/community\/texttracks\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.w3.org\/community\/texttracks\/wp-json\/wp\/v2\/categories?post=33"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.w3.org\/community\/texttracks\/wp-json\/wp\/v2\/tags?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}