web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-03-29 22:07:10 +02:00
Code Releases Activity

docs: move examples out of code into docs

Browse Source
This commit is contained in:
Brandon Casey 2016-12-20 18:20:31 -05:00 committed by Gary Katsevman
parent 0493f54d6f
commit 642ad4b5cf
23 changed files with 952 additions and 884 deletions

210
docs/guides/components.md

@ -7,6 +7,13 @@ The architecture of the Video.js player is centered around components. The `Play
* [What is a Component?](#what-is-a-component)
* [Creating a Component](#creating-a-component)
* [Component Children](#component-children)
* [Basic Example](#basic-example)
* [Using Options](#using-options)
* [Event Listening](#event-listening)
* [using on](#using-on)
* [Using off](#using-off)
* [Using one](#using-one)
* [Using trigger](#using-trigger)
* [Default Component Tree](#default-component-tree)
* [Specific Component Details](#specific-component-details)
* [Progress Control](#progress-control)
@ -36,8 +43,42 @@ In addition, there are a couple methods worth recognizing:
* `videojs.registerComponent(String name, Function Comp)`: Registers component constructors with Video.js.
* `videojs.extend(Function component, Object properties)`: Provides prototype inheritance. Can be used to extend a component's constructor, returning a new constructor with the given properties.
Creation:
```js
// adding a button to the player
var player = videojs('some-video-id');
var Component = videojs.getComponent('Component');
var button = new Component(player);
console.log(button.el());
```
The above code will output
```html
<div class="video-js">
<div class="vjs-button">Button</div>
</div>
```
Adding the new button to the player
```js
// adding a button to the player
var player = videojs('some-video-id');
var button = player.addChild('button');
console.log(button.el());
// will have the same html result as the previous example
```
## Component Children
Again, refer to [the component API docs](http://docs.videojs.com/docs/api/component.html) for complete details on methods available for managing component structures.
### Basic Example
When child component is added to a parent component, Video.js inserts the element of the child into the element of the parent. For example, adding a component like this:
```js
@ -69,7 +110,174 @@ Results in a DOM that looks like this:
</div>
```
Again, refer to [the component API docs](http://docs.videojs.com/docs/api/component.html) for complete details on methods available for managing component structures.
### Using Options
Pass in options for child constructors and options for children of the child.
```js
var player = videojs('some-vid-id');
var Component = videojs.getComponent('Component');
var myComponent = new Component(player);
var myButton = myComponent.addChild('MyButton', {
text: 'Press Me',
buttonChildExample: {
buttonChildOption: true
}
});
```
Children can also be added via options when a component is initialized.
> Note: Include a 'name' key which will be used if two child components of the same
> type that need different options.
```js
// MyComponent is from the above example
var myComp = new MyComponent(player, {
children: ['button', {
name: 'button',
someOtherOption: true
}, {
name: 'button',
someOtherOption: false
}]
});
```
## Event Listening
### Using `on`
```js
var player = videojs('some-player-id');
var Component = videojs.getComponent('Component');
var myComponent = new Component(player);
var myFunc = function() {
var myComponent = this;
console.log('myFunc called');
};
myComponent.on('eventType', myFunc);
myComponent.trigger('eventType');
// logs 'myFunc called'
```
The context of `myFunc` will be `myComponent` unless it is bound. You can add
a listener to another element or component.
```js
var otherComponent = new Component(player);
// myComponent/myFunc is from the above example
myComponent.on(otherComponent.el(), 'eventName', myFunc);
myComponent.on(otherComponent, 'eventName', myFunc);
otherComponent.trigger('eventName');
// logs 'myFunc called' twice
```
### Using `off`
```js
var player = videojs('some-player-id');
var Component = videojs.getComponent('Component');
var myComponent = new Component(player);
var myFunc = function() {
var myComponent = this;
console.log('myFunc called');
};
myComponent.on('eventType', myFunc);
myComponent.trigger('eventType');
// logs 'myFunc called'
myComponent.off('eventType', myFunc);
myComponent.trigger('eventType');
// does nothing
```
If myFunc gets excluded, *all* listeners for the event type will get removed. If
eventType gets excluded, *all* listeners will get removed from the component.
You can use `off` to remove listeners that get added to other elements or
components using:
`myComponent.on(otherComponent...`
In this case both the event type and listener function are **REQUIRED**.
```js
var otherComponent = new Component(player);
// myComponent/myFunc is from the above example
myComponent.on(otherComponent.el(), 'eventName', myFunc);
myComponent.on(otherComponent, 'eventName', myFunc);
otherComponent.trigger('eventName');
// logs 'myFunc called' twice
myComponent.off(ootherComponent.el(), 'eventName', myFunc);
myComponent.off(otherComponent, 'eventName', myFunc);
otherComponent.trigger('eventName');
// does nothing
```
### Using `one`
```js
var player = videojs('some-player-id');
var Component = videojs.getComponent('Component');
var myComponent = new Component(player);
var myFunc = function() {
var myComponent = this;
console.log('myFunc called');
};
myComponent.one('eventName', myFunc);
myComponent.trigger('eventName');
// logs 'myFunc called'
myComponent.trigger('eventName');
// does nothing
```
You can also add a listener to another element or component that will get
triggered only once.
```js
var otherComponent = new Component(player);
// myComponent/myFunc is from the above example
myComponent.one(otherComponent.el(), 'eventName', myFunc);
myComponent.one(otherComponent, 'eventName', myFunc);
otherComponent.trigger('eventName');
// logs 'myFunc called' twice
otherComponent.trigger('eventName');
// does nothing
```
### Using `trigger`
```js
var player = videojs('some-player-id');
var Component = videojs.getComponent('Component');
var myComponent = new Component(player);
var myFunc = function(data) {
var myComponent = this;
console.log('myFunc called');
console.log(data);
};
myComponent.one('eventName', myFunc);
myComponent.trigger('eventName');
// logs 'myFunc called' and 'undefined'
myComponent.trigger({'type':'eventName'});
// logs 'myFunc called' and 'undefined'
myComponent.trigger('eventName', {data: 'some data'});
// logs 'myFunc called' and "{data: 'some data'}"
myComponent.trigger({'type':'eventName'}, {data: 'some data'});
// logs 'myFunc called' and "{data: 'some data'}"
```
## Default Component Tree

118
docs/guides/event-target.md Normal file

@ -0,0 +1,118 @@
# Event Target
## Table of Contents
* [Overview](#overview)
* [on() and addEventListener()](#on-and-addeventlistener)
* [off() and removeEventListener](#off-and-removeeventlistener)
* [one()](#one)
* [trigger() and dispatchEvent](#trigger-and-dispatchevent)
## Overview
Events in video.js are setup so that they mimic the DOM API that is used on object, but also have helpful shorthand functions with the same functionality.
## `on()` and `addEventListener()`
This function is used to add an event listener to an EventTarget.
```js
var foo = new EventTarget();
var handleBar = function() {
console.log('bar was triggered');
};
foo.on('bar', handleBar);
// This causes any `event listeners` for the `bar` event to get called
// see {@link EventTarget#trigger} for more information
foo.trigger('bar');
// logs 'bar was triggered'
```
## `off()` and `removeEventListener()`
This function is used to remove an listener function from an EventTarget.
```js
var foo = new EventTarget();
var handleBar = function() {
console.log('bar was triggered');
};
// adds an `event listener` for the `bar` event
// see {@link EventTarget#on} for more info
foo.on('bar', handleBar);
// runs all `event listeners` for the `bar` event
// see {@link EventTarget#trigger} for more info
foo.trigger('bar');
// logs 'bar was triggered'
foo.off('bar', handleBar);
foo.trigger('bar');
// does nothing
```
## `one()`
This function is used to only have an event listener called once and never again.
Using `on()` and `off()` to mimic `one()` (not recommended)
```js
var foo = new EventTarget();
var handleBar = function() {
console.log('bar was triggered');
// after the first trigger remove this handler
foo.off('bar', handleBar);
};
foo.on('bar', handleBar);
foo.trigger('bar');
// logs 'bar was triggered'
foo.trigger('bar');
// does nothing
```
Using `one()`
```js
var foo = new EventTarget();
var handleBar = function() {
console.log('bar was triggered');
};
// removed after the first trigger
foo.one('bar', handleBar);
foo.trigger('bar');
// logs 'bar was triggered'
foo.trigger('bar');
// does nothing
```
## `trigger()` and `dispatchEvent()`
This function is used to trigger an event on an EventTarget which will cause all listeners to run.
> Note: if 'click' is in `EventTarget.allowedEvents_`, trigger will attempt to call the
> `onClick` function if it exists.
```js
var foo = new EventTarget();
var handleBar = function() {
console.log('bar was triggered');
};
foo.on('bar', handleBar);
foo.trigger('bar');
// logs 'bar was triggered'
foo.trigger('bar');
// logs 'bar was triggered'
foo.trigger('foo');
// does nothing
```

282
docs/guides/player-workflows.md

@ -4,16 +4,29 @@ This document outlines many considerations for using Video.js for advanced playe
## Table of Contents
* [Accessing a player that has already been created on a page](#accessing-a-player-that-has-already-been-created-on-a-page)
* [Removing Players](#removing-players)
* [dispose()](#dispose)
* [Signs of an Undisposed Player](#signs-of-an-undisposed-player)
* [Showing and Hiding a Player](#showing-and-hiding-a-player)
* [Changing the volume of a player](#changing-the-volume-of-a-player)
* [Making the player fullscreen](#making-the-player-fullscreen)
* [Using Playback information functions](#using-playback-information-functions)
* [Dealing with the source or the poster on the player](#dealing-with-the-source-or-the-poster-on-the-player)
* [Accesing the Tech on the player](#accesing-the-tech-on-the-player)
* [Using Video.js with...](#using-videojs-with)
* [jQuery](#jquery)
* [React](#react)
* [Ember](#ember)
* [Angular](#angular)
## Accessing a player that has already been created on a page
After an instance has been created it can be accessed globally in two ways:
1. By calling `videojs('example_video_id');`
1. By using it directly via `videojs.players.example_video_id;`
## Removing Players
No matter the term used for it, web applications are becoming common. Not everything is a static, load-once-and-done web page anymore! This means that developers need to be able to manage the full lifecycle of a video player - from creation to destruction. Video.js supports player removal through the `dispose()` method.
@ -77,6 +90,275 @@ modal.on('hide', function() {
});
```
## Changing the volume of a player
Volume for a player can be changed through the `volume` function on a player. The volume function accepts a number from 0-1. Calling it without an argument will return the current volume.
Example
```js
var myPlayer = videojs('some-player-id');
myPlayer.src("http://www.example.com/path/to/video.mp4");
myPlayer.ready(function() {
// get
var howLoudIsIt = myPlayer.volume();
// set
myPlayer.volume(0.5); // Set volume to half
});
```
Volume can also be muted (without actually changing the volume value) using the `muted` function. Calling it without an argument will return the current status of muted on the player.
```js
var myPlayer = videojs('some-player-id');
myPlayer.src("http://www.example.com/path/to/video.mp4");
myPlayer.ready(function() {
// get, should be false
console.log(myPlayer.muted());
// set to true
myPlayer.muted(true);
// get should be true
console.log(myPlayer.muted());
});
```
## Making the player fullscreen
To check if the player is currently fullscreen call the `isFullscreen` function on a player like so.
```js
var myPlayer = videojs('some-player-id');
myPlayer.src("http://www.example.com/path/to/video.mp4");
myPlayer.ready(function() {
// get, should be false
console.log(myPlayer.isFullscreen());
// set, tell the player it's in fullscreen
myPlayer.isFullscreen(true);
// get, should be true
console.log(myPlayer.isFullscreen());
});
```
To request that the player enter fullscreen call `requestFullscreen`.
```js
var myPlayer = videojs('some-player-id');
myPlayer.src("http://www.example.com/path/to/video.mp4");
myPlayer.ready(function() {
myPlayer.requestFullscreen();
});
```
To exit fullscreen call `exitFullscreen`
```js
var myPlayer = videojs('some-player-id');
myPlayer.src("http://www.example.com/path/to/video.mp4");
myPlayer.ready(function() {
myPlayer.requestFullscreen();
myPlayer.exitFullscreen();
});
```
## Using Playback information functions
`play` can be used to start playback on a player that has a source.
```js
var myPlayer = videojs('some-player-id');
myPlayer.src("http://www.example.com/path/to/video.mp4");
myPlayer.ready(function() {
myPlayer.play();
});
```
`pause` can be used to pause playback on a player that is playing.
```js
var myPlayer = videojs('some-player-id');
myPlayer.src("http://www.example.com/path/to/video.mp4");
myPlayer.ready(function() {
myPlayer.play();
myPlayer.pause();
});
```
`paused` can be used to determine if a player is currently paused.
```js
var myPlayer = videojs('some-player-id');
myPlayer.src("http://www.example.com/path/to/video.mp4");
myPlayer.ready(function() {
// true
console.log(myPlayer.paused());
// false
console.log(!myPlayer.paused());
myPlayer.play();
// false
console.log(myPlayer.paused());
// true
console.log(!myPlayer.paused());
myPlayer.pause();
// true
console.log(myPlayer.paused());
// false
console.log(!myPlayer.paused());
});
```
`currentTime` will give you the currentTime (in seconds) that playback is currently occuring at.
```js
var myPlayer = videojs('some-player-id');
myPlayer.src("http://www.example.com/path/to/video.mp4");
myPlayer.ready(function() {
// set current time to 2 minutes into the video
myPlayer.currentTime(120);
// get the current time, should be 120 seconds
var whereYouAt = myPlayer.currentTime();
});
```
`duration` will give you the total duration of the video that is playing
```js
var myPlayer = videojs('some-player-id');
myPlayer.src("http://www.example.com/path/to/video.mp4");
myPlayer.ready(function() {
var lengthOfVideo = myPlayer.duration();
});
```
`remainingTime` will give you the seconds that are remaing in the video.
```js
var myPlayer = videojs('some-player-id');
myPlayer.src("http://www.example.com/path/to/video.mp4");
myPlayer.ready(function() {
myPlayer.currentTime(10);
// should be 10 seconds less than duration
console.log(myPlayer.remainingTime());
});
```
`buffered` will give you a timeRange object representing the current ranges of time that are ready to be played at a future time.
```js
var myPlayer = videojs('some-player-id');
myPlayer.src("http://www.example.com/path/to/video.mp4");
myPlayer.ready(function() {
var bufferedTimeRange = myPlayer.buffered();
// number of different ranges of time have been buffered.
// Usually 1
var numberOfRanges = bufferedTimeRange.length,
// Time in seconds when the first range starts.
// Usually 0
var firstRangeStart = bufferedTimeRange.start(0),
// Time in seconds when the first range ends
var firstRangeEnd = bufferedTimeRange.end(0),
// Length in seconds of the first time range
var firstRangeLength = firstRangeEnd - firstRangeStart;
});
```
`bufferedPercent` will give you the the current percentage of the video that is buffered.
```js
var myPlayer = videojs('some-player-id');
myPlayer.src("http://www.example.com/path/to/video.mp4");
myPlayer.ready(function() {
// example 0.11 aka 11%
var howMuchIsDownloaded = myPlayer.bufferedPercent();
});
```
## Dealing with the source or the poster on the player
Passing a source to the player via the API. (this can also be done using options)
```js
var myPlayer = videojs('some-player-id');
myPlayer.src("http://www.example.com/path/to/video.mp4");
```
**Source Object (or element):** A javascript object containing information
about the source file. Use this method if you want the player to determine if
it can support the file using the type information.
```js
var myPlayer = videojs('some-player-id');
myPlayer.src({type: "video/mp4", src: "http://www.example.com/path/to/video.mp4"});
```
**Array of Source Objects:** To provide multiple versions of the source so
that it can be played using HTML5 across browsers you can use an array of
source objects. Video.js will detect which version is supported and load that
file.
```js
var myPlayer = videojs('some-player-id');
myPlayer.src([
{type: "video/mp4", src: "http://www.example.com/path/to/video.mp4"},
{type: "video/webm", src: "http://www.example.com/path/to/video.webm"},
{type: "video/ogg", src: "http://www.example.com/path/to/video.ogv"}
]);
```
Changing or setting the poster via the API. (this can also be done with options)
```js
var myPlayer = videojs('example_video_1');
// set
myPlayer.poster('http://example.com/myImage.jpg');
// get
console.log(myPlayer.poster());
// 'http://example.com/myImage.jpg'
```
## Accesing the Tech on the player
The tech on the player can only be accesed by pasing `{IWillNotUseThisInPlugins: true}` into the `tech()`
function on the player.
```js
var myPlayer = videojs('some-player-id');
myPlayer.src("http://www.example.com/path/to/video.mp4");
myPlayer.ready(function() {
// function call throws an error if we
// dont add {IWillNotUseThisInPlugins: true}
var tech = myPlayer.tech({IWillNotUseThisInPlugins: true});
});
```
## Using Video.js with...
Coming soon...

30
docs/guides/plugins.md

@ -11,11 +11,11 @@ If you've built something cool with Video.js, you can easily share it with the r
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:
```js
function examplePlugin(options) {
this.on('play', function(e) {
console.log('playback has started!');
});
};
function examplePlugin(options) {
this.on('play', function(e) {
console.log('playback has started!');
});
};
```
When it's activated, `this` will be the Video.js player your plugin is attached to. You can use anything you'd like in the [Video.js API](./api.md) when you're writing a plugin: change the `src`, mess up the DOM, or listen for and emit your own events.
@ -25,7 +25,7 @@ When it's activated, `this` will be the Video.js player your plugin is attached
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:
```js
videojs.plugin('examplePlugin', examplePlugin);
videojs.plugin('examplePlugin', examplePlugin);
```
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...
@ -35,20 +35,20 @@ From this point on, your plugin will be added to the Video.js prototype and will
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:
```js
videojs('vidId', {
plugins: {
examplePlugin: {
exampleOption: true
}
}
});
videojs('vidId', {
plugins: {
examplePlugin: {
exampleOption: true
}
}
});
```
If you've already initialized your video tag, you can activate a plugin at any time by calling its setup function directly:
```js
var video = videojs('cool-vid');
video.examplePlugin({ exampleOption: true });
var video = videojs('cool-vid');
video.examplePlugin({ exampleOption: true });
```
That's it. Head on over to the [Video.js wiki](https://github.com/videojs/video.js/wiki/Plugins) and add your plugin to the list so everyone else can check it out.

179
docs/guides/videojs.md Normal file

@ -0,0 +1,179 @@
# Usage examples for the functions on videojs
## Table of Contents
* [videojs()](#videojs)
* [options](#options)
* [getComponent()](#getcomponent)
* [registerComponent](#registercomponent)
* [getTech()](#gettech)
* [registerTech](#registertech)
* [extend()](#extend)
* [mergeOptions()](#mergeoptions)
* [bind()](#bind)
* [plugin()](#plugin)
* [xhr](#xhr)
## `videojs()`
```js
var myPlayer = videojs('my_video_id');
```
## `options`
```js
videojs.options.autoplay = true
// -> all players will autoplay by default
```
## `getComponent()`
```js
var VjsButton = videojs.getComponent('Button');
// Create a new instance of the component
var myButton = new VjsButton(myPlayer);
```
## `registerComponent()`
```js
// Get a component to subclass
var VjsButton = videojs.getComponent('Button');
// Subclass the component (see 'extend' doc for more info)
var MySpecialButton = videojs.extend(VjsButton, {});
// Register the new component
VjsButton.registerComponent('MySepcialButton', MySepcialButton);
// (optionally) add the new component as a default player child
myPlayer.addChild('MySepcialButton');
```
## `getTech()`
```js
var Html5 = videojs.getTech('Html5');
// Create a new instance of the component
var html5 = new Html5(options);
```
## `registerTech()`
```js
// get the Html5 Tech
var Html5 = videojs.getTech('Html5');
var MyTech = videojs.extend(Html5, {});
// Register the new Tech
VjsButton.registerTech('Tech', MyTech);
var player = videojs('myplayer', {
techOrder: ['myTech', 'html5']
});
```
## `extend()`
```js
// Create a basic javascript 'class'
function MyClass(name) {
// Set a property at initialization
this.myName = name;
}
// Create an instance method
MyClass.prototype.sayMyName = function() {
alert(this.myName);
};
// Subclass the exisitng class and change the name
// when initializing
var MySubClass = videojs.extend(MyClass, {
constructor: function(name) {
// Call the super class constructor for the subclass
MyClass.call(this, name)
}
});
// Create an instance of the new sub class
var myInstance = new MySubClass('John');
myInstance.sayMyName(); // -> should alert "John"
```
## `mergeOptions()`
```js
var defaultOptions = {
foo: true,
bar: {
a: true,
b: [1,2,3]
}
};
var newOptions = {
foo: false,
bar: {
b: [4,5,6]
}
};
var result = videojs.mergeOptions(defaultOptions, newOptions);
// result.foo = false;
// result.bar.a = true;
// result.bar.b = [4,5,6];
```
## `bind()`
```js
var someClass = function() {};
var someObj = new someClass();
videojs.bind(someObj, function() {
// this will be the context of someObj here
});
```
## `plugin()`
**See the [plugin guide](plugins.md) in the docs for a more detailed example**
```js
// Make a plugin that alerts when the player plays
videojs.plugin('myPlugin', function(myPluginOptions) {
myPluginOptions = myPluginOptions || {};
var player = this;
var alertText = myPluginOptions.text || 'Player is playing!'
player.on('play', function() {
alert(alertText);
});
});
// USAGE EXAMPLES
// EXAMPLE 1: New player with plugin options, call plugin immediately
var player1 = videojs('idOne', {
myPlugin: {
text: 'Custom text!'
}
});
// Click play
// --> Should alert 'Custom text!'
// EXAMPLE 3: New player, initialize plugin later
var player3 = videojs('idThree');
// Click play
// --> NO ALERT
// Click pause
// Initialize plugin using the plugin function on the player instance
player3.myPlugin({
text: 'Plugin added later!'
});
// Click play
// --> Should alert 'Plugin added later!'
```
## `xhr()`
```js
videojs.xhr({
body: someJSONString,
uri: "/foo",
headers: {
"Content-Type": "application/json"
}
}, function (err, resp, body) {
// check resp.statusCode
});
```

6
src/js/button.js

@ -92,9 +92,6 @@ class Button extends ClickableComponent {
/**
* Enable the `Button` element so that it can be activated or clicked. Use this with
* {@link Button#disable}.
*
* @return {Component}
* Returns itself; method is chainable.
*/
enable() {
super.enable();
@ -104,9 +101,6 @@ class Button extends ClickableComponent {
/**
* Enable the `Button` element so that it cannot be activated or clicked. Use this with
* {@link Button#enable}.
*
* @return {Component}
* Returns itself; method is chainable.
*/
disable() {
super.disable();

283
src/js/component.js

@ -18,33 +18,6 @@ import mergeOptions from './utils/merge-options.js';
* in the DOM. They can be children of other components, and can have
* children themselves.
*
* Creating a button component.
* ``` js
* // adding a button to the player
* var player = videojs('some-video-id');
* var Component = videojs.getComponent('Component');
* var button = new Component(player);
*
* console.log(button.el());
* ```
*
* Above code will log this html.
* ```html
* <div class="video-js">
* <div class="vjs-button">Button</div>
* </div>
* ```
*
* Adding a button to the player
* ``` js
* // adding a button to the player
* var player = videojs('some-video-id');
* var button = player.addChild('button');
*
* console.log(button.el());
* // will have the same html result as the previous example
* ```
*
* Components can also use methods from {@link EventTarget}
*/
class Component {
@ -64,7 +37,12 @@ class Component {
* The `Player` that this class should be attached to.
*
* @param {Object} [options]
* The key/value store of player options.
* The key/value store of player options.
#
* @param {Object[]} [options.children]
* An array of children objects to intialize this component with. Children objects have
* a name property that will be used if more than one component of the same type needs to be
* added.
*
* @param {Component~ReadyCallback} [ready]
* Function that gets called when the `Component` is ready.
@ -182,41 +160,6 @@ class Component {
* > Note: When both `obj` and `options` contain properties whose values are objects.
* The two properties get merged using {@link module:mergeOptions}
*
* Example
* ```js
* var player = videojs('some-vid-id');
* var Component = videojs.getComponent('Component');
* var component = new Component(player, {
* optionSet: {
* childOne: {foo: 'bar', asdf: 'fdsa'},
* childTwo: {},
* childThree: {}
* }
* });
*
* const newOptions = {
* optionSet: {
* childOne: {foo: 'baz', abc: '123'}
* childTwo: null,
* childFour: {}
* }
* };
*
* console.log(component.options(newOptions));
* ```
*
* Result
* ```js
* {
* optionSet: {
* childOne: {foo: 'baz', asdf: 'fdsa', abc: '123' },
* childTwo: null,
* childThree: {},
* childFour: {}
* }
* }
* ```
*
* @param {Object} obj
* The object that contains new options.
*
@ -375,37 +318,6 @@ class Component {
/**
* Add a child `Component` inside the current `Component`.
*
* Example:
* ```js
* var player = videojs('some-vid-id');
* var Component = videojs.getComponent('Component');
* var myComponent = new Component(player);
*
* console.log(myComponent.el());
* // -> <div class='my-component'></div>
* console.log(myComponent.children());
* // [empty array]
*
* var myButton = myComponent.addChild('MyButton');
*
* console.log(myComponent.el());
* // -> <div class='my-component'><div class="my-button">myButton<div></div>
* console.log(myComponent.children());
* // -> myButton === myComponent.children()[0];
* ```
*
* Pass in options for child constructors and options for children of the child.
* ```js
* var player = videojs('some-vid-id');
* var Component = videojs.getComponent('Component');
* var myComponent = new Component(player);
* var myButton = myComponent.addChild('MyButton', {
* text: 'Press Me',
* buttonChildExample: {
* buttonChildOption: true
* }
* });
* ```
*
* @param {string|Component} child
* The name or instance of a child to add.
@ -541,48 +453,6 @@ class Component {
/**
* Add and initialize default child `Component`s based upon options.
*
* Example.
* ```js
* var MyComponent = videojs.extend(videojs.getComponent('Component'));
* // when an instance of MyComponent is created, all children in options
* // will be added to the instance by their name strings and options
* MyComponent.prototype.options_ = {
* children: [
* 'myChildComponent'
* ],
* myChildComponent: {
* myChildOption: true
* }
* };
*
* // Or when creating the component
* var player = videojs('some-player-id');
* var myComp = new MyComponent(player, {
* children: [
* 'myChildComponent'
* ],
* myChildComponent: {
* myChildOption: true
* }
* });
* ```
*
* The children option can also be an array of child options objects
* (that also include a 'name' key). This will get used if you have two child
* components of the same type that need different options.
* ```js
* // MyComponent is from the above example
* var myComp = new MyComponent(player, {
* children: ['button', {
* name: 'button',
* someOtherOption: true
* }, {
* name: 'button',
* someOtherOption: false
* }]
* });
* ```
*/
initChildren() {
const children = this.options_.children;
@ -696,46 +566,17 @@ class Component {
/**
* Add an `event listener` to this `Component`s element.
*
* ```js
* var player = videojs('some-player-id');
* var Component = videojs.getComponent('Component');
* var myComponent = new Component(player);
* var myFunc = function() {
* var myComponent = this;
* console.log('myFunc called');
* };
*
* myComponent.on('eventType', myFunc);
* myComponent.trigger('eventType');
* // logs 'myFunc called'
* ```
*
* The context of `myFunc` will be `myComponent` unless it is bound. You can add
* a listener to another element or component.
* ```js
* var otherComponent = new Component(player);
*
* // myComponent/myFunc is from the above example
* myComponent.on(otherComponent.el(), 'eventName', myFunc);
* myComponent.on(otherComponent, 'eventName', myFunc);
*
* otherComponent.trigger('eventName');
* // logs 'myFunc called' twice
* ```
*
* The benefit of using this over the following:
* - `VjsEvents.on(otherElement, 'eventName', myFunc)`
* - `otherComponent.on('eventName', myFunc)`
* Is that the listeners will get cleaned up when either component gets disposed.
* It will also bind `myComponent` as the context of `myFunc`.
*
* 1. Is that the listeners will get cleaned up when either component gets disposed.
* 1. It will also bind `myComponent` as the context of `myFunc`.
* > NOTE: If you remove the element from the DOM that has used `on` you need to
* clean up references using:
*
* `myComponent.trigger(el, 'dispose')`
*
* This will also allow the browser to garbage collect it. In special
* cases such as with `window` and `document`, which are both permanent,
* this is not necessary.
* clean up references using: `myComponent.trigger(el, 'dispose')`
* This will also allow the browser to garbage collect it. In special
* cases such as with `window` and `document`, which are both permanent,
* this is not necessary.
*
* @param {string|Component|string[]} [first]
* The event name, and array of event names, or another `Component`.
@ -797,47 +638,8 @@ class Component {
}
/**
* Remove an event listener from this `Component`s element.
* ```js
* var player = videojs('some-player-id');
* var Component = videojs.getComponent('Component');
* var myComponent = new Component(player);
* var myFunc = function() {
* var myComponent = this;
* console.log('myFunc called');
* };
* myComponent.on('eventType', myFunc);
* myComponent.trigger('eventType');
* // logs 'myFunc called'
*
* myComponent.off('eventType', myFunc);
* myComponent.trigger('eventType');
* // does nothing
* ```
*
* If myFunc gets excluded, ALL listeners for the event type will get removed. If
* eventType gets excluded, ALL listeners will get removed from the component.
* You can use `off` to remove listeners that get added to other elements or
* components using:
*
* `myComponent.on(otherComponent...`
*
* In this case both the event type and listener function are **REQUIRED**.
*
* ```js
* var otherComponent = new Component(player);
*
* // myComponent/myFunc is from the above example
* myComponent.on(otherComponent.el(), 'eventName', myFunc);
* myComponent.on(otherComponent, 'eventName', myFunc);
*
* otherComponent.trigger('eventName');
* // logs 'myFunc called' twice
* myComponent.off(ootherComponent.el(), 'eventName', myFunc);
* myComponent.off(otherComponent, 'eventName', myFunc);
* otherComponent.trigger('eventName');
* // does nothing
* ```
* Remove an event listener from this `Component`s element. If the second argument is
* exluded all listeners for the type passed in as the first argument will be removed.
*
* @param {string|Component|string[]} [first]
* The event name, and array of event names, or another `Component`.
@ -881,38 +683,6 @@ class Component {
/**
* Add an event listener that gets triggered only once and then gets removed.
* ```js
* var player = videojs('some-player-id');
* var Component = videojs.getComponent('Component');
* var myComponent = new Component(player);
* var myFunc = function() {
* var myComponent = this;
* console.log('myFunc called');
* };
* myComponent.one('eventName', myFunc);
* myComponent.trigger('eventName');
* // logs 'myFunc called'
*
* myComponent.trigger('eventName');
* // does nothing
*
* ```
*
* You can also add a listener to another element or component that will get
* triggered only once.
* ```js
* var otherComponent = new Component(player);
*
* // myComponent/myFunc is from the above example
* myComponent.one(otherComponent.el(), 'eventName', myFunc);
* myComponent.one(otherComponent, 'eventName', myFunc);
*
* otherComponent.trigger('eventName');
* // logs 'myFunc called' twice
*
* otherComponent.trigger('eventName');
* // does nothing
* ```
*
* @param {string|Component|string[]} [first]
* The event name, and array of event names, or another `Component`.
@ -952,29 +722,6 @@ class Component {
/**
* Trigger an event on an element.
*
* ```js
* var player = videojs('some-player-id');
* var Component = videojs.getComponent('Component');
* var myComponent = new Component(player);
* var myFunc = function(data) {
* var myComponent = this;
* console.log('myFunc called');
* console.log(data);
* };
* myComponent.one('eventName', myFunc);
* myComponent.trigger('eventName');
* // logs 'myFunc called' and 'undefined'
*
* myComponent.trigger({'type':'eventName'});
* // logs 'myFunc called' and 'undefined'
*
* myComponent.trigger('eventName', {data: 'some data'});
* // logs 'myFunc called' and "{data: 'some data'}"
*
* myComponent.trigger({'type':'eventName'}, {data: 'some data'});
* // logs 'myFunc called' and "{data: 'some data'}"
* ```
*
* @param {EventTarget~Event|Object|string} event
* The event name, and Event, or an event-like object with a type attribute
* set to the event name.

4
src/js/control-bar/progress-control/seek-bar.js

@ -104,8 +104,8 @@ class SeekBar extends Slider {
/**
* Get percentage of video played
*
* @return {Number} Percentage played
* @return {number}
* The percentage played
*/
getPercent() {
const percent = this.player_.currentTime() / this.player_.duration();

3
src/js/control-bar/volume-menu-button.js

@ -101,6 +101,9 @@ class VolumeMenuButton extends PopupButton {
/**
* Create the VolumeMenuButton popup
*
* @return {Popup}
* The popup that was created
*/
createPopup() {
const popup = new Popup(this.player_, {

84
src/js/event-target.js

@ -48,20 +48,6 @@ EventTarget.prototype.allowedEvents_ = {};
* Adds an `event listener` to an instance of an `EventTarget`. An `event listener` is a
* function that will get called when an event with a certain name gets triggered.
*
* ```js
* var foo = new EventTarget();
* var handleBar = function() {
* console.log('bar was triggered');
* };
*
* foo.on('bar', handleBar);
*
* // This causes any `event listeners` for the `bar` event to get called
* // see {@link EventTarget#trigger} for more information
* foo.trigger('bar');
* // logs 'bar was triggered'
* ```
*
* @param {string|string[]} type
* An event name or an array of event names.
*
@ -92,26 +78,6 @@ EventTarget.prototype.addEventListener = EventTarget.prototype.on;
* This makes it so that the `event listener` will no longer get called when the
* named event happens.
*
* ```js
* var foo = new EventTarget();
* var handleBar = function() {
* console.log('bar was triggered');
* };
*
* // adds an `event listener` for the `bar` event
* // see {@link EventTarget#on} for more info
* foo.on('bar', handleBar);
*
* // runs all `event listeners` for the `bar` event
* // see {@link EventTarget#trigger} for more info
* foo.trigger('bar');
* // logs 'bar was triggered'
*
* foo.off('bar', handleBar);
* foo.trigger('bar');
* // does nothing
* ```
*
* @param {string|string[]} type
* An event name or an array of event names.
*
@ -136,39 +102,6 @@ EventTarget.prototype.removeEventListener = EventTarget.prototype.off;
* first trigger it will get removed. This is like adding an `event listener`
* with {@link EventTarget#on} that calls {@link EventTarget#off} on itself.
*
* Using {@link EventTarget#on} and {@link EventTarget#off} to mimic {@link EventTarget#one}
* ```js
* var foo = new EventTarget();
* var handleBar = function() {
* console.log('bar was triggered');
* // after the first trigger remove this handler
* foo.off('bar', handleBar);
* };
*
* foo.on('bar', handleBar);
* foo.trigger('bar');
* // logs 'bar was triggered'
*
* foo.trigger('bar');
* // does nothing
* ```
*
* Using {@link EventTarget#one}
* ```js
* var foo = new EventTarget();
* var handleBar = function() {
* console.log('bar was triggered');
* };
*
* // removed after the first trigger
* foo.one('bar', handleBar);
* foo.trigger('bar');
* // logs 'bar was triggered'
*
* foo.trigger('bar');
* // does nothing
* ```
*
* @param {string|string[]} type
* An event name or an array of event names.
*
@ -197,23 +130,6 @@ EventTarget.prototype.one = function(type, fn) {
* 'click' is in `EventTarget.allowedEvents_`, so, trigger will attempt to call
* `onClick` if it exists.
*
* ```js
* var foo = new EventTarget();
* var handleBar = function() {
* console.log('bar was triggered');
* };
*
* foo.on('bar', handleBar);
* foo.trigger('bar');
* // logs 'bar was triggered'
*
* foo.trigger('bar');
* // logs 'bar was triggered'
*
* foo.trigger('foo');
* // does nothing
* ```
*
* @param {string|EventTarget~Event|Object} event
* The name of the event, an `Event`, or an object with a key of type set to
* an event name.

39
src/js/extend.js

@ -1,12 +1,23 @@
import log from './utils/log';
import {isObject} from './utils/obj';
/*
/**
* @file extend.js
*
* @module extend
*/
/**
* A combination of node inherits and babel's inherits (after transpile).
* Both work the same but node adds `super_` to the subClass
* and Bable adds the superClass as __proto__. Both seem useful.
*
* @param {Object} subClass
* The class to inherit to
*
* @param {Object} superClass
* The class to inherit from
*
* @private
*/
const _inherits = function(subClass, superClass) {
if (typeof superClass !== 'function' && superClass !== null) {
@ -28,22 +39,18 @@ const _inherits = function(subClass, superClass) {
}
};
/*
/**
* Function for subclassing using the same inheritance that
* videojs uses internally
* ```js
* var Button = videojs.getComponent('Button');
* ```
* ```js
* var MyButton = videojs.extend(Button, {
* constructor: function(player, options) {
* Button.call(this, player, options);
* },
* onClick: function() {
* // doSomething
* }
* });
* ```
*
* @param {Object} superClass
* The class to inherit from
*
* @param {Object} [subClassMethods={}]
* The class to inherit to
*
* @return {Object}
* The new object with subClassMethods that inherited superClass.
*/
const extendFn = function(superClass, subClassMethods = {}) {
let subClass = function() {

272
src/js/player.js

@ -57,7 +57,7 @@ const TECH_EVENTS_RETRIGGER = [
* Retrigger the `progress` event that was triggered by the {@link Tech}.
*
* @private
* @method Player.prototype.handleTechProgress_
* @method Player#handleTechProgress_
* @fires Player#progress
* @listens Tech#progress
*/
@ -73,7 +73,7 @@ const TECH_EVENTS_RETRIGGER = [
* Retrigger the `abort` event that was triggered by the {@link Tech}.
*
* @private
* @method Player.prototype.handleTechAbort_
* @method Player#handleTechAbort_
* @fires Player#abort
* @listens Tech#abort
*/
@ -89,7 +89,7 @@ const TECH_EVENTS_RETRIGGER = [
* Retrigger the `suspend` event that was triggered by the {@link Tech}.
*
* @private
* @method Player.prototype.handleTechSuspend_
* @method Player#handleTechSuspend_
* @fires Player#suspend
* @listens Tech#suspend
*/
@ -105,7 +105,7 @@ const TECH_EVENTS_RETRIGGER = [
* Retrigger the `emptied` event that was triggered by the {@link Tech}.
*
* @private
* @method Player.prototype.handleTechEmptied_
* @method Player#handleTechEmptied_
* @fires Player#emptied
* @listens Tech#emptied
*/
@ -120,7 +120,7 @@ const TECH_EVENTS_RETRIGGER = [
* Retrigger the `stalled` event that was triggered by the {@link Tech}.
*
* @private
* @method Player.prototype.handleTechStalled_
* @method Player#handleTechStalled_
* @fires Player#stalled
* @listens Tech#stalled
*/
@ -136,7 +136,7 @@ const TECH_EVENTS_RETRIGGER = [
* Retrigger the `stalled` event that was triggered by the {@link Tech}.
*
* @private
* @method Player.prototype.handleTechLoadedmetadata_
* @method Player#handleTechLoadedmetadata_
* @fires Player#loadedmetadata
* @listens Tech#loadedmetadata
*/
@ -152,7 +152,7 @@ const TECH_EVENTS_RETRIGGER = [
* Retrigger the `loadeddata` event that was triggered by the {@link Tech}.
*
* @private
* @method Player.prototype.handleTechLoaddeddata_
* @method Player#handleTechLoaddeddata_
* @fires Player#loadeddata
* @listens Tech#loadeddata
*/
@ -168,7 +168,7 @@ const TECH_EVENTS_RETRIGGER = [
* Retrigger the `timeupdate` event that was triggered by the {@link Tech}.
*
* @private
* @method Player.prototype.handleTechTimeUpdate_
* @method Player#handleTechTimeUpdate_
* @fires Player#timeupdate
* @listens Tech#timeupdate
*/
@ -184,7 +184,7 @@ const TECH_EVENTS_RETRIGGER = [
* Retrigger the `ratechange` event that was triggered by the {@link Tech}.
*
* @private
* @method Player.prototype.handleTechRatechange_
* @method Player#handleTechRatechange_
* @fires Player#ratechange
* @listens Tech#ratechange
*/
@ -200,7 +200,7 @@ const TECH_EVENTS_RETRIGGER = [
* Retrigger the `volumechange` event that was triggered by the {@link Tech}.
*
* @private
* @method Player.prototype.handleTechVolumechange_
* @method Player#handleTechVolumechange_
* @fires Player#volumechange
* @listens Tech#volumechange
*/
@ -216,7 +216,7 @@ const TECH_EVENTS_RETRIGGER = [
* Retrigger the `texttrackchange` event that was triggered by the {@link Tech}.
*
* @private
* @method Player.prototype.handleTechTexttrackchange_
* @method Player#handleTechTexttrackchange_
* @fires Player#texttrackchange
* @listens Tech#texttrackchange
*/
@ -226,17 +226,6 @@ const TECH_EVENTS_RETRIGGER = [
/**
* An instance of the `Player` class is created when any of the Video.js setup methods
* are used to initialize a video.
* ```js
* var myPlayer = videojs('example_video_1');
* ```
*
* In the following example, the `data-setup` attribute tells the Video.js library to
* create a player instance when the library is ready.
* ```html
* <video id="example_video_1" data-setup='{}' controls>
* <source src="my-source.mp4" type="video/mp4">
* </video>
* ```
*
* After an instance has been created it can be accessed globally in two ways:
* 1. By calling `videojs('example_video_1');`
@ -437,14 +426,6 @@ class Player extends Component {
/**
* Destroys the video player and does any necessary cleanup.
*
* ```js
* var myPlayer = videojs('some-player-id');
*
* myPlayer.src("http://www.example.com/path/to/video.mp4");
* myPlayer.ready(function() {
* myPlayer.dispose();
* });
* ```
* This is especially helpful if you are dynamically adding and removing videos
* to/from the DOM.
*
@ -943,17 +924,6 @@ class Player extends Component {
* `IWillNotUseThisInPlugins` property having a true value. This is try and prevent misuse
* of techs by plugins.
*
* ```js
* var myPlayer = videojs('some-player-id');
*
* myPlayer.src("http://www.example.com/path/to/video.mp4");
* myPlayer.ready(function() {
* // function call throws an error if we
* // dont add {IWillNotUseThisInPlugins: true}
* var tech = myPlayer.tech({IWillNotUseThisInPlugins: true});
* });
* ```
*
* @param {Object} safety
* An object that must contain `{IWillNotUseThisInPlugins: true}`
*
@ -1597,14 +1567,6 @@ class Player extends Component {
/**
* start media playback
* ```js
* var myPlayer = videojs('some-player-id');
*
* myPlayer.src("http://www.example.com/path/to/video.mp4");
* myPlayer.ready(function() {
* myPlayer.play();
* });
* ```
*
* @return {Player}
* A reference to the player object this function was called on
@ -1625,16 +1587,6 @@ class Player extends Component {
/**
* Pause the video playback
*
* ```js
* var myPlayer = videojs('some-player-id');
*
* myPlayer.src("http://www.example.com/path/to/video.mp4");
* myPlayer.ready(function() {
* myPlayer.play();
* myPlayer.pause();
* });
* ```
*
* @return {Player}
* A reference to the player object this function was called on
*/
@ -1646,32 +1598,6 @@ class Player extends Component {
/**
* Check if the player is paused or has yet to play
*
* ```js
* var myPlayer = videojs('some-player-id');
*
* myPlayer.src("http://www.example.com/path/to/video.mp4");
*
* myPlayer.ready(function() {
* // true
* console.log(myPlayer.paused());
* // false
* console.log(!myPlayer.paused());
*
* myPlayer.play();
* // false
* console.log(myPlayer.paused());
* // true
* console.log(!myPlayer.paused());
*
* myPlayer.pause();
* // true
* console.log(myPlayer.paused());
* // false
* console.log(!myPlayer.paused());
* });
*
* ```
*
* @return {boolean}
* - false: if the media is currently playing
* - true: if media is not currently playing
@ -1712,19 +1638,6 @@ class Player extends Component {
/**
* Get or set the current time (in seconds)
*
* ```js
* var myPlayer = videojs('some-player-id');
*
* myPlayer.src("http://www.example.com/path/to/video.mp4");
* myPlayer.ready(function() {
* // set current time to 2 minutes into the video
* myPlayer.currentTime(120);
*
* // get the current time, should be 120 seconds
* var whereYouAt = myPlayer.currentTime();
* });
* ```
*
* @param {number|string} [seconds]
* The time to seek to in seconds
*
@ -1755,14 +1668,6 @@ class Player extends Component {
* Normally gets the length in time of the video in seconds;
* in all but the rarest use cases an argument will NOT be passed to the method
*
* ```js
* var myPlayer = videojs('some-player-id');
*
* myPlayer.src("http://www.example.com/path/to/video.mp4");
* myPlayer.ready(function() {
* var lengthOfVideo = myPlayer.duration();
* });
* ```
* > **NOTE**: The video must have started loading before the duration can be
* known, and in the case of Flash, may not be known until the video starts
* playing.
@ -1812,17 +1717,6 @@ class Player extends Component {
* Calculates how much time is left in the video. Not part
* of the native video API.
*
* ```js
* var myPlayer = videojs('some-player-id');
* myPlayer.src("http://www.example.com/path/to/video.mp4");
* myPlayer.ready(function() {
* myPlayer.currentTime(10);
*
* // should be 10 seconds less than duration
* console.log(myPlayer.remainingTime());
* });
* ```
*
* @return {number}
* The time remaining in seconds
*/
@ -1838,29 +1732,6 @@ class Player extends Component {
* that have been downloaded. If you just want the percent of the
* video that's been downloaded, use bufferedPercent.
*
* ```js
* var myPlayer = videojs('some-player-id');
*
* myPlayer.src("http://www.example.com/path/to/video.mp4");
* myPlayer.ready(function() {
* var bufferedTimeRange = myPlayer.buffered();
*
* // number of different ranges of time have been buffered.
* // Usually 1
* var numberOfRanges = bufferedTimeRange.length,
*
* // Time in seconds when the first range starts.
* // Usually 0
* var firstRangeStart = bufferedTimeRange.start(0),
*
* // Time in seconds when the first range ends
* var firstRangeEnd = bufferedTimeRange.end(0),
*
* // Length in seconds of the first time range
* var firstRangeLength = firstRangeEnd - firstRangeStart;
* });
* ```
*
* @see [Buffered Spec]{@link http://dev.w3.org/html5/spec/video.html#dom-media-buffered}
*
* @return {TimeRange}
@ -1880,16 +1751,6 @@ class Player extends Component {
* Get the percent (as a decimal) of the video that's been downloaded.
* This method is not a part of the native HTML video API.
*
* ```js
* var myPlayer = videojs('some-player-id');
*
* myPlayer.src("http://www.example.com/path/to/video.mp4");
* myPlayer.ready(function() {
* // example 0.11 aka 11%
* var howMuchIsDownloaded = myPlayer.bufferedPercent();
* });
* ```
*
* @return {number}
* A decimal between 0 and 1 representing the percent
* that is bufferred 0 being 0% and 1 being 100%
@ -1920,18 +1781,6 @@ class Player extends Component {
/**
* Get or set the current volume of the media
*
* ```js
* var myPlayer = videojs('some-player-id');
*
* myPlayer.src("http://www.example.com/path/to/video.mp4");
* myPlayer.ready(function() {
* // get
* var howLoudIsIt = myPlayer.volume();
* // set
* myPlayer.volume(0.5); // Set volume to half
* });
* ```
*
* @param {number} [percentAsDecimal]
* The new volume as a decimal percent:
* - 0 is muted/0%/off
@ -1961,19 +1810,6 @@ class Player extends Component {
/**
* Get the current muted state, or turn mute on or off
* ```js
* var myPlayer = videojs('some-player-id');
*
* myPlayer.src("http://www.example.com/path/to/video.mp4");
* myPlayer.ready(function() {
* // get, should be false
* console.log(myPlayer.muted());
* // set to true
* myPlayer.muted(true);
* // get should be true
* console.log(myPlayer.muted());
* });
* ```
*
* @param {boolean} [muted]
* - true to mute
@ -2007,21 +1843,6 @@ class Player extends Component {
* Check if the player is in fullscreen mode or tell the player that it
* is or is not in fullscreen mode.
*
* ```js
* var myPlayer = videojs('some-player-id');
*
* myPlayer.src("http://www.example.com/path/to/video.mp4");
* myPlayer.ready(function() {
* // get, should be false
* console.log(myPlayer.isFullscreen());
*
* // set, tell the player it's in fullscreen
* myPlayer.isFullscreen(true);
*
* // get, should be true
* console.log(myPlayer.isFullscreen());
* });
* ```
* > NOTE: As of the latest HTML5 spec, isFullscreen is no longer an official
* property and instead document.fullscreenElement is used. But isFullscreen is
* still a valuable property for internal player workings.
@ -2044,14 +1865,6 @@ class Player extends Component {
/**
* Increase the size of the video to full screen
* ```js
* var myPlayer = videojs('some-player-id');
*
* myPlayer.src("http://www.example.com/path/to/video.mp4");
* myPlayer.ready(function() {
* myPlayer.requestFullscreen();
* });
* ```
* In some browsers, full screen is not supported natively, so it enters
* "full window mode", where the video fills the browser window.
* In browsers and devices that support native full screen, sometimes the
@ -2114,16 +1927,6 @@ class Player extends Component {
/**
* Return the video to its normal size after having been in full screen mode
*
* ```js
* var myPlayer = videojs('some-player-id');
*
* myPlayer.src("http://www.example.com/path/to/video.mp4");
* myPlayer.ready(function() {
* myPlayer.requestFullscreen();
* myPlayer.exitFullscreen();
* });
* ```
*
* @fires Player#fullscreenchange
*
* @return {Player}
@ -2345,37 +2148,6 @@ class Player extends Component {
* the current playback technology (HTML5/Flash) can support the source you
* provide. Currently only MP4 files can be used in both HTML5 and Flash.
*
* ```js
* var myPlayer = videojs('some-player-id');
*
* myPlayer.src("http://www.example.com/path/to/video.mp4");
* ```
*
* **Source Object (or element):* * A javascript object containing information
* about the source file. Use this method if you want the player to determine if
* it can support the file using the type information.
*
* ```js
* var myPlayer = videojs('some-player-id');
*
* myPlayer.src({type: "video/mp4", src: "http://www.example.com/path/to/video.mp4"});
* ```
*
* **Array of Source Objects:* * To provide multiple versions of the source so
* that it can be played using HTML5 across browsers you can use an array of
* source objects. Video.js will detect which version is supported and load that
* file.
*
* ```js
* var myPlayer = videojs('some-player-id');
*
* myPlayer.src([
* {type: "video/mp4", src: "http://www.example.com/path/to/video.mp4"},
* {type: "video/webm", src: "http://www.example.com/path/to/video.webm"},
* {type: "video/ogg", src: "http://www.example.com/path/to/video.ogv"}
* ]);
* ```
*
* @param {Tech~SourceObject|Tech~SourceObject[]} [source]
* One SourceObject or an array of SourceObjects
*
@ -2627,18 +2399,6 @@ class Player extends Component {
/**
* Get or set the poster image source url
*
* EXAMPLE
* ```js
* var myPlayer = videojs('example_video_1');
*
* // set
* myPlayer.poster('http://example.com/myImage.jpg');
*
* // get
* console.log(myPlayer.poster());
* // 'http://example.com/myImage.jpg'
* ```
*
* @fires Player#posterchange
*
* @param {string} [src]
@ -3480,14 +3240,14 @@ Player.prototype.options_ = {
* Returns whether or not the player is in the "ended" state.
*
* @return {Boolean} True if the player is in the ended state, false if not.
* @method Player.prototype.ended
* @method Player#ended
*/
'ended',
/**
* Returns whether or not the player is in the "seeking" state.
*
* @return {Boolean} True if the player is in the seeking state, false if not.
* @method Player.prototype.seeking
* @method Player#seeking
*/
'seeking',
/**
@ -3495,7 +3255,7 @@ Player.prototype.options_ = {
* for seeking to.
*
* @return {TimeRanges} the seekable intervals of the media timeline
* @method Player.prototype.seekable
* @method Player#seekable
*/
'seekable',
/**
@ -3516,7 +3276,7 @@ Player.prototype.options_ = {
*
* @see https://html.spec.whatwg.org/multipage/embedded-content.html#network-states
* @return {number} the current network activity state
* @method Player.prototype.networkState
* @method Player#networkState
*/
'networkState',
/**
@ -3540,7 +3300,7 @@ Player.prototype.options_ = {
*
* @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-readystate
* @return {number} the current playback rendering state
* @method Player.prototype.readyState
* @method Player#readyState
*/
'readyState'
].forEach(function(fn) {

3
src/js/plugins.js

@ -4,9 +4,6 @@
*/
import Player from './player.js';
/**
*
*/
/**
* The method for registering a video.js plugin. {@link videojs:videojs.registerPlugin].
*

2
src/js/poster-image.js

@ -89,7 +89,7 @@ class PosterImage extends ClickableComponent {
/**
* Set the source of the `PosterImage` depending on the display method.
*
* @param {String} url
* @param {string} url
* The URL to the source for the `PosterImage`.
*/
setSrc(url) {

11
src/js/setup.js

@ -1,8 +1,7 @@
/**
* Functions for setting up a player without user insteraction based on the data-setup
* `attribute` of the video tag.
* @file setup.js - Functions for setting up a player without
* user interaction based on the data-setup `attribute` of the video tag.
*
* @file setup.js
* @module setup
*/
import * as Events from './utils/events.js';
@ -78,6 +77,12 @@ const autoSetup = function() {
/**
* Wait until the page is loaded before running autoSetup. This will be called in
* autoSetup if `hasLoaded` returns false.
*
* @param {number} wait
* How long to wait in ms
*
* @param {videojs} [vjs]
* The videojs library function
*/
function autoSetupTimeout(wait, vjs) {
if (vjs) {

3
src/js/tech/flash-rtmp.js

@ -104,8 +104,7 @@ function FlashRtmpDecorator(Flash) {
/**
* Regular expression used to check if the source is an rtmp source.
*
* @property
* @type {RegExp}
* @property {RegExp} Flash.RTMP_RE
*/
Flash.RTMP_RE = /^rtmp[set]?:\/\//i;

68
src/js/tech/flash.js

@ -377,7 +377,7 @@ for (let i = 0; i < _readOnly.length; i++) {
/**
* Get the value of `rtmpConnection` from the swf.
*
* @method Flash.prototype.rtmpConnection
* @method Flash#rtmpConnection
* @return {string}
* The current value of `rtmpConnection` on the swf.
*/
@ -385,7 +385,7 @@ for (let i = 0; i < _readOnly.length; i++) {
/**
* Get the value of `rtmpStream` from the swf.
*
* @method Flash.prototype.rtmpStream
* @method Flash#rtmpStream
* @return {string}
* The current value of `rtmpStream` on the swf.
*/
@ -400,7 +400,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* - auto: allow the media and metadata for the media to be downloaded before
* interaction
*
* @method Flash.prototype.preload
* @method Flash#preload
* @return {string}
* The value of `preload` from the swf. Will be 'none', 'metadata',
* or 'auto'.
@ -409,7 +409,7 @@ for (let i = 0; i < _readOnly.length; i++) {
/**
* Get the value of `defaultPlaybackRate` from the swf.
*
* @method Flash.prototype.defaultPlaybackRate
* @method Flash#defaultPlaybackRate
* @return {number}
* The current value of `defaultPlaybackRate` on the swf.
*/
@ -420,7 +420,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* - if playbackRate is set to 2, media will play twice as fast.
* - if playbackRate is set to 0.5, media will play half as fast.
*
* @method Flash.prototype.playbackRate
* @method Flash#playbackRate
* @return {number}
* The value of `playbackRate` from the swf. A number indicating
* the current playback speed of the media, where 1 is normal speed.
@ -430,7 +430,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* Get the value of `autoplay` from the swf. `autoplay` indicates
* that the media should start to play as soon as the page is ready.
*
* @method Flash.prototype.autoplay
* @method Flash#autoplay
* @return {boolean}
* - The value of `autoplay` from the swf.
* - True indicates that the media ashould start as soon as the page loads.
@ -442,7 +442,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* that the media should return to the start of the media and continue playing once
* it reaches the end.
*
* @method Flash.prototype.loop
* @method Flash#loop
* @return {boolean}
* - The value of `loop` from the swf.
* - True indicates that playback should seek back to start once
@ -454,7 +454,7 @@ for (let i = 0; i < _readOnly.length; i++) {
/**
* Get the value of `mediaGroup` from the swf.
*
* @method Flash.prototype.mediaGroup
* @method Flash#mediaGroup
* @return {string}
* The current value of `mediaGroup` on the swf.
*/
@ -462,7 +462,7 @@ for (let i = 0; i < _readOnly.length; i++) {
/**
* Get the value of `controller` from the swf.
*
* @method Flash.prototype.controller
* @method Flash#controller
* @return {string}
* The current value of `controller` on the swf.
*/
@ -471,7 +471,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* Get the value of `controls` from the swf. `controls` indicates
* whether the native flash controls should be shown or hidden.
*
* @method Html5.prototype.controls
* @method Flash#controls
* @return {boolean}
* - The value of `controls` from the swf.
* - True indicates that native controls should be showing.
@ -483,7 +483,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* audio level as a percentage in decimal form. This means that 1 is 100%, 0.5 is 50%, and
* so on.
*
* @method Flash.prototype.volume
* @method Flash#volume
* @return {number}
* The volume percent as a decimal. Value will be between 0-1.
*/
@ -492,7 +492,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* Get the value of the `muted` from the swf. `muted` indicates the current
* audio level should be silent.
*
* @method Flash.prototype.muted
* @method Flash#muted
* @return {boolean}
* - True if the audio should be set to silent
* - False otherwise
@ -504,7 +504,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* media. `muted` and `defaultMuted` can have different values. `muted` indicates the
* current state.
*
* @method Flash.prototype.defaultMuted
* @method Flash#defaultMuted
* @return {boolean}
* - The value of `defaultMuted` from the swf.
* - True indicates that the media should start muted.
@ -519,7 +519,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* - 2: NETWORK_LOADING
* - 3: NETWORK_NO_SOURCE
*
* @method Flash.prototype.networkState
* @method Flash#networkState
* @return {number}
* The value of `networkState` from the swf. This will be a number
* from the list in the description.
@ -535,7 +535,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* - 3: HAVE_FUTURE_DATA
* - 4: HAVE_ENOUGH_DATA
*
* @method Flash.prototype.readyState
* @method Flash#readyState
* @return {number}
* The value of `readyState` from the swf. This will be a number
* from the list in the description.
@ -551,7 +551,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* - 3: HAVE_FUTURE_DATA
* - 4: HAVE_ENOUGH_DATA
*
* @method Flash.prototype.readyState
* @method Flash#readyState
* @return {number}
* The value of `readyState` from the swf. This will be a number
* from the list in the description.
@ -560,7 +560,7 @@ for (let i = 0; i < _readOnly.length; i++) {
/**
* Get the value of `initialTime` from the swf.
*
* @method Flash.prototype.initialTime
* @method Flash#initialTime
* @return {number}
* The `initialTime` proprety on the swf.
*/
@ -568,7 +568,7 @@ for (let i = 0; i < _readOnly.length; i++) {
/**
* Get the value of `startOffsetTime` from the swf.
*
* @method Flash.prototype.startOffsetTime
* @method Flash#startOffsetTime
* @return {number}
* The `startOffsetTime` proprety on the swf.
*/
@ -577,7 +577,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* Get the value of `paused` from the swf. `paused` indicates whether the swf
* is current paused or not.
*
* @method Flash.prototype.paused
* @method Flash#paused
* @return {boolean}
* The value of `paused` from the swf.
*/
@ -586,7 +586,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* Get the value of `ended` from the swf. `ended` indicates whether
* the media has reached the end or not.
*
* @method Flash.prototype.ended
* @method Flash#ended
* @return {boolean}
* - True indicates that the media has ended.
* - False indicates that the media has not ended.
@ -598,7 +598,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* Get the value of `videoWidth` from the swf. `videoWidth` indicates
* the current width of the media in css pixels.
*
* @method Flash.prototype.videoWidth
* @method Flash#videoWidth
* @return {number}
* The value of `videoWidth` from the swf. This will be a number
* in css pixels.
@ -618,7 +618,7 @@ for (let i = 0; i < _readOnly.length; i++) {
/**
* Set the value of `rtmpConnection` on the swf.
*
* @method Flash.prototype.setRtmpConnection
* @method Flash#setRtmpConnection
* @param {string} rtmpConnection
* New value to set the `rtmpConnection` property to.
*/
@ -626,7 +626,7 @@ for (let i = 0; i < _readOnly.length; i++) {
/**
* Set the value of `rtmpStream` on the swf.
*
* @method Flash.prototype.setRtmpStream
* @method Flash#setRtmpStream
* @param {string} rtmpStream
* New value to set the `rtmpStream` property to.
*/
@ -641,7 +641,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* - auto: allow the media and metadata for the media to be downloaded before
* interaction
*
* @method Flash.prototype.setPreload
* @method Flash#setPreload
* @param {string} preload
* The value of `preload` to set on the swf. Should be 'none', 'metadata',
* or 'auto'.
@ -650,7 +650,7 @@ for (let i = 0; i < _readOnly.length; i++) {
/**
* Set the value of `defaultPlaybackRate` on the swf.
*
* @method Flash.prototype.setDefaultPlaybackRate
* @method Flash#setDefaultPlaybackRate
* @param {number} defaultPlaybackRate
* New value to set the `defaultPlaybackRate` property to.
*/
@ -661,7 +661,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* - if playbackRate is set to 2, media will play twice as fast.
* - if playbackRate is set to 0.5, media will play half as fast.
*
* @method Flash.prototype.setPlaybackRate
* @method Flash#setPlaybackRate
* @param {number} playbackRate
* New value of `playbackRate` on the swf. A number indicating
* the current playback speed of the media, where 1 is normal speed.
@ -671,7 +671,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* Set the value of `autoplay` on the swf. `autoplay` indicates
* that the media should start to play as soon as the page is ready.
*
* @method Flash.prototype.setAutoplay
* @method Flash#setAutoplay
* @param {boolean} autoplay
* - The value of `autoplay` from the swf.
* - True indicates that the media ashould start as soon as the page loads.
@ -683,7 +683,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* that the media should return to the start of the media and continue playing once
* it reaches the end.
*
* @method Flash.prototype.setLoop
* @method Flash#setLoop
* @param {boolean} loop
* - True indicates that playback should seek back to start once
* the end of a media is reached.
@ -694,7 +694,7 @@ for (let i = 0; i < _readOnly.length; i++) {
/**
* Set the value of `mediaGroup` on the swf.
*
* @method Flash.prototype.setMediaGroup
* @method Flash#setMediaGroup
* @param {string} mediaGroup
* New value of `mediaGroup` to set on the swf.
*/
@ -702,7 +702,7 @@ for (let i = 0; i < _readOnly.length; i++) {
/**
* Set the value of `controller` on the swf.
*
* @method Flash.prototype.setController
* @method Flash#setController
* @param {string} controller
* New value the current value of `controller` on the swf.
*/
@ -711,7 +711,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* Get the value of `controls` from the swf. `controls` indicates
* whether the native flash controls should be shown or hidden.
*
* @method Flash.prototype.controls
* @method Flash#controls
* @return {boolean}
* - The value of `controls` from the swf.
* - True indicates that native controls should be showing.
@ -723,7 +723,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* audio level as a percentage in decimal form. This means that 1 is 100%, 0.5 is 50%, and
* so on.
*
* @method Flash.prototype.setVolume
* @method Flash#setVolume
* @param {number} percentAsDecimal
* The volume percent as a decimal. Value will be between 0-1.
*/
@ -732,7 +732,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* Set the value of the `muted` on the swf. `muted` indicates that the current
* audio level should be silent.
*
* @method Flash.prototype.setMuted
* @method Flash#setMuted
* @param {boolean} muted
* - True if the audio should be set to silent
* - False otherwise
@ -744,7 +744,7 @@ for (let i = 0; i < _readOnly.length; i++) {
* media. `muted` and `defaultMuted` can have different values. `muted` indicates the
* current state.
*
* @method Flash.prototype.setDefaultMuted
* @method Flash#setDefaultMuted
* @param {boolean} defaultMuted
* - True indicates that the media should start muted.
* - False indicates that the media should not start muted.

62
src/js/tech/html5.js

@ -1128,7 +1128,7 @@ Html5.resetMediaElement = function(el) {
* Get the value of `paused` from the media element. `paused` indicates whether the media element
* is currently paused or not.
*
* @method Html5.prototype.paused
* @method Html5#paused
* @return {boolean}
* The value of `paused` from the media element.
*
@ -1140,7 +1140,7 @@ Html5.resetMediaElement = function(el) {
* Get the value of `currentTime` from the media element. `currentTime` indicates
* the current second that the media is at in playback.
*
* @method Html5.prototype.currentTime
* @method Html5#currentTime
* @return {number}
* The value of `currentTime` from the media element.
*
@ -1153,7 +1153,7 @@ Html5.resetMediaElement = function(el) {
* object that represents the parts of the media that are already downloaded and
* available for playback.
*
* @method Html5.prototype.buffered
* @method Html5#buffered
* @return {TimeRange}
* The value of `buffered` from the media element.
*
@ -1166,7 +1166,7 @@ Html5.resetMediaElement = function(el) {
* the current playback volume of audio for a media. `volume` will be a value from 0
* (silent) to 1 (loudest and default).
*
* @method Html5.prototype.volume
* @method Html5#volume
* @return {number}
* The value of `volume` from the media element. Value will be between 0-1.
*
@ -1179,7 +1179,7 @@ Html5.resetMediaElement = function(el) {
* that the volume for the media should be set to silent. This does not actually change
* the `volume` attribute.
*
* @method Html5.prototype.muted
* @method Html5#muted
* @return {boolean}
* - True if the value of `volume` should be ignored and the audio set to silent.
* - False if the value of `volume` should be used.
@ -1192,7 +1192,7 @@ Html5.resetMediaElement = function(el) {
* Get the value of `poster` from the media element. `poster` indicates
* that the url of an image file that can/will be shown when no media data is available.
*
* @method Html5.prototype.poster
* @method Html5#poster
* @return {string}
* The value of `poster` from the media element. Value will be a url to an
* image.
@ -1211,7 +1211,7 @@ Html5.resetMediaElement = function(el) {
* - auto: allow the media and metadata for the media to be downloaded before
* interaction
*
* @method Html5.prototype.preload
* @method Html5#preload
* @return {string}
* The value of `preload` from the media element. Will be 'none', 'metadata',
* or 'auto'.
@ -1224,7 +1224,7 @@ Html5.resetMediaElement = function(el) {
* Get the value of `autoplay` from the media element. `autoplay` indicates
* that the media should start to play as soon as the page is ready.
*
* @method Html5.prototype.autoplay
* @method Html5#autoplay
* @return {boolean}
* - The value of `autoplay` from the media element.
* - True indicates that the media should start as soon as the page loads.
@ -1238,7 +1238,7 @@ Html5.resetMediaElement = function(el) {
* Get the value of `controls` from the media element. `controls` indicates
* whether the native media controls should be shown or hidden.
*
* @method Html5.prototype.controls
* @method Html5#controls
* @return {boolean}
* - The value of `controls` from the media element.
* - True indicates that native controls should be showing.
@ -1253,7 +1253,7 @@ Html5.resetMediaElement = function(el) {
* that the media should return to the start of the media and continue playing once
* it reaches the end.
*
* @method Html5.prototype.loop
* @method Html5#loop
* @return {boolean}
* - The value of `loop` from the media element.
* - True indicates that playback should seek back to start once
@ -1270,7 +1270,7 @@ Html5.resetMediaElement = function(el) {
* MediaError that may have occured during playback. If error returns null there is no
* current error.
*
* @method Html5.prototype.error
* @method Html5#error
* @return {MediaError|null}
* The value of `error` from the media element. Will be `MediaError` if there
* is a current error and null otherwise.
@ -1283,7 +1283,7 @@ Html5.resetMediaElement = function(el) {
* Get the value of `seeking` from the media element. `seeking` indicates whether the
* media is currently seeking to a new position or not.
*
* @method Html5.prototype.seeking
* @method Html5#seeking
* @return {boolean}
* - The value of `seeking` from the media element.
* - True indicates that the media is currently seeking to a new position.
@ -1297,7 +1297,7 @@ Html5.resetMediaElement = function(el) {
* Get the value of `seekable` from the media element. `seekable` returns a
* `TimeRange` object indicating ranges of time that can currently be `seeked` to.
*
* @method Html5.prototype.seekable
* @method Html5#seekable
* @return {TimeRange}
* The value of `seekable` from the media element. A `TimeRange` object
* indicating the current ranges of time that can be seeked to.
@ -1310,7 +1310,7 @@ Html5.resetMediaElement = function(el) {
* Get the value of `ended` from the media element. `ended` indicates whether
* the media has reached the end or not.
*
* @method Html5.prototype.ended
* @method Html5#ended
* @return {boolean}
* - The value of `ended` from the media element.
* - True indicates that the media has ended.
@ -1326,7 +1326,7 @@ Html5.resetMediaElement = function(el) {
* media. `muted` and `defaultMuted` can have different values. `muted` indicates the
* current state.
*
* @method Html5.prototype.defaultMuted
* @method Html5#defaultMuted
* @return {boolean}
* - The value of `defaultMuted` from the media element.
* - True indicates that the media should start muted.
@ -1342,7 +1342,7 @@ Html5.resetMediaElement = function(el) {
* - if playbackRate is set to 2, media will play twice as fast.
* - if playbackRate is set to 0.5, media will play half as fast.
*
* @method Html5.prototype.playbackRate
* @method Html5#playbackRate
* @return {number}
* The value of `playbackRate` from the media element. A number indicating
* the current playback speed of the media, where 1 is normal speed.
@ -1355,7 +1355,7 @@ Html5.resetMediaElement = function(el) {
* Get the value of `played` from the media element. `played` returns a `TimeRange`
* object representing points in the media timeline that have been played.
*
* @method Html5.prototype.played
* @method Html5#played
* @return {TimeRange}
* The value of `played` from the media element. A `TimeRange` object indicating
* the ranges of time that have been played.
@ -1372,7 +1372,7 @@ Html5.resetMediaElement = function(el) {
* - 2: NETWORK_LOADING
* - 3: NETWORK_NO_SOURCE
*
* @method Html5.prototype.networkState
* @method Html5#networkState
* @return {number}
* The value of `networkState` from the media element. This will be a number
* from the list in the description.
@ -1391,7 +1391,7 @@ Html5.resetMediaElement = function(el) {
* - 3: HAVE_FUTURE_DATA
* - 4: HAVE_ENOUGH_DATA
*
* @method Html5.prototype.readyState
* @method Html5#readyState
* @return {number}
* The value of `readyState` from the media element. This will be a number
* from the list in the description.
@ -1404,7 +1404,7 @@ Html5.resetMediaElement = function(el) {
* Get the value of `videoWidth` from the video element. `videoWidth` indicates
* the current width of the video in css pixels.
*
* @method Html5.prototype.videoWidth
* @method Html5#videoWidth
* @return {number}
* The value of `videoWidth` from the video element. This will be a number
* in css pixels.
@ -1417,7 +1417,7 @@ Html5.resetMediaElement = function(el) {
* Get the value of `videoHeight` from the video element. `videoHeigth` indicates
* the current height of the video in css pixels.
*
* @method Html5.prototype.videoHeight
* @method Html5#videoHeight
* @return {number}
* The value of `videoHeight` from the video element. This will be a number
* in css pixels.
@ -1439,7 +1439,7 @@ Html5.resetMediaElement = function(el) {
* audio level as a percentage in decimal form. This means that 1 is 100%, 0.5 is 50%, and
* so on.
*
* @method Html5.prototype.setVolume
* @method Html5#setVolume
* @param {number} percentAsDecimal
* The volume percent as a decimal. Valid range is from 0-1.
*
@ -1451,7 +1451,7 @@ Html5.resetMediaElement = function(el) {
* Set the value of `muted` on the media element. `muted` indicates the current
* audio level should be silent.
*
* @method Html5.prototype.setMuted
* @method Html5#setMuted
* @param {boolean} muted
* - True if the audio should be set to silent
* - False otherwise
@ -1464,7 +1464,7 @@ Html5.resetMediaElement = function(el) {
* Set the value of `src` on the media element. `src` indicates the current
* {@link Tech~SourceObject} for the media.
*
* @method Html5.prototype.setSrc
* @method Html5#setSrc
* @param {Tech~SourceObject} src
* The source object to set as the current source.
*
@ -1476,7 +1476,7 @@ Html5.resetMediaElement = function(el) {
* Set the value of `poster` on the media element. `poster` is the url to
* an image file that can/will be shown when no media data is available.
*
* @method Html5.prototype.setPoster
* @method Html5#setPoster
* @param {string} poster
* The url to an image that should be used as the `poster` for the media
* element.
@ -1495,7 +1495,7 @@ Html5.resetMediaElement = function(el) {
* - auto: allow the media and metadata for the media to be downloaded before
* interaction
*
* @method Html5.prototype.setPreload
* @method Html5#setPreload
* @param {string} preload
* The value of `preload` to set on the media element. Must be 'none', 'metadata',
* or 'auto'.
@ -1508,7 +1508,7 @@ Html5.resetMediaElement = function(el) {
* Set the value of `autoplay` on the media element. `autoplay` indicates
* that the media should start to play as soon as the page is ready.
*
* @method Html5.prototype.setAutoplay
* @method Html5#setAutoplay
* @param {boolean} autoplay
* - True indicates that the media should start as soon as the page loads.
* - False indicates that the media should not start as soon as the page loads.
@ -1522,7 +1522,7 @@ Html5.resetMediaElement = function(el) {
* that the media should return to the start of the media and continue playing once
* it reaches the end.
*
* @method Html5.prototype.setLoop
* @method Html5#setLoop
* @param {boolean} loop
* - True indicates that playback should seek back to start once
* the end of a media is reached.
@ -1539,7 +1539,7 @@ Html5.resetMediaElement = function(el) {
* - if playbackRate is set to 2, media will play twice as fast.
* - if playbackRate is set to 0.5, media will play half as fast.
*
* @method Html5.prototype.setPlaybackRate
* @method Html5#setPlaybackRate
* @return {number}
* The value of `playbackRate` from the media element. A number indicating
* the current playback speed of the media, where 1 is normal speed.
@ -1559,7 +1559,7 @@ Html5.resetMediaElement = function(el) {
* A wrapper around the media elements `pause` function. This will call the `HTML5`
* media elements `pause` function.
*
* @method Html5.prototype.pause
* @method Html5#pause
* @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-pause}
*/
'pause',
@ -1568,7 +1568,7 @@ Html5.resetMediaElement = function(el) {
* A wrapper around the media elements `load` function. This will call the `HTML5`s
* media element `load` function.
*
* @method Html5.prototype.load
* @method Html5#load
* @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-load}
*/
'load'

15
src/js/tech/tech.js

@ -21,14 +21,8 @@ import document from 'global/document';
/**
* An Object containing a structure like: `{src: 'url', type: 'mimetype'}` or string
* that just contains the src url alone.
*
* ``` js
* var SourceObject = {
* src: 'http://example.com/some-video.mp4',
* type: 'video/mp4'
* };
* var SourceString = 'http://example.com/some-video.mp4';
* ```
* * `var SourceObject = {src: 'http://ex.com/video.mp4', type: 'video/mp4'};`
* `var SourceString = 'http://example.com/some-video.mp4';`
*
* @typedef {Object|string} Tech~SourceObject
*
@ -948,10 +942,7 @@ Tech.prototype.featuresNativeTextTracks = false;
* Source handlers are scripts for handling specific formats.
* The source handler pattern is used for adaptive formats (HLS, DASH) that
* manually load video data and feed it into a Source Buffer (Media Source Extensions)
*
* ```js
* Tech.withSourceHandlers.call(MyTech);
* ```
* Example: `Tech.withSourceHandlers.call(MyTech);`
*
* @param {Tech} _Tech
* The tech to add source handler functions to.

5
src/js/tracks/text-track-list-converter.js

@ -1,8 +1,7 @@
/**
* Utilities for capturing text track state and re-creating tracks
* based on a capture.
* @file text-track-list-converter.js Utilities for capturing text track state and
* re-creating tracks based on a capture.
*
* @file text-track-list-converter.js
* @module text-track-list-converter
*/

2
src/js/tracks/track-list.js

@ -173,7 +173,7 @@ class TrackList extends EventTarget {
/**
* Events that can be called with on + eventName. See {@link EventHandler}.
*
* @property
* @property {Object} TrackList#allowedEvents_
* @private
*/
TrackList.prototype.allowedEvents_ = {

7
src/js/utils/events.js

@ -1,11 +1,10 @@
/**
* @file events.js
* @module events
*
* Event System (John Resig - Secrets of a JS Ninja http://jsninja.com/)
* @file events.js. An Event System (John Resig - Secrets of a JS Ninja http://jsninja.com/)
* (Original book version wasn't completely usable, so fixed some things and made Closure Compiler compatible)
* This should work very similarly to jQuery's events, however it's based off the book version which isn't as
* robust as jquery's, so there's probably some differences.
*
* @module events
*/
import * as Dom from './dom.js';

148
src/js/video.js

@ -47,10 +47,7 @@ if (typeof HTMLVideoElement === 'undefined' &&
* Doubles as the main function for users to create a player instance and also
* the main library object.
* The `videojs` function can be used to initialize or retrieve a player.
* ```js
* var myPlayer = videojs('my_video_id');
* ```
*
*
* @param {string|Element} id
* Video element or video element ID
*
@ -238,11 +235,6 @@ videojs.VERSION = require('../../package.json').version;
* The global options object. These are the settings that take effect
* if no overrides are specified when the player is created.
*
* ```js
* videojs.options.autoplay = true
* // -> all players will autoplay by default
* ```
*
* @type {Object}
*/
videojs.options = Player.prototype.options_;
@ -265,33 +257,16 @@ videojs.players = Player.players;
/**
* Get a component class object by name
* ```js
* var VjsButton = videojs.getComponent('Button');
* // Create a new instance of the component
* var myButton = new VjsButton(myPlayer);
* ```
*
* @borrows Component.getComponent as videojs.getComponent
*/
videojs.getComponent = Component.getComponent;
/**
* Register a component so it can referred to by name
* Used when adding to other
* components, either through addChild
* `component.addChild('myComponent')`
* or through default children options
* `{ children: ['myComponent'] }`.
* ```js
* // Get a component to subclass
* var VjsButton = videojs.getComponent('Button');
* // Subclass the component (see 'extend' doc for more info)
* var MySpecialButton = videojs.extend(VjsButton, {});
* // Register the new component
* VjsButton.registerComponent('MySepcialButton', MySepcialButton);
* // (optionally) add the new component as a default player child
* myPlayer.addChild('MySepcialButton');
* ```
* Register a component so it can referred to by name. Used when adding to other
* components, either through addChild `component.addChild('myComponent')` or through
* default children options `{ children: ['myComponent'] }`.
*
* > NOTE: You could also just initialize the component before adding.
* `component.addChild(new MyComponent());`
*
@ -314,11 +289,6 @@ videojs.registerComponent = (name, comp) => {
/**
* Get a Tech class object by name
* ```js
* var Html5 = videojs.getTech('Html5');
* // Create a new instance of the component
* var html5 = new Html5(options);
* ```
*
* @borrows Tech.getTech as videojs.getTech
*/
@ -328,17 +298,6 @@ videojs.getTech = Tech.getTech;
* Register a Tech so it can referred to by name.
* This is used in the tech order for the player.
*
* ```js
* // get the Html5 Tech
* var Html5 = videojs.getTech('Html5');
* var MyTech = videojs.extend(Html5, {});
* // Register the new Tech
* VjsButton.registerTech('Tech', MyTech);
* var player = videojs('myplayer', {
* techOrder: ['myTech', 'html5']
* });
* ```
*
* @borrows Tech.registerTech as videojs.registerTech
*/
videojs.registerTech = Tech.registerTech;
@ -364,28 +323,6 @@ videojs.TOUCH_ENABLED = browser.TOUCH_ENABLED;
/**
* Subclass an existing class
* Mimics ES6 subclassing with the `extend` keyword
* ```js
* // Create a basic javascript 'class'
* function MyClass(name) {
* // Set a property at initialization
* this.myName = name;
* }
* // Create an instance method
* MyClass.prototype.sayMyName = function() {
* alert(this.myName);
* };
* // Subclass the exisitng class and change the name
* // when initializing
* var MySubClass = videojs.extend(MyClass, {
* constructor: function(name) {
* // Call the super class constructor for the subclass
* MyClass.call(this, name)
* }
* });
* // Create an instance of the new sub class
* var myInstance = new MySubClass('John');
* myInstance.sayMyName(); // -> should alert "John"
* ```
*
* @borrows extend:extendFn as videojs.extend
*/
@ -396,25 +333,6 @@ videojs.extend = extendFn;
* Performs a deep merge like lodash.merge but **only merges plain objects**
* (not arrays, elements, anything else)
* Other values will be copied directly from the second object.
* ```js
* var defaultOptions = {
* foo: true,
* bar: {
* a: true,
* b: [1,2,3]
* }
* };
* var newOptions = {
* foo: false,
* bar: {
* b: [4,5,6]
* }
* };
* var result = videojs.mergeOptions(defaultOptions, newOptions);
* // result.foo = false;
* // result.bar.a = true;
* // result.bar.b = [4,5,6];
* ```
*
* @borrows merge-options:mergeOptions as videojs.mergeOptions
*/
@ -423,12 +341,6 @@ videojs.mergeOptions = mergeOptions;
/**
* Change the context (this) of a function
*
* ``` js
* videojs.bind(newContext, function() {
* this === newContext
* });
* ```
*
* > NOTE: as of v5.0 we require an ES5 shim, so you should use the native
* `function() {}.bind(newContext);` instead of this.
*
@ -441,40 +353,6 @@ videojs.bind = Fn.bind;
* Plugins are only initialized when options for the plugin are included
* in the player options, or the plugin function on the player instance is
* called.
* **See the plugin guide in the docs for a more detailed example**
* ```js
* // Make a plugin that alerts when the player plays
* videojs.plugin('myPlugin', function(myPluginOptions) {
* myPluginOptions = myPluginOptions || {};
*
* var player = this;
* var alertText = myPluginOptions.text || 'Player is playing!'
*
* player.on('play', function() {
* alert(alertText);
* });
* });
* // USAGE EXAMPLES
* // EXAMPLE 1: New player with plugin options, call plugin immediately
* var player1 = videojs('idOne', {
* myPlugin: {
* text: 'Custom text!'
* }
* });
* // Click play
* // --> Should alert 'Custom text!'
* // EXAMPLE 3: New player, initialize plugin later
* var player3 = videojs('idThree');
* // Click play
* // --> NO ALERT
* // Click pause
* // Initialize plugin using the plugin function on the player instance
* player3.myPlugin({
* text: 'Plugin added later!'
* });
* // Click play
* // --> Should alert 'Plugin added later!'
* ```
*
* @borrows plugin:plugin as videojs.plugin
*/
@ -482,9 +360,7 @@ videojs.plugin = plugin;
/**
* Adding languages so that they're available to all players.
* ```js
* videojs.addLanguage('es', { 'Hello': 'Hola' });
* ```
* Example: `videojs.addLanguage('es', { 'Hello': 'Hola' });`
*
* @param {string} code
* The language code or dictionary property
@ -587,18 +463,6 @@ videojs.trigger = Events.trigger;
/**
* A cross-browser XMLHttpRequest wrapper. Here's a simple example:
*
* ```js
* videojs.xhr({
* body: someJSONString,
* uri: "/foo",
* headers: {
* "Content-Type": "application/json"
* }
* }, function (err, resp, body) {
* // check resp.statusCode
* });
* ```
*
* @param {Object} options
* settings for the request.
*