mirror of
https://github.com/videojs/video.js.git
synced 2024-12-23 02:04:34 +02:00
f87297b20e
People keep finding the v4 legacy docs at docs.videojs.com/docs and Google keeps positioning them highly in search results. This attempts to lessen that.
81 lines
4.9 KiB
HTML
81 lines
4.9 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-video-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-video-tracks.html">documentation for the current release</a>.
|
|
|
|
<div id="sidenav" class="sidenav"></div>
|
|
<div id="main" class="main">
|
|
<h1 id="video-tracks">Video Tracks</h1>
|
|
<p>Video Tracks are a function of HTML5 video for providing a selection of alternative video tracks to the user, so that they can change type of video they want to watch. Video.js makes video tracks work across all browsers. There are currently six types of tracks:</p>
|
|
<ul>
|
|
<li><strong>Alternative</strong>: an alternative video representation of the main video track</li>
|
|
<li><strong>Captions</strong>: The main video track with burned in captions</li>
|
|
<li><strong>Main</strong>: the main video track</li>
|
|
<li><strong>Sign</strong>: the main video track with added sign language overlay</li>
|
|
<li><strong>Subtitles</strong>: the main video track with burned in subtitles</li>
|
|
<li><strong>Commentary</strong>: the main video track with burned in commentary</li>
|
|
</ul>
|
|
<h2 id="missing-funtionality">Missing Funtionality</h2>
|
|
<ul>
|
|
<li>It is currently impossible to add VideoTracks in a non-programtic way</li>
|
|
<li>Literal switching of VideoTracks for playback is not handled by video.js and must be handled by something else. video.js only stores the track representation</li>
|
|
<li>There is currently no UI implementation of VideoTracks</li>
|
|
</ul>
|
|
<h2 id="adding-to-video-js">Adding to Video.js</h2>
|
|
<blockquote>
|
|
<p>Right now adding video tracks in the HTML is unsupported. Video Tracks must be added programatically.</p>
|
|
</blockquote>
|
|
<p>You must add video tracks <a href="#api">programatically</a> for the time being.</p>
|
|
<h2 id="attributes">Attributes</h2>
|
|
<p>Video Track propertites and settings</p>
|
|
<h3 id="kind">kind</h3>
|
|
<p>One of the five track types listed above. Kind defaults to empty string if no kind is included, or an invalid kind is used.</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 video tracks.</p>
|
|
<h3 id="language">language</h3>
|
|
<p>The two-letter code (valid BCP 47 language tag) for the language of the video track, for example "en" for English. A list of language codes is <a href="languages.md#language-codes">available here</a>.</p>
|
|
<h3 id="selected">selected</h3>
|
|
<p>If this track should be playing or not. Trying to select more than one track will cause other tracks to be deselected.</p>
|
|
<h2 id="interacting-with-video-tracks">Interacting with Video Tracks</h2>
|
|
<h3 id="doing-something-when-a-track-becomes-enabled">Doing something when a track becomes enabled</h3>
|
|
<p>When a new track is enabled (other than the main track) an event is fired on the <code>VideoTrackList</code> called <code>change</code> you can listen to that event and do something with it.
|
|
Here's an example:</p>
|
|
<pre><code class="lang-js">// get the current players VideoTrackList object
|
|
let tracks = player.videoTracks();
|
|
|
|
// listen to the change event
|
|
tracks.addEventListener('change', function() {
|
|
// get the currently selected track
|
|
let index = tracks.selectedIndex;
|
|
let track = tracks[index];
|
|
|
|
// print the currently selected track
|
|
console.log(track.label);
|
|
});
|
|
</code></pre>
|
|
<h2 id="api">API</h2>
|
|
<h3 id="-player-videotracks-videotracklist-"><code>player.videoTracks() -> VideoTrackList</code></h3>
|
|
<p>This is the main interface into the video tracks of the player.
|
|
It returns an VideoTrackList which is an array like object that contains all the <code>VideoTrack</code> on the player.</p>
|
|
<h3 id="-player-videotracks-addtrack-videotrack-"><code>player.videoTracks().addTrack(VideoTrack)</code></h3>
|
|
<p>Add an existing VideoTrack to the players internal list of VideoTracks.</p>
|
|
<h3 id="-player-videotracks-removetrack-videotrack-"><code>player.videoTracks().removeTrack(VideoTrack)</code></h3>
|
|
<p>Remove a track from the VideoTrackList currently on the player. if no track exists this will do nothing.</p>
|
|
<h3 id="-player-videotracks-selectedindex-"><code>player.videoTracks().selectedIndex</code></h3>
|
|
<p>The current index for the selected track</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>
|