WebVTT: Difference between revisions
(→WEBVTT: Remove top-level header. The page title takes care of that.) |
|||
| (8 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
== Overview == | == Overview == | ||
'''WebVTT: Web Video Text Tracks''' is a concerted effort to bring subtitles that run natively on the browser to the web. | '''WebVTT: Web Video Text Tracks''' is a concerted effort to bring subtitles that run natively on the browser to the web. WebVTT functions by attaching an external WebVTT file to the <video> element via the <track> element like so: | ||
<pre> | <pre> | ||
<video src="video.webm"> | <video src="video.webm"> | ||
<track src="sample. | <track src="sample.vtt"> | ||
</video> | </video> | ||
</pre> | </pre> | ||
Where sample.vtt is an external | Where sample.vtt is an external WebVTT file marked up like so: | ||
<pre> | <pre> | ||
WEBVTT | WEBVTT | ||
| Line 17: | Line 17: | ||
This is a sample! | This is a sample! | ||
</pre> | </pre> | ||
If you feel like some self-punishment you can check out more about how it works by reading the [http://dev.w3.org/html5/webvtt/ | If you feel like some self-punishment you can check out more about how it works by reading the [http://dev.w3.org/html5/webvtt/ WebVTT spec] as well as the [http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#the-track-element HTML5 Track Element spec]. | ||
== Status == | == Status == | ||
Currently you can view basic subtitles in Mozilla's Nightly builds. The basic | Currently you can view basic subtitles in Mozilla's Nightly builds. The basic WebVTT tags such as <b>, <u>, and <i> are working. | ||
To try it out, enter '''about:config''' in the address bar and set the ''media.webvtt.enabled'' pref to '''true'''. Then visit a demo page like [http://people.mozilla.org/~rgiles/2013/demo.html this one]. | |||
== Get Involved == | == Get Involved == | ||
There are many ways you can help out Mozilla's implementation of | There are many ways you can help out Mozilla's implementation of WebVTT. You can help by: | ||
* Working on the | * Working on the [https://github.com/andreasgal/vtt.js JS WebVTT parser]. | ||
* Working on the [https://bugzilla.mozilla.org/show_bug.cgi?id=webvtt implementation of the | * Working on the [https://bugzilla.mozilla.org/show_bug.cgi?id=webvtt implementation of the HTML 5 Text Track spec]. | ||
<br/> | <br/> | ||
Jump on #media on irc.mozilla.org to co-ordinate with contributors. Look for :rillian, :reyre | Jump on #media on irc.mozilla.org to co-ordinate with contributors. Look for :rillian, :reyre, or :msaad. | ||
Latest revision as of 01:43, 27 July 2013
Overview
WebVTT: Web Video Text Tracks is a concerted effort to bring subtitles that run natively on the browser to the web. WebVTT functions by attaching an external WebVTT file to the <video> element via the <track> element like so:
<video src="video.webm"> <track src="sample.vtt"> </video>
Where sample.vtt is an external WebVTT file marked up like so:
WEBVTT 00:01.000 --> 00:03.000 Hey! 00:03.000 --> 00:05.000 This is a sample!
If you feel like some self-punishment you can check out more about how it works by reading the WebVTT spec as well as the HTML5 Track Element spec.
Status
Currently you can view basic subtitles in Mozilla's Nightly builds. The basic WebVTT tags such as <b>, <u>, and <i> are working.
To try it out, enter about:config in the address bar and set the media.webvtt.enabled pref to true. Then visit a demo page like this one.
Get Involved
There are many ways you can help out Mozilla's implementation of WebVTT. You can help by:
- Working on the JS WebVTT parser.
- Working on the implementation of the HTML 5 Text Track spec.
Jump on #media on irc.mozilla.org to co-ordinate with contributors. Look for :rillian, :reyre, or :msaad.