Google+ HTML5 Video Captions | Some Techie Media Player

Video Subtitles in Every Browser

<video controls poster="http://cdn.sometechie.com/sample/video/sintel_trailer/poster.jpg" style="width:100%;height:260px">
    <source src="http://cdn.sometechie.com/sample/video/sintel_trailer/video_1080p.mp4" />
    <source src="http://cdn.sometechie.com/sample/video/sintel_trailer/video_1080p.webm" />
    <source src="http://cdn.sometechie.com/sample/video/sintel_trailer/video_1080p.wmv" />
    <track src="http://cdn.sometechie.com/sample/video/sintel_trailer/captions.vtt" default kind="captions" srclang="en"/>
</video>

Format Support

    Native HTML5 Video
  Some Techie JW Player Flowplayer HTML5 Flowplayer Flash Chrome Firefox Safari IE10 IE9 iOS Opera
WebVTT *
TTML
LRC
SBV
SRT

* Requires text/vtt mime type from server

Features

    Native HTML5 Video
  Some Techie JW Player Flowplayer HTML5 Flowplayer Flash Chrome Safari IE10 Opera
Line Breaks
User Toggle 1
User Select
Cue End Time
Formatted Text
CSS Styleable 2 3
Simultaneous Cues
Custom Positioning
Embedded Links 4
Delayed Cue Parts 5 5

1. On certain browsers, toggle is not shown in Flash mode.
2. Some advanced CSS features such as text-shadow, background gradients, and background colors on certain elements are not supported on certain browsers when full screen in Flash mode.
3. HTML5 mode only; captions displayed in Flash cannot be styled using CSS.
4. Captions are obscured by controls on hover, making links hard to click.
5. Shows timed text source code.


What is WebVTT?

WebVTT is the new format for captioning video on the internet, and it is supported by almost every web player that supports captioning. Although the format is still under development, it already has many features. The full specifications of the WebVTT format can be found at dev.w3.org/html5/webvtt/.

A WebVTT file is fairly simple to understand and can be created with a simple text editor. Some graphical editors exist, supporting a subset of the format's capability.

WEBVTT

00:11.874 --> 00:14.665 align:middle size:40%
What brings you to the land of the gatekeepers?

00:18.160 --> 00:20.115 align:right size:25% position:10% line:60%
I'm searching
for someone.

00:26.000 --> 00:27.300 size:20% position:40% line:50%
<i>[SCREECH]</i>

00:36.731 --> 00:39.500
<i>A dangerous quest </i><00:00:37.700><i>for a lone hunter.</i>

00:41.500 --> 00:44.500
<i>I've been alone for as long as I can remember.</i>

00:43.500 --> 01:50.000 line:0% size:50% position:25%;
<small>Video courtesy of <a href="http://www.blender.org" target="_blank"><span style="color:#ff0"><font color="#ffff00;">Blender Foundation</font></span></a></small>

Unlike many other captions formats, the WebVTT format allows you to specify when the cue should should stop displaying. In fact, start and end timestamps are required for every cue. The format for the cue start and end timestamps is hh:mm:ss.sss --> hh:mm:ss:ssss. The hours part of the timestamp is optional if it would be 00.

00:11.874 --> 00:14.665
What brings you to the land of the gatekeepers?

Line breaks are one of the simplest parts of the WebVTT format. Just add a line break in your file.

00:18.160 --> 00:20.115
I'm searching
for someone

Using several different optional keywords, WebVTT format also allows you to specify exactly where and how large a cue should be displayed.

align

Specifies how the text should be aligned.

     Supported values:

          start (The text is aligned towards its start side, interpreted acording to the cue's writing direction)
          middle (The text is centered between its start and end sides)
          end (The text is aligned toward its end side, interpreted according to the cue's writing direction)
          left (The text is aligned to the left)
          right (The text is aligned to the right)

Default: middle

size Specifies the width of the cue, as a percentage of the available width.
position Specifies the horizontal position of the cue, as a percentage of the available width.
line Specifies the vertical position of the cue, as a percentage of the available height or as a certain number of lines from top of the video.
vertical

Specifies the writing direction of the cue.

     Supported values:

          rl (a line extends vertically and is positioned horizontally, with consecutive lines displayed to the left of each other)
          lr (a line extends vertically and is positioned horizontally, with consecutive lines displayed to the right of each other)

Default: horizontal (a line extends horizontally and is positioned vertically, with consecutive lines displayed below each other)

 

00:18.160 --> 00:20.115 align:right size:25% position:10% line:60%
I'm searching
for someone

The WebVTT format also supports limited inline HTML formatting. To italicize a cue, just put it inside an <i> element.

00:41.500 --> 00:44.500
<i>I've been alone for as long as I can remember.</i>

One feature of the WebVTT format is the ability to display a portion of the cue after a delay. To do this, insert a timestamp with the format <hh:mm:ss.sss> before the text to be delayed.

00:00.000 --> 01:00.000
<i>A dangerous quest </i><00:00:01.500><i>for a lone hunter.</i>

The W3C HTML Text Track specifications state that the cues should be stylable through css. Different players implement this in a variety of ways, but the Some Techie Media Player makes it easy. Just add styling to the .st-media-timedtext-cue class. If you would like to style how a delayed part of a cue looks, just add styling to the .st-media-timedtext-cue-part-future class.

.st-media-timedtext-cue{
    background-color: rgba(255,255,255,.7);
    color: black;
    text-shadow: 0px 0px 5px gray;
}

The W3C HTML Text Track specifications define a JavaScript API to allow realtime manipulation of the cues. The Ultimate edition of the Some Techie Media Player includes a JavaScript API based on these specifications.

Check out the API Docs