Skip to content

Commit

Permalink
docs: Redirect guides to videojs.com (#7706)
Browse files Browse the repository at this point in the history 
Co-authored-by: mister-ben <git@misterben.me>
  • Loading branch information
@misteroneill @mister-ben
misteroneill and mister-ben authored Apr 6, 2022
1 parent c5a0376 commit 9cec1de
Show file tree
Hide file tree
Showing 29 changed files with 65 additions and 5,374 deletions.
9 changes: 9 additions & 0 deletions build/netlify-docs.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
const sh = require('shelljs');
const semver = require('semver');
const path = require('path');

const GIT_LOG = `git log --format=%B -n 1 ${process.env.COMMIT_REF}`;
const output = sh.exec(GIT_LOG, {async: false, silent: true}).stdout;
Expand All @@ -11,4 +12,12 @@ if (process.env.BRANCH === 'main' && semver.valid(output.trim()) === null) {
} else {
sh.exec('npm run docs:api');
sh.cp('-R', 'docs/legacy-docs', 'docs/api/docs');

// move docs/_redirects into the root of the docs site
//
// this is needed because the root of the docs site is docs/api, which is not
// in version control.
const docsPath = path.join(__dirname, '..', 'docs');

sh.cp(path.join(docsPath, '_redirects'), path.join(docsPath, 'api', '_redirects'));
}
27 changes: 27 additions & 0 deletions docs/_redirects
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# Netlify redirects to redirect old tutorial pages to new guide pages
/tutorial-angular.html https://videojs.com/guides/angular 301!
/tutorial-audio-tracks.html https://videojs.com/guides/audio-tracks 301!
/tutorial-components.html https://videojs.com/guides/components 301!
/tutorial-debugging.html https://videojs.com/guides/debugging 301!
/tutorial-embeds.html https://videojs.com/guides/embeds 301!
/tutorial-event-target.html https://videojs.com/guides/event-target 301!
/tutorial-faq.html https://videojs.com/guides/faq 301!
/tutorial-hooks.html https://videojs.com/guides/hooks 301!
/tutorial-languages.html https://videojs.com/guides/languages 301!
/tutorial-layout.html https://videojs.com/guides/layout 301!
/tutorial-live.html https://videojs.com/guides/live 301!
/tutorial-middleware.html https://videojs.com/guides/middleware 301!
/tutorial-modal-dialog.html https://videojs.com/guides/modal-dialog 301!
/tutorial-options.html https://videojs.com/guides/options 301!
/tutorial-player-workflows.html https://videojs.com/guides/player-workflows 301!
/tutorial-plugins.html https://videojs.com/guides/plugins 301!
/tutorial-react.html https://videojs.com/guides/react 301!
/tutorial-setup.html https://videojs.com/guides/setup 301!
/tutorial-skins.html https://videojs.com/guides/skins 301!
/tutorial-tech.html https://videojs.com/guides/tech 301!
/tutorial-text-tracks.html https://videojs.com/guides/text-tracks 301!
/tutorial-troubleshooting.html https://videojs.com/guides/troubleshooting 301!
/tutorial-video-tracks.html https://videojs.com/guides/video-tracks 301!
/tutorial-videojs.html https://videojs.com/guides/videojs 301!
/tutorial-vue.html https://videojs.com/guides/vue 301!
/tutorial-webpack.html https://videojs.com/guides/webpack 301!
66 changes: 1 addition & 65 deletions docs/guides/angular.md
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,3 @@
# Video.js and Angular integration

Here's a basic Angular player implementation.

It just instantiates the Video.js player on `OnInit` and destroys it on `OnDestroy`.

```ts
// vjs-player.component.ts
import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import videojs from 'video.js';

@Component({
selector: 'app-vjs-player',
template: `
<video #target class="video-js" controls muted playsinline preload="none"></video>
`,
styleUrls: [
'./vjs-player.component.css'
],
encapsulation: ViewEncapsulation.None,
})
export class VjsPlayerComponent implements OnInit, OnDestroy {
@ViewChild('target', {static: true}) target: ElementRef;
// see options: https://github.com/videojs/video.js/blob/main/docs/guides/options.md
@Input() options: {
fluid: boolean,
aspectRatio: string,
autoplay: boolean,
sources: {
src: string,
type: string,
}[],
};
player: videojs.Player;

constructor(
private elementRef: ElementRef,
) { }

ngOnInit() {
// instantiate Video.js
this.player = videojs(this.target.nativeElement, this.options, function onPlayerReady() {
console.log('onPlayerReady', this);
});
}

ngOnDestroy() {
// destroy player
if (this.player) {
this.player.dispose();
}
}
}
```

Don't forget to include the Video.js CSS, located at `video.js/dist/video-js.css`.

```css
/* vjs-player.component.css */
@import '~video.js/dist/video-js.css';
```

You can then use it like this.

```html
<app-vjs-player [options]="{ autoplay: true, controls: true, sources: [{ src: '/path/to/video.mp4', type: 'video/mp4' }]}"></app-vjs-player>
```
This guide has moved to the main videojs.com website: [AngularJS and Video.js](https://videojs.com/guides/angular/)
160 changes: 1 addition & 159 deletions docs/guides/audio-tracks.md
View file
Original file line number Diff line number Diff line change
@@ -1,161 +1,3 @@
# Audio Tracks

Audio tracks are a feature of HTML5 video for providing alternate audio track selections
to the user, so that a track other than the main track can be played. Video.js offers a
cross-browser implementation of audio tracks.

## Table of Contents

* [Caveats](#caveats)
* [Working with Audio Tracks](#working-with-audio-tracks)
* [Add an Audio Track to the Player](#add-an-audio-track-to-the-player)
* [Listen for an Audio Track Becoming Enabled](#listen-for-an-audio-track-becoming-enabled)
* [Removing an Audio Track from the Player](#removing-an-audio-track-from-the-player)
* [API](#api)
* [videojs.AudioTrack](#videojsaudiotrack)
* [id](#id)
* [kind](#kind)
* [label](#label)
* [language](#language)
* [enabled](#enabled)

## Caveats

* It is not possible to add audio tracks through HTML like you can with text tracks.
They must be added programmatically.
* Video.js only stores track representations. Switching audio tracks for playback is
_not handled by Video.js_ and must be handled elsewhere - for example,
[videojs-contrib-hls][hls] handles switching
audio tracks to support track selection through the UI.

## Working with Audio Tracks

### Add an Audio Track to the Player

```js
// Create a player.
var player = videojs('my-player');

// Create a track object.
var track = new videojs.AudioTrack({
id: 'my-spanish-audio-track',
kind: 'translation',
label: 'Spanish',
language: 'es'
});

// Add the track to the player's audio track list.
player.audioTracks().addTrack(track);
```

### Listen for an Audio Track Becoming Enabled

When a track is enabled or disabled on an `AudioTrackList`, a `change` event will be
fired. You can listen for that event and do something with it.

> NOTE: The initial `AudioTrack` selection (usually the main track that is selected)
> should not fire a `change` event.
```js
// Get the current player's AudioTrackList object.
var audioTrackList = player.audioTracks();

// Listen to the "change" event.
audioTrackList.addEventListener('change', function() {

// Log the currently enabled AudioTrack label.
for (var i = 0; i < audioTrackList.length; i++) {
var track = audioTrackList[i];

if (track.enabled) {
videojs.log(track.label);
return;
}
}
});
```

### Removing an Audio Track from the Player

Assuming a player already exists and has an audio track that you want to remove, you
might do something like the following:

```js
// Get the track we created in an earlier example.
var track = player.audioTracks().getTrackById('my-spanish-audio-track');

// Remove it from the audio track list.
player.audioTracks().removeTrack(track);
```

## API

For more complete information, refer to the
[Video.js API docs](https://docs.videojs.com/), specifically:

* `Player#audioTracks`
* `AudioTrackList`
* `AudioTrack`

### `videojs.AudioTrack`

This class is based on [the `AudioTrack` standard][spec-audiotrack] and can be used to
create new audio track objects.

Each property below is available as an option to the `AudioTrack` constructor.

#### `id`

> [standard definition](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-audiotrack-id)
A unique identifier for this track. Video.js will generate one if not given.

#### `kind`

> [standard definition](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-audiotrack-kind)
Video.js supports standard `kind` values for `AudioTracks`:

* `"alternative"`: A possible alternative to the main track.
* `"descriptions"`: An audio description of a video track.
* `"main"`: The primary audio track for this video.
* `"main-desc"`: The primary audio track, mixed with audio descriptions.
* `"translation"`: A translated version of the main audio track.
* `"commentary"`: Commentary on the primary audio track, e.g. a director's commentary.
* `""` (default): No explicit kind, or the kind given by the track's metadata is not
recognized by the user agent.

#### `label`

> [standard definition](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-audiotrack-label)
The label for the track that will be shown to the user. For example, in a menu that lists
the different languages available as alternate audio tracks.

#### `language`

> [standard definition](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-audiotrack-language)
The valid [BCP 47](https://tools.ietf.org/html/bcp47) code for the language of the audio
track, e.g. `"en"` for English or `"es"` for Spanish.

For supported language translations, please see the [languages folder (/lang)](https://github.com/videojs/video.js/tree/main/lang)
located in the Video.js root and refer to the [languages guide][languages-guide] for more
information on languages in Video.js.

#### `enabled`

> [standard definition](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-audiotrack-enabled)
Whether or not this track should be playing.

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. While the spec
allows for more than one track to be enabled, Safari and most implementations only allow
one audio track to be enabled at a time.

[languages-guide]: /docs/guides/languages.md

[spec-audiotrack]: https://html.spec.whatwg.org/multipage/embedded-content.html#audiotrack

[hls]: https://github.com/videojs/videojs-contrib-hls
This guide has moved to the main videojs.com website: [Audio Tracks](https://videojs.com/guides/audio-tracks/)
Loading

0 comments on commit 9cec1de

Please sign in to comment.