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
f0db8f103c
video.js/docs/legacy-docs/guides/audio-tracks.html

81 lines
4.8 KiB
HTML
Raw 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-audio-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-audio-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="audio-tracks">Audio Tracks</h1>
<p>Audio Tracks are a function of HTML5 video for providing alternative audio track selections to the user, so that a track other than the main track can be played. Video.js makes audio tracks work across all browsers. There are currently five types of tracks:</p>
<ul>
<li><strong>Alternative</strong>: alternative audio for the main video track</li>
<li><strong>Descriptions</strong>: descriptions of what is happening in the video track</li>
<li><strong>Main</strong>: the main audio track for this video</li>
<li><strong>Translation</strong>: a translation of the main audio track</li>
<li><strong>Commentary</strong>: commentary on the video, usually the director of the content talking about design choices</li>
</ul>
<h2 id="missing-funtionality">Missing Funtionality</h2>
<ul>
<li>It is currently impossible to add AudioTracks in a non-programtic way</li>
<li>Literal switching of AudioTracks for playback is not handled by video.js and must be handled by something else. video.js only stores the track representation</li>
</ul>
<h2 id="adding-to-video-js">Adding to Video.js</h2>
<blockquote>
<p>Right now adding audio tracks in the HTML is unsupported. Audio Tracks must be added programatically.</p>
</blockquote>
<p>You must add audio tracks <a href="#api">programatically</a> for the time being.</p>
<h2 id="attributes">Attributes</h2>
<p>Audio 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 audio tracks.</p>
<h3 id="language">language</h3>
<p>The two-letter code (valid BCP 47 language tag) for the language of the audio 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="enabled">enabled</h3>
<p>If this track should be playing or not. In video.js we only allow one track to be enabled at a time. so if you enable more than one the last one to be enabled will end up being the only one.</p>
<h2 id="interacting-with-audio-tracks">Interacting with Audio 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>AudioTrackList</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 AudioTrackList object
let tracks = player.audioTracks();
// listen to the change event
tracks.addEventListener(&#39;change&#39;, function() {
// print the currently enabled AudioTrack label
for (let i = 0; i &lt; tracks.length; i++) {
let track = tracks[i];
if (track.enabled) {
console.log(track.label);
return;
}
}
});
</code></pre>
<h2 id="api">API</h2>
<h3 id="-player-audiotracks-audiotracklist-"><code>player.audioTracks() -&gt; AudioTrackList</code></h3>
<p>This is the main interface into the audio tracks of the player.
It returns an AudioTrackList which is an array like object that contains all the <code>AudioTrack</code> on the player.</p>
<h3 id="-player-audiotracks-addtrack-audiotrack-"><code>player.audioTracks().addTrack(AudioTrack)</code></h3>
<p>Add an existing AudioTrack to the players internal list of AudioTracks.</p>
<h3 id="-player-audiotracks-removetrack-audiotrack-"><code>player.audioTracks().removeTrack(AudioTrack)</code></h3>
<p>Remove a track from the AudioTrackList currently on the player. if no track exists this will do nothing.</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