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.8 KiB
HTML
81 lines
4.8 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-audio-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-audio-tracks.html">documentation for the current release</a>.
|
|
|
|
<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 "en" 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'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('change', function() {
|
|
|
|
// print the currently enabled AudioTrack label
|
|
for (let i = 0; i < 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() -> 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>
|