diff options
Diffstat (limited to 'js/videojs/docs/legacy-docs/guides')
| -rw-r--r-- | js/videojs/docs/legacy-docs/guides/api.html | 49 | ||||
| -rw-r--r-- | js/videojs/docs/legacy-docs/guides/audio-tracks.html | 80 | ||||
| -rw-r--r-- | js/videojs/docs/legacy-docs/guides/components.html | 89 | ||||
| -rw-r--r-- | js/videojs/docs/legacy-docs/guides/glossary.html | 45 | ||||
| -rw-r--r-- | js/videojs/docs/legacy-docs/guides/languages.html | 307 | ||||
| -rw-r--r-- | js/videojs/docs/legacy-docs/guides/options.html | 108 | ||||
| -rw-r--r-- | js/videojs/docs/legacy-docs/guides/plugins.html | 60 | ||||
| -rw-r--r-- | js/videojs/docs/legacy-docs/guides/removing-players.html | 44 | ||||
| -rw-r--r-- | js/videojs/docs/legacy-docs/guides/setup.html | 107 | ||||
| -rw-r--r-- | js/videojs/docs/legacy-docs/guides/skins.html | 60 | ||||
| -rw-r--r-- | js/videojs/docs/legacy-docs/guides/tech.html | 92 | ||||
| -rw-r--r-- | js/videojs/docs/legacy-docs/guides/text-tracks.html | 184 | ||||
| -rw-r--r-- | js/videojs/docs/legacy-docs/guides/tracks.html | 29 | ||||
| -rw-r--r-- | js/videojs/docs/legacy-docs/guides/video-tracks.html | 80 |
14 files changed, 1334 insertions, 0 deletions
diff --git a/js/videojs/docs/legacy-docs/guides/api.html b/js/videojs/docs/legacy-docs/guides/api.html new file mode 100644 index 0000000..5018f0c --- /dev/null +++ b/js/videojs/docs/legacy-docs/guides/api.html @@ -0,0 +1,49 @@ +<!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"> +</head> +<body> +<p class="legacydocsnote">This documentation is for an outdated version of Video.js. See <a href="https://docs.videojs.com">documentation for the current release</a>. + +<div id="sidenav" class="sidenav"></div> +<div id="main" class="main"> +<h1 id="api">API</h1> +<p>The Video.js API allows you to interact with the video through JavaScript, whether the browser is playing the video through HTML5 video, Flash, or any other supported playback technologies.</p> +<h2 id="referencing-the-player">Referencing the Player</h2> +<p>To use the API functions, you need access to the player object. Luckily this is easy to get. You just need to make sure your video tag has an ID. The example embed code has an ID of "example_video_1". If you have multiple videos on one page, make sure every video tag has a unique ID.</p> +<pre><code class="lang-js">var myPlayer = videojs('example_video_1'); +</code></pre> +<p>(If the player hasn't been initialized yet via the data-setup attribute or another method, this will also initialize the player.)</p> +<h2 id="wait-until-the-player-is-ready">Wait Until the Player is Ready</h2> +<p>The time it takes Video.js to set up the video and API will vary depending on the playback technology being used (HTML5 will often be much faster to load than Flash). For that reason we want to use the player's 'ready' function to trigger any code that requires the player's API.</p> +<pre><code class="lang-js">videojs("example_video_1").ready(function(){ + var myPlayer = this; + + // EXAMPLE: Start playing the video. + myPlayer.play(); + +}); +</code></pre> +<h2 id="api-methods">API Methods</h2> +<p>Now that you have access to a ready player, you can control the video, get values, or respond to video events. The Video.js API function names follow the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html">HTML5 media API</a>. The main difference is that getter/setter functions are used for video properties.</p> +<pre><code class="lang-js"> +// setting a property on a bare HTML5 video element +myVideoElement.currentTime = "120"; + +// setting a property on a Video.js player +myPlayer.currentTime(120); +</code></pre> +<p>The full list of player API methods and events can be found in the <a href="http://docs.videojs.com/docs/api/index.html">player API docs</a>.</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> diff --git a/js/videojs/docs/legacy-docs/guides/audio-tracks.html b/js/videojs/docs/legacy-docs/guides/audio-tracks.html new file mode 100644 index 0000000..a1cd187 --- /dev/null +++ b/js/videojs/docs/legacy-docs/guides/audio-tracks.html @@ -0,0 +1,80 @@ +<!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> diff --git a/js/videojs/docs/legacy-docs/guides/components.html b/js/videojs/docs/legacy-docs/guides/components.html new file mode 100644 index 0000000..e5f07d6 --- /dev/null +++ b/js/videojs/docs/legacy-docs/guides/components.html @@ -0,0 +1,89 @@ +<!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-components.html"> +</head> +<body> +<p class="legacydocsnote">This documentation is for an outdated version of Video.js. See <a href="https://docs.videojs.com/tutorial-components.html">documentation for the current release</a>. + +<div id="sidenav" class="sidenav"></div> +<div id="main" class="main"> +<h1 id="components">Components</h1> +<p>The Video.js player is built on top of a simple, custom UI components architecture. The player class and all control classes inherit from the <code>Component</code> class, or a subclass of <code>Component</code>.</p> +<pre><code class="lang-js">videojs.registerComponent('Control', videojs.extends(Component)); +videojs.registerComponent('Button', videojs.extends(videojs.getComponent('Control'))); +videojs.registerComponent('PlayToggle', videojs.extends(videojs.getComponent('Button'))); +</code></pre> +<p>The UI component architecture makes it easier to add child components to a parent component and build up an entire user interface, like the controls for the Video.js player.</p> +<pre><code class="lang-js">// Adding a new control to the player +myPlayer.addChild('BigPlayButton'); +</code></pre> +<p>Every component has an associated DOM element, and when you add a child component, it inserts the element of that child into the element of the parent.</p> +<pre><code class="lang-js">myPlayer.addChild('BigPlayButton'); +</code></pre> +<p>Results in:</p> +<pre><code class="lang-html"> <!-- Player Element --> + <div class="video-js"> + <!-- BigPlayButton Element --> + <div class="vjs-big-play-button"></div> + </div> +</code></pre> +<p>The actual default component structure of the Video.js player looks something like this:</p> +<pre><code>Player + PosterImage + TextTrackDisplay + LoadingSpinner + BigPlayButton + ControlBar + PlayToggle + VolumeMenuButton + CurrentTimeDisplay (Hidden by default) + TimeDivider (Hidden by default) + DurationDisplay (Hidden by default) + ProgressControl + SeekBar + LoadProgressBar + MouseTimeDisplay + PlayProgressBar + LiveDisplay (Hidden by default) + RemainingTimeDisplay + CustomControlsSpacer (No UI) + ChaptersButton (Hidden by default) + SubtitlesButton (Hidden by default) + CaptionsButton (Hidden by default) + PictureInPictureToggle + FullscreenToggle + ErrorDisplay + TextTrackSettings +</code></pre><h2 id="progress-control">Progress Control</h2> +<p>The progress control is made up of the SeekBar. The seekbar contains the load progress bar +and the play progress bar. In addition, it contains the Mouse Time Display which +is used to display the time tooltip that follows the mouse cursor. +The play progress bar also has a time tooltip that show the current time.</p> +<p>By default, the progress control is sandwiched between the volume menu button and +the remaining time display inside the control bar, but in some cases, a skin would +want to move the progress control above the control bar and have it span the full +width of the player, in those cases, it is less than ideal to have the tooltips +get cut off or leave the bounds of the player. This can be prevented by setting the +<code>keepTooltipsInside</code> option on the progress control. This also makes the tooltips use +a real element instead of pseudo elements so targeting them with css will be different.</p> +<pre><code class="lang-js">let player = videojs('myplayer', { + controlBar: { + progressControl: { + keepTooltipsInside: true + } + } +}); +</code></pre> + +<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> diff --git a/js/videojs/docs/legacy-docs/guides/glossary.html b/js/videojs/docs/legacy-docs/guides/glossary.html new file mode 100644 index 0000000..09ca1fe --- /dev/null +++ b/js/videojs/docs/legacy-docs/guides/glossary.html @@ -0,0 +1,45 @@ +<!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"> +</head> +<body> +<p class="legacydocsnote">This documentation is for an outdated version of Video.js. See <a href="https://docs.videojs.com">documentation for the current release</a>. + +<div id="sidenav" class="sidenav"></div> +<div id="main" class="main"> +<h1 id="glossary">Glossary</h1> +<p>Terms related to web video.</p> +<h3 id="dom-document-object-model-">DOM (Document Object Model)</h3> +<p>The container of elements on the page that must be loaded before you can interact with the elements with through Javascript. +<a href="http://en.wikipedia.org/wiki/Document_Object_Model">http://en.wikipedia.org/wiki/Document_Object_Model</a></p> +<h3 id="flash-fallback">Flash Fallback</h3> +<p>The Flash video player (SWF) used to play a video when HTML5 isn't supported.</p> +<h3 id="timerange">TimeRange</h3> +<h3 id="html5-video">HTML5 Video</h3> +<p>HTML is the markup language that makes up every page on the web. The newest version, HTML5, includes specifications for a video tag, that is meant to allow website developers to add a video to a page the same way they would add an image. In order for this to work, web browser developers (Mozilla, Apple, Microsoft, Google, Opera, etc.) have to build the video playback functionality into their browsers. The W3C has created directions on how video should work in browsers, and it’s up to browser developers to follow those directions, so that video works the same across all browsers. This doesn’t always happen thanks to technology, legal, and financial choices made by browser developers, but so far no one’s varying too far from the specifications. However the specifications are still being changed and refined, so browsers developers have to keep up with that as well.</p> +<p>Playing video in a web page may not seem so special since you can already view video on a web page through plugins like Flash Player, Quicktime, Silverlight, and RealPlayer, however this is a big step forward for standardizing video playback across web browsers and devices. The goal is that in the future, developers will only need to use one method for embedding a video, that’s based on open standards (not controlled by one company), and it will work everywhere.</p> +<p>A prime example of this is the iPhone and iPad. Apple has decided not to support Flash on their mobile devices, but they do support HTML5 video. Since Flash is currently the most common way video is added to web pages, most web video (aside from YouTube who has a special relationship with Apple) can’t be viewed on the iPhone or iPad. These devices are very popular, so many web sites are switching to hybrid HTML5/Flash player setups (like VideoJS).</p> +<h3 id="video-tag">Video Tag</h3> +<p>There are a number of great resources that will give you an introduction to the video tag an how it is used including:</p> +<ul> +<li><a href="http://diveintohtml5.org/video.html">Dive into HTML5</a></li> +<li>Lynda.com's <a href="http://www.lynda.com/HTML-5-tutorials/HTML5-Video-and-Audio-in-Depth/80781-2.html">'HTML5 Video and Audio in Depth'</a> video tutorials created by yours truly.</li> +</ul> +<p>An if you really want to dig in, you can read the (W3C Spec)[<a href="http://www.w3.org/TR/html5/video.html">http://www.w3.org/TR/html5/video.html</a>]. (Warning - not for the faint of heart)</p> +<h3 id="skin">Skin</h3> +<p>"Skin" refers to the design of the player's controls, also sometimes called the chrome. With VideoJS, new skins can be built simply by creating a new stylesheet.</p> +<h3 id="content-delivery-network-cdn-">Content Delivery Network (CDN)</h3> +<p>A network of servers around the world that host copies of a file. When your browser requests one of these files, the CDN automatically determines which server is closest to your location and delivers the file from there. This drastically increases delivery time, especially internationally.</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> diff --git a/js/videojs/docs/legacy-docs/guides/languages.html b/js/videojs/docs/legacy-docs/guides/languages.html new file mode 100644 index 0000000..e5e956c --- /dev/null +++ b/js/videojs/docs/legacy-docs/guides/languages.html @@ -0,0 +1,307 @@ +<!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-languages.html"> +</head> +<body> +<p class="legacydocsnote">This documentation is for an outdated version of Video.js. See <a href="https://docs.videojs.com/tutorial-languages.html">documentation for the current release</a>. + +<div id="sidenav" class="sidenav"></div> +<div id="main" class="main"> +<h1 id="languages">Languages</h1> +<p>Multiple language support allows for users of non-English locales to natively interact with the displayed player. Video.js will compile multiple language files (see below) and instantiate with a global dictionary of language key/value support. Video.js player instances can be created with per-player language support that amends/overrides these default values. Player instances can also hard-set default languages to values other than English as of version 4.7.</p> +<h2 id="creating-the-language-file">Creating the Language File</h2> +<p>Video.js uses key/value object dictionaries in JSON form.</p> +<p>An English lang file is at <a href="https://github.com/videojs/video.js/tree/master/lang/en.json">/lang/en.json</a> which should be used as a template for new files. This will be kept up to date with strings in the core player that need localizations.</p> +<p>A sample dictionary for Spanish <code>['es']</code> would look as follows:</p> +<pre><code class="lang-JSON">{ + "Play": "Reproducción", + "Pause": "Pausa", + "Current Time": "Tiempo reproducido", + "Duration": "Duración total", + "Remaining Time": "Tiempo restante", + "Stream Type": "Tipo de secuencia", + "LIVE": "DIRECTO", + "Loaded": "Cargado", + "Progress": "Progreso", + "Fullscreen": "Pantalla completa", + "Non-Fullscreen": "Pantalla no completa", + "Mute": "Silenciar", + "Unmute": "No silenciado", + "Playback Rate": "Velocidad de reproducción", + "Subtitles": "Subtítulos", + "subtitles off": "Subtítulos desactivados", + "Captions": "Subtítulos especiales", + "captions off": "Subtítulos especiales desactivados", + "Chapters": "Capítulos", + "Close Modal Dialog": "Cerca de diálogo modal", + "You aborted the video playback": "Ha interrumpido la reproducción del vídeo.", + "A network error caused the video download to fail part-way.": "Un error de red ha interrumpido la descarga del vídeo.", + "The video could not be loaded, either because the server or network failed or because the format is not supported.": "No se ha podido cargar el vídeo debido a un fallo de red o del servidor o porque el formato es incompatible.", + "The video playback was aborted due to a corruption problem or because the video used features your browser did not support.": "La reproducción de vídeo se ha interrumpido por un problema de corrupción de datos o porque el vídeo precisa funciones que su navegador no ofrece.", + "No compatible source was found for this video.": "No se ha encontrado ninguna fuente compatible con este vídeo." +} +</code></pre> +<p>Notes:</p> +<ul> +<li>The file name should always be in the format <code>XX.json</code>, where <code>XX</code> is the language code. This should be a two letter code (for options see the bottom of this document) except for cases where a more specific code with sub-code is appropriate, e.g. <code>zh-CN.lang</code>.</li> +<li>For automatic inclusion at build time, add your language file to the <code>/lang</code> directory (see 'Adding Languages to Video.js below').</li> +</ul> +<h2 id="adding-languages-to-video-js">Adding Languages to Video.js</h2> +<p>Additional language support can be added to Video.js in multiple ways.</p> +<ol> +<li>Create language scripts out of your JSON objects by using our custom grunt task <code>vjslanguages</code>. This task is automatically run as part of the default grunt task in Video.JS, but can be configured to match your <code>src</code>/<code>dist</code> directories if different. Once these scripts are created, just add them to your DOM like any other script.</li> +</ol> +<p>NOTE: These need to be added after the core Video.js script.</p> +<ol> +<li>Add your JSON objects via the videojs.addLanguage API. Preferably in the HEAD element of your DOM or otherwise prior to player instantiation.</li> +</ol> +<pre><code class="lang-html"><head> +<script> + videojs.options.flash.swf = '../node_modules/videojs-swf/dist/video-js.swf'; + videojs.addLanguage('es', { + "Play": "Reproducción", + "Pause": "Pausa", + "Current Time": "Tiempo reproducido", + "Duration": "Duración total", + "Remaining Time": "Tiempo restante", + "Stream Type": "Tipo de secuencia", + "LIVE": "DIRECTO", + "Loaded": "Cargado", + "Progress": "Progreso", + "Fullscreen": "Pantalla completa", + "Non-Fullscreen": "Pantalla no completa", + "Mute": "Silenciar", + "Unmute": "No silenciado", + "Playback Rate": "Velocidad de reproducción", + "Subtitles": "Subtítulos", + "subtitles off": "Subtítulos desactivados", + "Captions": "Subtítulos especiales", + "captions off": "Subtítulos especiales desactivados", + "Chapters": "Capítulos", + "Close Modal Dialog": "Cerca de diálogo modal", + "You aborted the video playback": "Ha interrumpido la reproducción del vídeo.", + "A network error caused the video download to fail part-way.": "Un error de red ha interrumpido la descarga del vídeo.", + "The video could not be loaded, either because the server or network failed or because the format is not supported.": "No se ha podido cargar el vídeo debido a un fallo de red o del servidor o porque el formato es incompatible.", + "The video playback was aborted due to a corruption problem or because the video used features your browser did not support.": "La reproducción de vídeo se ha interrumpido por un problema de corrupción de datos o porque el vídeo precisa funciones que su navegador no ofrece.", + "No compatible source was found for this video.": "No se ha encontrado ninguna fuente compatible con este vídeo." +}); +</script> +</head> +</code></pre> +<ol> +<li>During a Video.js player instantiation. Adding the languages to the configuration object provided in the <code>data-setup</code> attribute.</li> +</ol> +<pre><code class="lang-html"><video id="example_video_1" class="video-js vjs-default-skin" + controls preload="auto" width="640" height="264" + data-setup='{"languages":{"es":{"Play":"Juego"}}}'> + <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> + <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' /> + <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' /> + + <track kind="captions" src="http://example.com/path/to/captions.vtt" srclang="en" label="English" default> + +</video> +</code></pre> +<p>Notes:</p> +<ul> +<li>This will add your language key/values to the Video.js player instances individually. If these values already exist in the global dictionary via the process above, those will be overridden for the player instance in question.</li> +</ul> +<h2 id="setting-default-language-in-a-video-js-player">Setting Default Language in a Video.js Player</h2> +<p>During a Video.js player instantiation you can force it to localize to a specific language by including the locale value into the configuration object via the <code>data-setup</code> attribute. Valid options listed at the bottom of the page for reference.</p> +<pre><code class="lang-html"><video id="example_video_1" class="video-js vjs-default-skin" + controls preload="auto" width="640" height="264" + data-setup='{"language":"es"}'> + <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> + <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' /> + <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' /> + + <track kind="captions" src="http://example.com/path/to/captions.vtt" srclang="en" label="English" default> + +</video> +</code></pre> +<h2 id="determining-player-language">Determining Player Language</h2> +<p>The player language is set to one of the following in descending priority:</p> +<ul> +<li>The language specified in setup options as above</li> +<li>The language specified by the closet element with a <code>lang</code> attribute. This could be the player itself or a parent element. Usually the document language is specified on the <code>html</code> tag.</li> +<li>Browser language preference (the first language if more than one is configured)</li> +<li>'en'</li> +</ul> +<p>The player language can be change after instantiation with <code>language('fr')</code>. However localizable text will not be modified by doing this, for best results set the language beforehand.</p> +<h2 id="language-selection">Language selection</h2> +<ul> +<li>Language codes are considered case-insensitively (<code>en-US</code> == <code>en-us</code>).</li> +<li>If there is no match for a language code with a subcode (<code>en-us</code>), a match for the primary code (<code>en</code>) is used if available.</li> +</ul> +<h2 id="localization-in-plugins">Localization in Plugins</h2> +<p>When you're developing a plugin, you can also introduce new localized strings. Simply wrap the string with the player's <code>localize</code> function:</p> +<pre><code class="lang-js">var details = '<div class="vjs-errors-details">' + player.localize('Technical details') + '</div>'; +</code></pre> +<h2 id="language-codes">Language Codes</h2> +<p>The following is a list of official language codes.</p> +<p><strong>NOTE:</strong> For supported language translations, please see the <a href="https://github.com/videojs/video.js/tree/master/lang">Languages Folder (/lang)</a> folder located in the project root.</p> +<table border="0" cellspacing="5" cellpadding="5"> + <tr> + <table> + <tr><th>ab<th><td>Abkhazian</td></tr> + <tr><th>aa<th><td>Afar</td></tr> + <tr><th>af<th><td>Afrikaans</td></tr> + <tr><th>sq<th><td>Albanian</td></tr> + <tr><th>am<th><td>Amharic</td></tr> + <tr><th>ar<th><td>Arabic</td></tr> + <tr><th>an<th><td>Aragonese</td></tr> + <tr><th>hy<th><td>Armenian</td></tr> + <tr><th>as<th><td>Assamese</td></tr> + <tr><th>ay<th><td>Aymara</td></tr> + <tr><th>az<th><td>Azerbaijani</td></tr> + <tr><th>ba<th><td>Bashkir</td></tr> + <tr><th>eu<th><td>Basque</td></tr> + <tr><th>bn<th><td>Bengali (Bangla)</td></tr> + <tr><th>dz<th><td>Bhutani</td></tr> + <tr><th>bh<th><td>Bihari</td></tr> + <tr><th>bi<th><td>Bislama</td></tr> + <tr><th>br<th><td>Breton</td></tr> + <tr><th>bg<th><td>Bulgarian</td></tr> + <tr><th>my<th><td>Burmese</td></tr> + <tr><th>be<th><td>Byelorussian (Belarusian)</td></tr> + <tr><th>km<th><td>Cambodian</td></tr> + <tr><th>ca<th><td>Catalan</td></tr> + <tr><th>zh<th><td>Chinese (Simplified)</td></tr> + <tr><th>zh<th><td>Chinese (Traditional)</td></tr> + <tr><th>co<th><td>Corsican</td></tr> + <tr><th>hr<th><td>Croatian</td></tr> + <tr><th>cs<th><td>Czech</td></tr> + <tr><th>da<th><td>Danish</td></tr> + <tr><th>nl<th><td>Dutch</td></tr> + <tr><th>en<th><td>English</td></tr> + <tr><th>eo<th><td>Esperanto</td></tr> + <tr><th>et<th><td>Estonian</td></tr> + <tr><th>fo<th><td>Faeroese</td></tr> + <tr><th>fa<th><td>Farsi</td></tr> + <tr><th>fj<th><td>Fiji</td></tr> + <tr><th>fi<th><td>Finnish</td></tr> + <tr><th>fr<th><td>French</td></tr> + <tr><th>fy<th><td>Frisian</td></tr> + <tr><th>gl<th><td>Galician</td></tr> + <tr><th>gd<th><td>Gaelic (Scottish)</td></tr> + <tr><th>gv<th><td>Gaelic (Manx)</td></tr> + <tr><th>ka<th><td>Georgian</td></tr> + <tr><th>de<th><td>German</td></tr> + <tr><th>el<th><td>Greek</td></tr> + <tr><th>kl<th><td>Greenlandic</td></tr> + <tr><th>gn<th><td>Guarani</td></tr> + <tr><th>gu<th><td>Gujarati</td></tr> + <tr><th>ht<th><td>Haitian Creole</td></tr> + <tr><th>ha<th><td>Hausa</td></tr> + <tr><th>he<th><td>Hebrew</td></tr> + <tr><th>hi<th><td>Hindi</td></tr> + <tr><th>hu<th><td>Hungarian</td></tr> + <tr><th>is<th><td>Icelandic</td></tr> + <tr><th>io<th><td>Ido</td></tr> + <tr><th>id<th><td>Indonesian</td></tr> + <tr><th>ia<th><td>Interlingua</td></tr> + <tr><th>ie<th><td>Interlingue</td></tr> + <tr><th>iu<th><td>Inuktitut</td></tr> + <tr><th>ik<th><td>Inupiak</td></tr> + <tr><th>ga<th><td>Irish</td></tr> + <tr><th>it<th><td>Italian</td></tr> + <tr><th>ja<th><td>Japanese</td></tr> + <tr><th>jv<th><td>Javanese</td></tr> + <tr><th>kn<th><td>Kannada</td></tr> + <tr><th>ks<th><td>Kashmiri</td></tr> + <tr><th>kk<th><td>Kazakh</td></tr> + <tr><th>rw<th><td>Kinyarwanda (Ruanda)</td></tr> + <tr><th>ky<th><td>Kirghiz</td></tr> + <tr><th>rn<th><td>Kirundi (Rundi)</td></tr> + <tr><th>ko<th><td>Korean</td></tr> + <tr><th>ku<th><td>Kurdish</td></tr> + <tr><th>lo<th><td>Laothian</td></tr> + <tr><th>la<th><td>Latin</td></tr> + <tr><th>lv<th><td>Latvian (Lettish)</td></tr> + <tr><th>li<th><td>Limburgish ( Limburger)</td></tr> + <tr><th>ln<th><td>Lingala</td></tr> + <tr><th>lt<th><td>Lithuanian</td></tr> + <tr><th>mk<th><td>Macedonian</td></tr> + <tr><th>mg<th><td>Malagasy</td></tr> + <tr><th>ms<th><td>Malay</td></tr> + <tr><th>ml<th><td>Malayalam</td></tr> + <tr><th>mt<th><td>Maltese</td></tr> + <tr><th>mi<th><td>Maori</td></tr> + <tr><th>mr<th><td>Marathi</td></tr> + <tr><th>mo<th><td>Moldavian</td></tr> + <tr><th>mn<th><td>Mongolian</td></tr> + <tr><th>na<th><td>Nauru</td></tr> + <tr><th>ne<th><td>Nepali</td></tr> + <tr><th>no<th><td>Norwegian</td></tr> + <tr><th>oc<th><td>Occitan</td></tr> + <tr><th>or<th><td>Oriya</td></tr> + <tr><th>om<th><td>Oromo (Afan, Galla)</td></tr> + <tr><th>ps<th><td>Pashto (Pushto)</td></tr> + <tr><th>pl<th><td>Polish</td></tr> + <tr><th>pt<th><td>Portuguese</td></tr> + <tr><th>pa<th><td>Punjabi</td></tr> + <tr><th>qu<th><td>Quechua</td></tr> + <tr><th>rm<th><td>Rhaeto-Romance</td></tr> + <tr><th>ro<th><td>Romanian</td></tr> + <tr><th>ru<th><td>Russian</td></tr> + <tr><th>sm<th><td>Samoan</td></tr> + <tr><th>sg<th><td>Sangro</td></tr> + <tr><th>sa<th><td>Sanskrit</td></tr> + <tr><th>sr<th><td>Serbian</td></tr> + <tr><th>sh<th><td>Serbo-Croatian</td></tr> + <tr><th>st<th><td>Sesotho</td></tr> + <tr><th>tn<th><td>Setswana</td></tr> + <tr><th>sn<th><td>Shona</td></tr> + <tr><th>ii<th><td>Sichuan Yi</td></tr> + <tr><th>sd<th><td>Sindhi</td></tr> + <tr><th>si<th><td>Sinhalese</td></tr> + <tr><th>ss<th><td>Siswati</td></tr> + <tr><th>sk<th><td>Slovak</td></tr> + <tr><th>sl<th><td>Slovenian</td></tr> + <tr><th>so<th><td>Somali</td></tr> + <tr><th>es<th><td>Spanish</td></tr> + <tr><th>su<th><td>Sundanese</td></tr> + <tr><th>sw<th><td>Swahili (Kiswahili)</td></tr> + <tr><th>sv<th><td>Swedish</td></tr> + <tr><th>tl<th><td>Tagalog</td></tr> + <tr><th>tg<th><td>Tajik</td></tr> + <tr><th>ta<th><td>Tamil</td></tr> + <tr><th>tt<th><td>Tatar</td></tr> + <tr><th>te<th><td>Telugu</td></tr> + <tr><th>th<th><td>Thai</td></tr> + <tr><th>bo<th><td>Tibetan</td></tr> + <tr><th>ti<th><td>Tigrinya</td></tr> + <tr><th>to<th><td>Tonga</td></tr> + <tr><th>ts<th><td>Tsonga</td></tr> + <tr><th>tr<th><td>Turkish</td></tr> + <tr><th>tk<th><td>Turkmen</td></tr> + <tr><th>tw<th><td>Twi</td></tr> + <tr><th>ug<th><td>Uighur</td></tr> + <tr><th>uk<th><td>Ukrainian</td></tr> + <tr><th>ur<th><td>Urdu</td></tr> + <tr><th>uz<th><td>Uzbek</td></tr> + <tr><th>vi<th><td>Vietnamese</td></tr> + <tr><th>vo<th><td>Volapük</td></tr> + <tr><th>wa<th><td>Wallon</td></tr> + <tr><th>cy<th><td>Welsh</td></tr> + <tr><th>wo<th><td>Wolof</td></tr> + <tr><th>xh<th><td>Xhosa</td></tr> + <tr><th>yi<th><td>Yiddish</td></tr> + <tr><th>yo<th><td>Yoruba</td></tr> + <tr><th>zu<th><td>Zulu</td></tr> + </table> + </tr> +</table> + +<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> diff --git a/js/videojs/docs/legacy-docs/guides/options.html b/js/videojs/docs/legacy-docs/guides/options.html new file mode 100644 index 0000000..c094f13 --- /dev/null +++ b/js/videojs/docs/legacy-docs/guides/options.html @@ -0,0 +1,108 @@ +<!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-options.html"> +</head> +<body> +<p class="legacydocsnote">This documentation is for an outdated version of Video.js. See <a href="https://docs.videojs.com/tutorial-options.html">documentation for the current release</a>. + +<div id="sidenav" class="sidenav"></div> +<div id="main" class="main"> +<h1 id="options">Options</h1> +<h2 id="setting-options">Setting Options</h2> +<p>The Video.js embed code is simply an HTML5 video tag, so for many of the options you can use the standard tag attributes to set the options.</p> +<pre><code class="lang-html"><video controls autoplay preload="auto" ...> +</code></pre> +<p>Alternatively, you can use the data-setup attribute to provide options in the <a href="http://json.org/example.html">JSON</a> format. This is also how you would set options that aren't standard to the video tag.</p> +<pre><code class="lang-html"><video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...> +</code></pre> +<p>Finally, if you're not using the data-setup attribute to trigger the player setup, you can pass in an object with the player options as the second argument in the javascript setup function.</p> +<pre><code class="lang-js">videojs("example_video_1", { "controls": true, "autoplay": false, "preload": "auto" }); +</code></pre> +<h2 id="individual-options">Individual Options</h2> +<blockquote> +<h3 id="note-on-video-tag-attributes">Note on Video Tag Attributes</h3> +<p>With HTML5 video tag attributes that can only be true or false (boolean), you simply include the attribute (no equals sign) to turn it on, or exclude it to turn it off. For example, to turn controls on:</p> +</blockquote> +<p>WRONG</p> +<pre><code class="lang-html"><video controls="true" ...> +</code></pre> +<p>RIGHT</p> +<pre><code class="lang-html"><video controls ...> +</code></pre> +<blockquote> +<p>The biggest issue people run into is trying to set these values to false using false as the value (e.g. controls="false") which actually does the opposite and sets the value to true because the attribute is still included. If you need the attribute to include an equals sign for XHTML validation, you can set the attribute's value to the same as its name (e.g. controls="controls").</p> +</blockquote> +<h3 id="controls">controls</h3> +<p>The controls option sets whether or not the player has controls that the user can interact with. Without controls the only way to start the video playing is with the autoplay attribute or through the API.</p> +<pre><code class="lang-html"><video controls ...> +or +{ "controls": true } +</code></pre> +<h3 id="autoplay">autoplay</h3> +<p>If autoplay is true, the video will start playing as soon as page is loaded (without any interaction from the user). +NOT SUPPORTED BY APPLE iOS DEVICES. Apple blocks the autoplay functionality in an effort to protect it's customers from unwillingly using a lot of their (often expensive) monthly data plans. A user touch/click is required to start the video in this case.</p> +<pre><code class="lang-html"><video autoplay ...> +or +{ "autoplay": true } +</code></pre> +<h3 id="preload">preload</h3> +<p>The preload attribute informs the browser whether or not the video data should begin downloading as soon as the video tag is loaded. The options are auto, metadata, and none.</p> +<p>'auto': Start loading the video immediately (if the browser agrees). Some mobile devices like iPhones and iPads will not preload the video in order to protect their users' bandwidth. This is why the value is called 'auto' and not something more final like 'true'.</p> +<p>'metadata': Load only the meta data of the video, which includes information like the duration and dimensions of the video.</p> +<p>'none': Don't preload any of the video data. This will wait until the user clicks play to begin downloading.</p> +<pre><code class="lang-html"><video preload ...> +or +{ "preload": "auto" } +</code></pre> +<h3 id="poster">poster</h3> +<p>The poster attribute sets the image that displays before the video begins playing. This is often a frame of the video or a custom title screen. As soon as the user clicks play the image will go away.</p> +<pre><code class="lang-html"><video poster="myPoster.jpg" ...> +or +{ "poster": "myPoster.jpg" } +</code></pre> +<h3 id="loop">loop</h3> +<p>The loop attribute causes the video to start over as soon as it ends. This could be used for a visual effect like clouds in the background.</p> +<pre><code class="lang-html"><video loop ...> +or +{ "loop": true } +</code></pre> +<h3 id="width">width</h3> +<p>The width attribute sets the display width of the video.</p> +<pre><code class="lang-html"><video width="640" ...> +or +{ "width": 640 } +</code></pre> +<h3 id="height">height</h3> +<p>The height attribute sets the display height of the video.</p> +<pre><code class="lang-html"><video height="480" ...> +or +{ "height": 480 } +</code></pre> +<h2 id="component-options">Component Options</h2> +<p>You can set the options for any single player component. For instance, if you wanted to remove the <code>muteToggle</code> button, which +is a child of <code>controlBar</code>, you can just set that component to false:</p> +<pre><code class="lang-js">var player = videojs('video-id', { + controlBar: { + muteToggle: false + } +}); +</code></pre> +<p>This also works using the <code>data-setup</code> attribute on the video element, just remember the options need to use proper JSON +notation.</p> +<pre><code class="lang-html"><video ... data-setup='{ "controlBar": { "muteToggle": false } }'></video> +</code></pre> +<p>The <a href="./components.html">components guide</a> has an excellent breakdown of the structure of a player, you +just need to remember to nest child components in a <code>children</code> array for each level.</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> diff --git a/js/videojs/docs/legacy-docs/guides/plugins.html b/js/videojs/docs/legacy-docs/guides/plugins.html new file mode 100644 index 0000000..200c687 --- /dev/null +++ b/js/videojs/docs/legacy-docs/guides/plugins.html @@ -0,0 +1,60 @@ +<!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-plugins.html"> +</head> +<body> +<p class="legacydocsnote">This documentation is for an outdated version of Video.js. See <a href="https://docs.videojs.com/tutorial-plugins.html">documentation for the current release</a>. + +<div id="sidenav" class="sidenav"></div> +<div id="main" class="main"> +<h1 id="plugins">Plugins</h1> +<p>If you've built something cool with Video.js, you can easily share it with the rest of the world by creating a plugin. Although, you can roll your own, you can also use <a href="https://github.com/dmlap/generator-videojs-plugin">generator-videojs-plugin</a>, a <a href="http://yeoman.io">Yeoman</a> generator that provides scaffolding for video.js plugins including:</p> +<ul> +<li><a href="http://gruntjs.com">Grunt</a> for build management</li> +<li><a href="https://www.npmjs.org">npm</a> for dependency management</li> +<li><a href="http://qunitjs.com">QUnit</a> for testing</li> +</ul> +<h2 id="step-1-write-some-javascript">Step 1: Write Some Javascript</h2> +<p>You may have already done this step. Code up something interesting and then wrap it in a function. At the most basic level, that's all a video.js plugin is. By convention, plugins take a hash of options as their first argument:</p> +<pre><code class="lang-js"> function examplePlugin(options) { + this.on('play', function(e) { + console.log('playback has started!'); + }); + }; +</code></pre> +<p>When it's activated, <code>this</code> will be the Video.js player your plugin is attached to. You can use anything you'd like in the <a href="./api.html">Video.js API</a> when you're writing a plugin: change the <code>src</code>, mess up the DOM, or listen for and emit your own events.</p> +<h2 id="step-2-registering-a-plugin">Step 2: Registering A Plugin</h2> +<p>It's time to give the rest of the world the opportunity to be awed by your genius. When your plugin is loaded, it needs to let Video.js know this amazing new functionality is now available:</p> +<pre><code class="lang-js"> videojs.plugin('examplePlugin', examplePlugin); +</code></pre> +<p>From this point on, your plugin will be added to the Video.js prototype and will show up as a property on every instance created. Make sure you choose a unique name that doesn't clash with any of the properties already in Video.js. Which leads us to...</p> +<h2 id="step-3-using-a-plugin">Step 3: Using A Plugin</h2> +<p>There are two ways to initialize a plugin. If you're creating your video tag dynamically, you can specify the plugins you'd like to initialize with it and any options you want to pass to them:</p> +<pre><code class="lang-js"> videojs('vidId', { + plugins: { + examplePlugin: { + exampleOption: true + } + } + }); +</code></pre> +<p>If you've already initialized your video tag, you can activate a plugin at any time by calling its setup function directly:</p> +<pre><code class="lang-js"> var video = videojs('cool-vid'); + video.examplePlugin({ exampleOption: true }); +</code></pre> +<p>That's it. Head on over to the <a href="https://github.com/videojs/video.js/wiki/Plugins">Video.js wiki</a> and add your plugin to the list so everyone else can check it out.</p> +<h2 id="how-should-i-use-the-video-js-icons-in-my-plugin-">How should I use the Video.js icons in my plugin?</h2> +<p>If you'd like to use any of the icons available in the <a href="http://videojs.github.io/font/">Video.js icon set</a>, please target them via the CSS class names instead of codepoints. The codepoints <em>may</em> change between versions of the font, so using the class names ensures that your plugin will stay up to date with any font changes.</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> diff --git a/js/videojs/docs/legacy-docs/guides/removing-players.html b/js/videojs/docs/legacy-docs/guides/removing-players.html new file mode 100644 index 0000000..3d52c12 --- /dev/null +++ b/js/videojs/docs/legacy-docs/guides/removing-players.html @@ -0,0 +1,44 @@ +<!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"> +</head> +<body> +<p class="legacydocsnote">This documentation is for an outdated version of Video.js. See <a href="https://docs.videojs.com">documentation for the current release</a>. + +<div id="sidenav" class="sidenav"></div> +<div id="main" class="main"> +<h1 id="removing-players">Removing Players</h1> +<p>Sometimes, you want to remove players after page load (in single page apps or modals, for instance). It's easy to manage, but there are some simple rules you need to follow.</p> +<h2 id="call-dispose-">Call <code>.dispose()</code></h2> +<p>To remove the html associated with your videojs player from the page always call the player's <a href="http://docs.videojs.com/docs/api/player.html#Methodsdispose"><code>dispose()</code></a> method:</p> +<pre><code class="lang-js">var oldPlayer = document.getElementById('my-player'); +videojs(oldPlayer).dispose(); +</code></pre> +<p>This method will:</p> +<ol> +<li>reset the internal state of videojs</li> +<li>remove the player's dom from the page</li> +</ol> +<h2 id="showing-hiding-a-player">Showing / Hiding a Player</h2> +<p>For instance, if you have a modal that a player appears in, you should create the player when the modal pops up. When the modal hides, dispose the player. If you try to hide the Flash tech, things will go poorly. Even with other tech, calling <code>dispose()</code> on a player that's not needed will free up resources for the browser.</p> +<h2 id="why-is-this-needed-">Why Is This Needed?</h2> +<p>VideoJS internally tracks all players and their associated data by html id attribute. If you plan to create new players with the same id as previously created players, you'll need to call the player's dispose() method to clear VideoJS's internal state before creating the new player.</p> +<h2 id="signs-you-did-it-wrong">Signs You Did It Wrong</h2> +<pre><code>TypeError: this.el_.vjs_getProperty is not a function +"VIDEOJS:" "Video.js: buffered unavailable on Hls playback technology element." TypeError: this.el_.vjs_getProperty is not a function +Stack trace: +... +</code></pre><p>If you encounter a console error in the browser similar to the above, you've probably forgotten to <code>dispose()</code> a player before removing it from the dom. This would happen when using the <a href="https://github.com/videojs/videojs-contrib-hls">contrib-hls</a> plugin.</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> diff --git a/js/videojs/docs/legacy-docs/guides/setup.html b/js/videojs/docs/legacy-docs/guides/setup.html new file mode 100644 index 0000000..9e29e7e --- /dev/null +++ b/js/videojs/docs/legacy-docs/guides/setup.html @@ -0,0 +1,107 @@ +<!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-setup.html"> +</head> +<body> +<p class="legacydocsnote">This documentation is for an outdated version of Video.js. See <a href="https://docs.videojs.com/tutorial-setup.html">documentation for the current release</a>. + +<div id="sidenav" class="sidenav"></div> +<div id="main" class="main"> +<h1 id="setup">Setup</h1> +<p>Video.js is pretty easy to set up. It can take a matter of seconds to get the player up and working on your web page.</p> +<h2 id="step-1-include-the-video-js-javascript-and-css-files-in-the-head-of-your-page-">Step 1: Include the Video.js Javascript and CSS files in the head of your page.</h2> +<p>You can download the Video.js source and host it on your own servers, or use the free CDN hosted version. As of Video.js 5.0, the source is <a href="http://babeljs.io/">transpiled from ES2015</a> (formerly known as ES6) to <a href="https://es5.github.io/">ES5</a>, but IE8 only supports ES3. In order to continue to support IE8, we've bundled an <a href="https://github.com/es-shims/es5-shim">ES5 shim and sham</a> together and hosted it on the CDN.</p> +<pre><code class="lang-html"><script src="//vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script> +</code></pre> +<h3 id="cdn-version">CDN Version</h3> +<pre><code class="lang-html"><link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet"> +<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script> +</code></pre> +<p>Alternatively you can always <a href="http://videojs.com/getting-started/">go here</a> to get the latest URL for videojs CDN.</p> +<p>We include a stripped down Google Analytics pixel that tracks a random percentage (currently 1%) of players loaded from the CDN. This allows us to see (roughly) what browsers are in use in the wild, along with other useful metrics such as OS and device. If you'd like to disable analytics, you can simply include the following global <strong>before</strong> including Video.js:</p> +<pre><code class="lang-js">window.HELP_IMPROVE_VIDEOJS = false; +</code></pre> +<h2 id="install-via-package-manager">Install via package manager</h2> +<h3 id="npm">NPM</h3> +<pre><code>$ npm install --save video.js +</code></pre><h3 id="bower">Bower</h3> +<pre><code>$ bower install --save video.js +</code></pre><h3 id="self-hosted-">Self Hosted.</h3> +<p>To entirely self-host, you'll need to pull in the font files and let Video.js know where the swf is located. If you simply copy the dist folder or zip file contents into your project everything +should Just Work™, but the paths can easily be changed by editing the LESS file and re-building, or by modifying the generated CSS file. Additionally include the <a href="https://www.npmjs.com/package/videojs-vtt.js">videojs-vtt.js</a> source, which adds the <code>WebVTT</code> object to the global scope.</p> +<pre><code class="lang-html"><link href="//example.com/path/to/video-js.min.css" rel="stylesheet"> +<script src="//example.com/path/to/videojs-vtt.js"></script> +<script src="//example.com/path/to/video.min.js"></script> +<script> + videojs.options.flash.swf = "http://example.com/path/to/video-js.swf" +</script> +</code></pre> +<h2 id="step-2-add-an-html5-video-tag-to-your-page-">Step 2: Add an HTML5 video tag to your page.</h2> +<p>With Video.js you just use an HTML5 video tag to embed a video. Video.js will then read the tag and make it work in all browsers, not just ones that support HTML5 video. Beyond the basic markup, Video.js needs a few extra pieces.</p> +<blockquote> +<p>Note: The <code>data-setup</code> attribute described here should not be used if you use the alternative setup described in the next section.</p> +</blockquote> +<ol> +<li><p>The 'data-setup' Attribute tells Video.js to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute (see <a href="./options.html">options</a>). There are other methods for initializing the player, but this is the easiest.</p> +</li> +<li><p>The 'id' Attribute: Should be used and unique for every video on the same page.</p> +</li> +<li><p>The 'class' attribute contains two classes:</p> +<ul> +<li><code>video-js</code> applies styles that are required for Video.js functionality, like fullscreen and subtitles.</li> +<li><code>vjs-default-skin</code> applies the default skin to the HTML controls, and can be removed or overridden to create your own controls design.</li> +</ul> +</li> +</ol> +<p>Otherwise include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video.*</p> +<pre><code class="lang-html"><video id="example_video_1" class="video-js vjs-default-skin" + controls preload="auto" width="640" height="264" + poster="http://video-js.zencoder.com/oceans-clip.png" + data-setup='{"example_option":true}'> + <source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" /> + <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /> + <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /> + <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> +</video> +</code></pre> +<p>By default, the big play button is located in the upper left hand corner so it doesn't cover up the interesting parts of the poster. If you'd prefer to center the big play button, you can add an additional <code>vjs-big-play-centered</code> class to your video element. For example:</p> +<pre><code class="lang-html"><video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" + controls preload="auto" width="640" height="264" + poster="http://video-js.zencoder.com/oceans-clip.png" + data-setup='{"example_option":true}'> + ... +</video> +</code></pre> +<h2 id="alternative-setup-for-dynamically-loaded-html">Alternative Setup for Dynamically Loaded HTML</h2> +<p>If your web page or application loads the video tag dynamically (ajax, appendChild, etc.), so that it may not exist when the page loads, you'll want to manually set up the player instead of relying on the data-setup attribute. To do this, first remove the data-setup attribute from the tag so there's no confusion around when the player is initialized. Next, run the following javascript some time after the Video.js javascript library has loaded, and after the video tag has been loaded into the DOM.</p> +<pre><code class="lang-js">videojs("example_video_1", {}, function(){ + // Player (this) is initialized and ready. +}); +</code></pre> +<p>The first argument in the <code>videojs</code> function is the ID of your video tag. Replace it with your own.</p> +<p>The second argument is an options object. It allows you to set additional options like you can with the data-setup attribute.</p> +<p>The third argument is a 'ready' callback. Once Video.js has initialized it will call this function.</p> +<p>Instead of using an element ID, you can also pass a reference to the element itself.</p> +<pre><code class="lang-js">videojs(document.getElementById('example_video_1'), {}, function() { + // This is functionally the same as the previous example. +}); +</code></pre> +<pre><code class="lang-js">videojs(document.getElementsByClassName('awesome_video_class')[0], {}, function() { + // You can grab an element by class if you'd like, just make sure + // if it's an array that you pick one (here we chose the first). +}); +</code></pre> +<p>* If you have trouble playing back content you know is in the <a href="http://blog.zencoder.com/2013/09/13/what-formats-do-i-need-for-html5-video/">correct format</a>, your HTTP server might not be delivering the content with the correct <a href="http://en.wikipedia.org/wiki/Internet_media_type#Type_video">MIME type</a>. Please double check your content's headers before opening an <a href="https://github.com/videojs/video.js/blob/master/CONTRIBUTING.md">issue</a>.</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> diff --git a/js/videojs/docs/legacy-docs/guides/skins.html b/js/videojs/docs/legacy-docs/guides/skins.html new file mode 100644 index 0000000..d6a32d8 --- /dev/null +++ b/js/videojs/docs/legacy-docs/guides/skins.html @@ -0,0 +1,60 @@ +<!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-skins.html"> +</head> +<body> +<p class="legacydocsnote">This documentation is for an outdated version of Video.js. See <a href="https://docs.videojs.com/tutorial-skins.html">documentation for the current release</a>. + +<div id="sidenav" class="sidenav"></div> +<div id="main" class="main"> +<h1 id="skins">Skins</h1> +<h2 id="base-skin">Base Skin</h2> +<p>The base Video.js skin is made using HTML and CSS (although we use the <a href="http://sass-lang.com">Sass preprocessor</a>), +and by default these styles are added to the DOM for you! +That means you can build a custom skin by simply taking advantage of the cascading aspect of CSS and overriding +the styles you'd like to change.</p> +<p>If you don't want Video.js to inject the base styles for you, you can disable it by setting <code>window.VIDEOJS_NO_BASE_THEME = true</code> before Video.js is loaded. +Keep in mind that without these base styles enabled, you'll need to manually include them.</p> +<p>Video.js does not currently include the base skin automatically yet, so, this option isn't necessary.</p> +<h2 id="default-style-elements">Default style elements</h2> +<p>Video.js uses a couple of style elements dynamically, specifically, there's a default styles element as well as a player dimensions style element. +They are used to provide extra default flexiblity with styling the player. However, in some cases, like if a user has the HEAD tag managed by React, users do not want this. +When <code>window.VIDEOJS_NO_DYNAMIC_STYLE</code> is set to <code>true</code>, video.js will <em>not</em> include these element in the page. +This means that default dimensions and configured player dimensions will <em>not</em> be applied. +For example, the following player will end up having a width and height of 0 when initialized if <code>window.VIDEOJS_NO_DYNAMIC_STYLE === true</code>:</p> +<pre><code class="lang-html"><video width="600" height="300"></video> +</code></pre> +<h3 id="-player-width-and-player-height-"><code>Player#width</code> and <code>Player#height</code></h3> +<p>When <code>VIDEOJS_NO_DYNAMIC_STYLE</code> is set, <code>Player#width</code> and <code>Player#height</code> will apply any width and height +that is set directly to the video element (or whatever element the current tech uses).</p> +<h2 id="icons">Icons</h2> +<p>You can view all of the icons available in the base theme by renaming and viewing +<a href="https://github.com/videojs/video.js/blob/master/sandbox/icons.html.example"><code>icons.html.example</code></a> in the sandbox directory.</p> +<h2 id="customization">Customization</h2> +<p>When you create a new skin, the easiest way to get started is to simply override the base Video.js theme. +You should include a new class matching the name of your theme, then just start overriding!</p> +<pre><code class="lang-css">.vjs-skin-hotdog-stand { color: #FF0000; } +.vjs-skin-hotdog-stand .vjs-control-bar { background: #FFFF00; } +.vjs-skin-hotdog-stand .vjs-play-progress { background: #FF0000; } +</code></pre> +<p>This would take care of the major areas of the skin (play progress, the control bar background, and icon colors), +but you can skin any other aspect. +Our suggestion is to use a browser such as Firefox and Chrome, +and use the developer tools to inspect the different elements and see what you'd like to change and what classes +to target when you do so.</p> +<p>More custom skins will be available for download soon. +If you have one you like you can share it by forking <a href="http://codepen.io/heff/pen/EarCt">this example on CodePen.io</a>, +and adding a link on the <a href="https://github.com/videojs/video.js/wiki/Skins">Skins wiki page</a>.</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> diff --git a/js/videojs/docs/legacy-docs/guides/tech.html b/js/videojs/docs/legacy-docs/guides/tech.html new file mode 100644 index 0000000..3a95040 --- /dev/null +++ b/js/videojs/docs/legacy-docs/guides/tech.html @@ -0,0 +1,92 @@ +<!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-tech.html"> +</head> +<body> +<p class="legacydocsnote">This documentation is for an outdated version of Video.js. See <a href="https://docs.videojs.com/tutorial-tech.html">documentation for the current release</a>. + +<div id="sidenav" class="sidenav"></div> +<div id="main" class="main"> +<h1 id="playback-technology-tech-">Playback Technology ("Tech")</h1> +<p>Playback Technology refers to the specific browser or plugin technology used to play the video or audio. When using HTML5, the playback technology is the video or audio element. When using Flash, the playback technology is the specific Flash player used, e.g. Flowplayer, YouTube Player, video-js.swf, etc. (not just "Flash"). This could also include Silverlight, Quicktime, or any other plugin that will play back video in the browser, as long as there is an API wrapper written for it.</p> +<p>Essentially we're using HTML5 and plugins only as video decoders, and using HTML and JavaScript to create a consistent API and skinning experience across all of them.</p> +<h2 id="building-an-api-wrapper">Building an API Wrapper</h2> +<p>We'll write a more complete guide on writing a wrapper soon, but for now the best resource is the <a href="https://github.com/zencoder/video-js/tree/master/src">Video.js</a> source where you can see how both the HTML5 and video-js.swf API wrappers were created.</p> +<h2 id="required-methods">Required Methods</h2> +<p>canPlayType +play +pause +currentTime +volume +duration +buffered +supportsFullScreen</p> +<h2 id="required-events">Required Events</h2> +<p>loadstart +play +pause +playing +ended +volumechange +durationchange +error</p> +<h2 id="optional-events-include-if-supported-">Optional Events (include if supported)</h2> +<p>timeupdate +progress +enterFullScreen +exitFullScreen</p> +<h1 id="adding-playback-technology">Adding Playback Technology</h1> +<p>When adding additional Tech to a video player, make sure to add the supported tech to the video object.</p> +<h3 id="tag-method-">Tag Method:</h3> +<pre><code><video data-setup='{"techOrder": ["html5", "flash", "other supported tech"]}' +</code></pre><h3 id="object-method-">Object Method:</h3> +<pre><code>videojs("videoID", { + techOrder: ["html5", "flash", "other supported tech"] +}); +</code></pre><h1 id="technology-ordering">Technology Ordering</h1> +<p>By default Video.js performs "Tech-first" ordering when it searches for a source/tech combination to play videos. This means that if you have two sources and two techs, video.js will try to play each video with the first tech in the <code>techOrder</code> option property before moving on to try the next playback technology.</p> +<p>Tech-first ordering can present a problem if you have a <code>sourceHandler</code> that supports both <code>Html5</code> and <code>Flash</code> techs such as videojs-contrib-hls.</p> +<p>For example, given the following video element:</p> + <video data-setup='{"techOrder": ["html5", "flash"]}'> + <source src="http://your.static.provider.net/path/to/video.m3u8" type="application/x-mpegURL"> + <source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4"> + </video> + +<p>There is a good chance that the mp4 source will be selected on platforms that do not have media source extensions. Video.js will try all sources against the first playback technology, in this case <code>Html5</code>, and select the first source that can play - in this case MP4.</p> +<p>In "Tech-first" mode, the tests run something like this: + Can video.m3u8 play with Html5? No... + Can video.mp4 play with Html5? Yes! Use the second source.</p> +<p>Video.js now provides another method of selecting the source - "Source-first" ordering. In this mode, Video.js tries the first source against every tech in <code>techOrder</code> before moving onto the next source.</p> +<p>With a player setup as follows:</p> + <video data-setup='{"techOrder": ["html5", "flash"], "sourceOrder": true}'> + <source src="http://your.static.provider.net/path/to/video.m3u8" type="application/x-mpegURL"> + <source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4"> + </video> + +<p>The Flash-based HLS support will be tried before falling back to the MP4 source.</p> +<p>In "Source-first" mode, the tests run something like this: + Can video.m3u8 play with Html5? No... + Can video.m3u8 play with Flash? Yes! Use the first source.</p> +<h1 id="flash-technology">Flash Technology</h1> +<p>The Flash playback tech is a part of the default <code>techOrder</code>. You may notice undesirable playback behavior in browsers that are subject to using this playback tech, in particular when scrubbing and seeking within a video. This behavior is a result of Flash's progressive video playback.</p> +<h2 id="enabling-streaming-playback">Enabling Streaming Playback</h2> +<p>In order to force the Flash tech to choose streaming playback, you need to provide a valid streaming source <strong>before other valid Flash video sources</strong>. This is necessary because of the source selection algorithm, where playback tech chooses the first possible source object with a valid type. Valid streaming <code>type</code> values include <code>rtmp/mp4</code> and <code>rtmp/flv</code>. The streaming <code>src</code> value requires valid connection and stream strings, separated by an <code>&</code>. An example of supplying a streaming source through your HTML markup might look like:</p> +<pre><code><source src="rtmp://your.streaming.provider.net/cfx/st/&mp4:path/to/video.mp4" type="rtmp/mp4"> +<source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4"> +<source src="http://your.static.provider.net/path/to/video.webm" type="video/webm"> +</code></pre><p>You may optionally use the last <code>/</code> as the separator between connection and stream strings, for example:</p> +<pre><code><source src="rtmp://your.streaming.provider.net/cfx/st/mp4:video.mp4" type="rtmp/mp4"> +</code></pre><p>All four RTMP protocols are valid in the <code>src</code> (RTMP, RTMPT, RTMPE, and RTMPS).</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> diff --git a/js/videojs/docs/legacy-docs/guides/text-tracks.html b/js/videojs/docs/legacy-docs/guides/text-tracks.html new file mode 100644 index 0000000..407abf8 --- /dev/null +++ b/js/videojs/docs/legacy-docs/guides/text-tracks.html @@ -0,0 +1,184 @@ +<!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> diff --git a/js/videojs/docs/legacy-docs/guides/tracks.html b/js/videojs/docs/legacy-docs/guides/tracks.html new file mode 100644 index 0000000..3ef0a8c --- /dev/null +++ b/js/videojs/docs/legacy-docs/guides/tracks.html @@ -0,0 +1,29 @@ +<!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-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-tracks.html">documentation for the current release</a>. + +<div id="sidenav" class="sidenav"></div> +<div id="main" class="main"> +<h1 id="tracks">Tracks</h1> +<p>There are currently three types of tracks</p> +<ul> +<li><a href="./audio-tracks.html">AudioTracks</a> - allows the selection of alternative AudioTracks for a video</li> +<li><a href="./video-tracks.html">VideoTracks</a> - allows the selection of an alternative VideoTrack for a video</li> +<li><a href="./text-tracks.html">TextTracks</a> - Text Tracks are used to display subtitles and captions, and add a menu for navigating between chapters in a video.</li> +</ul> + +<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> diff --git a/js/videojs/docs/legacy-docs/guides/video-tracks.html b/js/videojs/docs/legacy-docs/guides/video-tracks.html new file mode 100644 index 0000000..ab5ba1c --- /dev/null +++ b/js/videojs/docs/legacy-docs/guides/video-tracks.html @@ -0,0 +1,80 @@ +<!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> |