web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-12-23 02:04:34 +02:00
Code Releases Activity
feat-vhs-errors
video.js/docs/legacy-docs/guides/video-tracks.html

81 lines
4.9 KiB
HTML
Raw Permalink Normal View History

docs: deploy docs using netlify (#4774) This adds in the legacy docs into the repo and enables automatic deployment via netlify. The netlify-docs.js script will error out the build on netlify on master if we're not on a tagged commit so that it won't redeploy the docs unless there's a new release. If we're not on master or on master with a tagged commit, it will process with the deploy. Also, this removes the API docs from being published with npm, fixes #4609.
2017-12-05 00:42:07 +02:00
<!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>
docs: Add note to legacy notes (#7022) 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.
2021-01-06 19:50:22 +02:00
<link rel="canonical" href="https://docs.videojs.com/tutorial-video-tracks.html">
docs: deploy docs using netlify (#4774) This adds in the legacy docs into the repo and enables automatic deployment via netlify. The netlify-docs.js script will error out the build on netlify on master if we're not on a tagged commit so that it won't redeploy the docs unless there's a new release. If we're not on master or on master with a tagged commit, it will process with the deploy. Also, this removes the API docs from being published with npm, fixes #4609.
2017-12-05 00:42:07 +02:00
</head>
<body>
docs: Add note to legacy notes (#7022) 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.
2021-01-06 19:50:22 +02:00
<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>.
docs: deploy docs using netlify (#4774) This adds in the legacy docs into the repo and enables automatic deployment via netlify. The netlify-docs.js script will error out the build on netlify on master if we're not on a tagged commit so that it won't redeploy the docs unless there's a new release. If we're not on master or on master with a tagged commit, it will process with the deploy. Also, this removes the API docs from being published with npm, fixes #4609.
2017-12-05 00:42:07 +02:00
<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 &quot;en&quot; 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&#39;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(&#39;change&#39;, 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() -&gt; 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>
Copy Permalink