mirror of
https://github.com/videojs/video.js.git
synced 2024-12-23 02:04:34 +02:00
185 lines
15 KiB
HTML
185 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title></title>
|
|
<link rel="stylesheet" type="text/css" href="../css/guides.css">
|
|
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic,600,600italic' rel='stylesheet' type='text/css'><link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/styles/solarized_light.min.css" />
|
|
<script type="text/javascript" src="//use.edgefonts.net/source-code-pro.js"></script>
|
|
<link rel="canonical" href="https://docs.videojs.com/tutorial-text-tracks.html">
|
|
</head>
|
|
<body>
|
|
<p class="legacydocsnote">This documentation is for an outdated version of Video.js. See <a href="https://docs.videojs.com/tutorial-text-tracks.html">documentation for the current release</a>.
|
|
|
|
<div id="sidenav" class="sidenav"></div>
|
|
<div id="main" class="main">
|
|
<h1 id="text-tracks">Text Tracks</h1>
|
|
<p>Text Tracks are a function of HTML5 video for providing time triggered text to the viewer. Video.js makes tracks work across all browsers. There are currently five types of tracks:</p>
|
|
<ul>
|
|
<li><strong>Subtitles</strong>: Translations of the dialogue in the video for when audio is available but not understood. Subtitles are shown over the video.</li>
|
|
<li><strong>Captions</strong>: Transcription of the dialogue, sound effects, musical cues, and other audio information for when the viewer is deaf/hard of hearing, or the video is muted. Captions are also shown over the video.</li>
|
|
<li><strong>Chapters</strong>: Chapter titles that are used to create navigation within the video. Typically they're in the form of a list of chapters that the viewer can click on to go to a specific chapter.</li>
|
|
<li><strong>Descriptions</strong>: Text descriptions of what's happening in the video for when the video portion isn't available, because the viewer is blind, not using a screen, or driving and about to crash because they're trying to enjoy a video while driving. Descriptions are read by a screen reader or turned into a separate audio track.</li>
|
|
<li><strong>Metadata</strong>: Tracks that have data meant for javascript to parse and do something with. These aren't shown to the user.</li>
|
|
</ul>
|
|
<h2 id="creating-the-text-file">Creating the Text File</h2>
|
|
<p>Timed text requires a text file in <a href="http://dev.w3.org/html5/webvtt/">WebVTT</a> format. This format defines a list of "cues" that have a start time, and end time, and text to display. <a href="https://dev.modern.ie/testdrive/demos/captionmaker/">Microsoft has a builder</a> that can help you get started on the file.</p>
|
|
<p>When creating captions, there's also additional [caption formatting techniques] (<a href="http://www.theneitherworld.com/mcpoodle/SCC_TOOLS/DOCS/SCC_FORMAT.HTML#style">http://www.theneitherworld.com/mcpoodle/SCC_TOOLS/DOCS/SCC_FORMAT.HTML#style</a>) that would be good to use, like brackets around sound effects: [ sound effect ]. If you'd like a more in depth style guide for captioning, you can reference the <a href="http://www.dcmp.org/captioningkey/">Captioning Key</a>, but keep in mind not all features are supported by WebVTT or (more likely) the Video.js WebVTT implementation.</p>
|
|
<h2 id="adding-to-video-js">Adding to Video.js</h2>
|
|
<p>Once you have your WebVTT file created, you can add it to Video.js using the track tag. Put your track tag after all the source elements, and before any fallback content.</p>
|
|
<pre><code class="lang-html"><video id="example_video_1" class="video-js"
|
|
controls preload="auto" width="640" height="264"
|
|
data-setup='{"example_option":true}'>
|
|
<source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
|
|
<source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm" />
|
|
<source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg" />
|
|
|
|
<track kind="captions" src="http://example.com/path/to/captions.vtt" srclang="en" label="English" default>
|
|
|
|
</video>
|
|
</code></pre>
|
|
<p>You can also add tracks <a href="#api">programatically</a>.</p>
|
|
<h2 id="subtitles-from-another-domain">Subtitles from Another Domain</h2>
|
|
<p>Because we're pulling in the text track file via Javascript, the <a href="http://en.wikipedia.org/wiki/Same_origin_policy">same-origin policy</a> applies. If you'd like to have a player served from one domain,
|
|
but the text track served from another, you'll need to <a href="http://enable-cors.org/">enable CORS</a> in order to do so.
|
|
In addition to enabling CORS on the server serving the text tracks, you will need to add the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes"><code>crossorigin</code> attribute</a> to the video element itself. This attribute has two values <code>anonymous</code> and <code>use-credentials</code>. Most users will want to use <code>anonymous</code> with cross-origin tracks.
|
|
It can be added to the video element like so:</p>
|
|
<pre><code class="lang-html"><video class="video-js" crossorigin="anonymous">
|
|
<source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
|
|
<track src="http://example.com/oceans.vtt" kind="captions" srclang="en" label="English">
|
|
</video>
|
|
</code></pre>
|
|
<p>One thing to be aware of is that in this case the video files themselves will <em>also</em> needs CORS headers applied to it. This is because some browsers apply the crossorigin attribute to the video source itself and not just the tracks and is considered a <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#security-and-privacy-considerations">security concern by the spec</a>.</p>
|
|
<h2 id="track-attributes">Track Attributes</h2>
|
|
<p>Additional settings for track tags.</p>
|
|
<h3 id="kind">kind</h3>
|
|
<p>One of the five track types listed above. Kind defaults to subtitles if no kind is included.</p>
|
|
<h3 id="label">label</h3>
|
|
<p>The label for the track that will be show to the user, for example in a menu that list the different languages available for subtitles.</p>
|
|
<h3 id="default">default</h3>
|
|
<p>The default attribute can be used to have a track default to showing. Otherwise the viewer would need to select their language from the captions or subtitles menu.
|
|
NOTE: For chapters, default is required if you want the chapters menu to show.</p>
|
|
<h3 id="srclang">srclang</h3>
|
|
<p>The two-letter code (valid BCP 47 language tag) for the language of the text track, for example "en" for English. A list of language codes is <a href="languages.md#language-codes">available here</a>.</p>
|
|
<h2 id="interacting-with-text-tracks">Interacting with Text Tracks</h2>
|
|
<h3 id="showing-tracks-programmatically">Showing tracks programmatically</h3>
|
|
<p>Some of you would want to turn captions on and off programmatically rather than just forcing the user to do so themselves. This can be easily achieved by modifying the <code>mode</code> of the text tracks.
|
|
The <code>mode</code> can be one of three values <code>disabled</code>, <code>hidden</code>, and <code>showing</code>.
|
|
When a text track's <code>mode</code> is <code>disabled</code>, the track does not show on screen as the video is playing.
|
|
When the <code>mode</code> is set to <code>showing</code>, the track is visible to the viewer and updates while the video is playing.
|
|
You can change of a particular track like so:</p>
|
|
<pre><code class="lang-js">let tracks = player.textTracks();
|
|
|
|
for (let i = 0; i < tracks.length; i++) {
|
|
let track = tracks[i];
|
|
|
|
// find the captions track that's in english
|
|
if (track.kind === 'captions' && track.language === 'en') {
|
|
track.mode = 'showing';
|
|
}
|
|
}
|
|
</code></pre>
|
|
<h3 id="doing-something-when-a-cue-becomes-active">Doing something when a cue becomes active</h3>
|
|
<p>Above, we mentioned that <code>mode</code> can also be <code>hidden</code>, what this means is that the track will update
|
|
as the video is playing but it won't be visible to the viewer. This is most useful for <code>metadata</code> text tracks.
|
|
One usecase for metadata text tracks is to have something happen when their cues become active, to do so, you listen to the <code>cuechange</code> event on the track. These events fire when the mode is <code>showing</code> as well.
|
|
Here's an example:</p>
|
|
<pre><code class="lang-js">let tracks = player.textTracks();
|
|
let metadataTrack;
|
|
|
|
for (let i = 0; i < tracks.length; i++) {
|
|
let track = tracks[i];
|
|
|
|
// find the metadata track that's labeled ads
|
|
if (track.kind === 'captions' && track.label === 'ads') {
|
|
track.mode = 'hidden';
|
|
// store it for usage outside of the loop
|
|
metadataTrack = track;
|
|
}
|
|
}
|
|
|
|
metadataTrack.addEventListener('cuechange', function() {
|
|
player.ads.startLinearAdMode();
|
|
});
|
|
</code></pre>
|
|
<h2 id="emulated-text-tracks">Emulated Text Tracks</h2>
|
|
<p>By default, video.js will try and use native text tracks if possible and fall back to emulated text tracks if the native functionality is broken or incomplete or non-existent.
|
|
The Flash tech will always use the emulated text track functionality.
|
|
The video.js API and TextTrack objects were modeled after the w3c's specification.
|
|
video.js uses <a href="https://github.com/mozilla/vtt.js">Mozilla's vtt.js</a> library to parse and display its emulated text tracks.</p>
|
|
<p>If you wanted to disable native text track functionality and force video.js to use emulated text tracks always, you can supply the <code>nativeTextTracks</code> option to the tech like so:</p>
|
|
<pre><code class="lang-js">let player = videojs('myvideo', {
|
|
html5: {
|
|
nativeTextTracks: false
|
|
}
|
|
});
|
|
</code></pre>
|
|
<h3 id="text-track-settings">Text Track Settings</h3>
|
|
<p>When using emulated Text Tracks, captions will have an additional item in the menu called "caption settings".
|
|
This allows the viewer of the player to change some styles of how the captions are displayed on screen.</p>
|
|
<p>If you don't want that, you can disable it by turning off the text track settings component and hiding the menu item like so:</p>
|
|
<pre><code class="lang-js">let player = videojs('myvideo', {
|
|
// make the text track settings dialog not initialize
|
|
textTrackSettings: false
|
|
});
|
|
</code></pre>
|
|
<pre><code class="lang-css">/* hide the captions settings item from the captions menu */
|
|
.vjs-texttrack-settings {
|
|
display: none;
|
|
}
|
|
</code></pre>
|
|
<h2 id="text-track-precedence">Text Track Precedence</h2>
|
|
<p>In general, the Descriptions tracks is of lower precedence than captions and subtitles.
|
|
What this means for you?</p>
|
|
<ul>
|
|
<li>If you are using the <code>default</code> attribute, videojs will choose the first track that is marked as <code>default</code> and turn it on. If There are multiple tracks marked <code>default</code>, it will try and turn on the first <code>captions</code> or <code>subtitles</code> track <em>before</em> any <code>descriptions</code> tracks.<ul>
|
|
<li>This only applied to the emulated captions support, native text tracks behavior will change depending on the browser</li>
|
|
</ul>
|
|
</li>
|
|
<li>If you select a given track from the menu, videojs will turn off all the other tracks of the same kind. This may seem like you can have both subtitles and captions turned on at the same time but unfortuantely, at this time we only support one track being displayed at a time.<ul>
|
|
<li>This means that for emulated text tracks, we'll choose the first captions or subtitles track that is enabled to display.</li>
|
|
<li>When native text tracks are supported, we will still disable the other tracks of the same kind but it is possible that multiple text tracks are shown.</li>
|
|
<li>If a <code>descriptions</code> track is selected and subsequently a <code>subtitles</code> or <code>captions</code> track is selected, the <code>descriptions</code> track is disabled and its menu button is also disabled.</li>
|
|
</ul>
|
|
</li>
|
|
<li>When enabling a track programmatically, there's not much checking that videojs does.<ul>
|
|
<li>For emulated text tracks, when it's time to display the captions, video.js would choose the first track that's showing, again choosing <code>subtitles</code> or <code>captions</code> over <code>descriptions</code>, if necessary.</li>
|
|
<li>For native text tracks, this behavior depends on the browser. Some browsers will let you have multiple text tracks but others will disable all other tracks when a new one is selected.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<h2 id="api">API</h2>
|
|
<h3 id="-player-texttracks-texttracklist-"><code>player.textTracks() -> TextTrackList</code></h3>
|
|
<p>This is the main interface into the text tracks of the player.
|
|
It return a TextTrackList which lists all the tracks on the player.</p>
|
|
<h3 id="-player-remotetexttracks-texttracklist-"><code>player.remoteTextTracks() -> TextTrackList</code></h3>
|
|
<p>This is a helper method to get a list of all the tracks that were created from <code>track</code> elements or that were added to the player by the <code>addRemoteTextTrack</code> method. All these tracks are removeable from the player, where-as not all tracks from <code>player.textTracks()</code> are necessarily removeable.</p>
|
|
<h3 id="-player-remotetexttrackels-htmltrackelementlist-"><code>player.remoteTextTrackEls() -> HTMLTrackElementList</code></h3>
|
|
<p>Another helper method, this is a list of all the <code>track</code> elements associated with the player. Both emulated or otherwise.</p>
|
|
<h3 id="-player-addtexttrack-string-kind-string-label-string-language-texttrack-"><code>player.addTextTrack(String kind, [String label [, String language]]) -> TextTrack</code></h3>
|
|
<p>This is based on the <a href="http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-addtexttrack">w3c spec API</a> and when given a kind and an optional label and language, will create a new text track for you to use.
|
|
This method is intended for purely programmatic usage of tracks and has one important limitation:
|
|
tracks created using this method <em>cannot</em> be removed. The native <code>addTextTrack</code> does not have a corresponding <code>removeTextTrack</code>, so, we actually discourage the usage of this method.</p>
|
|
<h3 id="-player-addremotetexttrack-object-options-htmltrackelement-"><code>player.addRemoteTextTrack(Object options) -> HTMLTrackElement</code></h3>
|
|
<p>This function takes an options object that looks pretty similar to the track element and returns a HTMLTrackElement.
|
|
This object has a <code>track</code> property on it which is the actual TextTrack object.
|
|
This <code>TextTrack</code> object is equivalent to the one that can be returned from <code>player.addTextTrack</code> with the added bonus that it can be removed from the player.
|
|
Internally, video.js will either add a <code><track></code> element for you, or emulate that depending on whether native text tracks are supported or not.
|
|
The options available are:</p>
|
|
<ul>
|
|
<li><code>kind</code></li>
|
|
<li><code>label</code></li>
|
|
<li><code>language</code> (also <code>srclang</code>)</li>
|
|
<li><code>id</code></li>
|
|
<li><code>src</code></li>
|
|
</ul>
|
|
<h3 id="-player-removeremotetexttrack-htmltrackelement-texttrack-"><code>player.removeRemoteTextTrack(HTMLTrackElement|TextTrack)</code></h3>
|
|
<p>This function takes either an HTMLTrackElement or a TextTrack object and removes it from the player.</p>
|
|
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/highlight.min.js"></script>
|
|
<script src="../js/guides.js"></script>
|
|
<script>hljs.initHighlightingOnLoad();</script>
|
|
</body>
|
|
|
|
</html>
|