# vjs.Player

__EXTENDS__: [vjs.Component](vjs.Component.md)
__DEFINED IN__: [src/js/player.js#L21](https://github.com/videojs/video.js/blob/master/src/js/player.js#L21)

An instance of the `vjs.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 follwing 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 using `Video('example_video_1')`.

---

## INDEX

- [METHODS](#methods)
  - [buffered](#buffered)
  - [bufferedPercent](#bufferedpercent)
  - [cancelFullScreen](#cancelfullscreen) _`deprecated`_
  - [controls](#controls-controls-)
  - [currentTime](#currenttime-seconds-)
  - [dispose](#dispose)
  - [duration](#duration-seconds-)
  - [error](#error-err-)
  - [exitFullscreen](#exitfullscreen)
  - [init](#init-tag-options-ready-)
  - [isFullScreen](#isfullscreen-isfs-) _`deprecated`_
  - [isFullscreen](#isfullscreen-isfs-)
  - [muted](#muted-muted-)
  - [pause](#pause)
  - [paused](#paused)
  - [play](#play)
  - [poster](#poster-src-)
  - [requestFullScreen](#requestfullscreen) _`deprecated`_
  - [requestFullscreen](#requestfullscreen)
  - [src](#src-source-)
  - [volume](#volume-percentasdecimal-)
  - [addChild](#addchild-child-options-) _`inherited`_
  - [addClass](#addclass-classtoadd-) _`inherited`_
  - [buildCSSClass](#buildcssclass) _`inherited`_
  - [children](#children) _`inherited`_
  - [contentEl](#contentel) _`inherited`_
  - [createEl](#createel-tagname-attributes-) _`inherited`_
  - [dimensions](#dimensions-width-height-) _`inherited`_
  - [el](#el) _`inherited`_
  - [enableTouchActivity](#enabletouchactivity) _`inherited`_
  - [getChild](#getchild-name-) _`inherited`_
  - [getChildById](#getchildbyid-id-) _`inherited`_
  - [height](#height-num-skiplisteners-) _`inherited`_
  - [hide](#hide) _`inherited`_
  - [id](#id) _`inherited`_
  - [initChildren](#initchildren) _`inherited`_
  - [name](#name) _`inherited`_
  - [off](#off-type-fn-) _`inherited`_
  - [on](#on-type-fn-) _`inherited`_
  - [one](#one-type-fn-) _`inherited`_
  - [options](#options-obj-) _`inherited`_
  - [player](#player) _`inherited`_
  - [ready](#ready-fn-) _`inherited`_
  - [removeChild](#removechild-component-) _`inherited`_
  - [removeClass](#removeclass-classtoremove-) _`inherited`_
  - [show](#show) _`inherited`_
  - [trigger](#trigger-type-event-) _`inherited`_
  - [triggerReady](#triggerready) _`inherited`_
  - [width](#width-num-skiplisteners-) _`inherited`_

- [EVENTS](#events)
  - [durationchange](#durationchange-event)
  - [ended](#ended-event)
  - [firstplay](#firstplay-event)
  - [fullscreenchange](#fullscreenchange-event)
  - [loadedalldata](#loadedalldata-event)
  - [loadeddata](#loadeddata-event)
  - [loadedmetadata](#loadedmetadata-event)
  - [loadstart](#loadstart-event)
  - [pause](#pause-event)
  - [play](#play-event)
  - [progress](#progress-event)
  - [timeupdate](#timeupdate-event)
  - [volumechange](#volumechange-event)
  - [resize](#resize-event) _`inherited`_

---

## METHODS

### addChild( child, [options] )
> Adds a child component inside this component
>
>     myComponent.el();
>     // ->

>     myComonent.children();
>     // [empty array]
>
>     var myButton = myComponent.addChild('MyButton');
>     // ->

myButton

>     // -> myButton === myComonent.children()[0];
>
> Pass in options for child constructors and options for children of the child
>
>     var myButton = myComponent.addChild('MyButton', {
>       text: 'Press Me',
>       children: {
>         buttonChildExample: {
>           buttonChildOption: true
>         }
>       }
>     });

##### PARAMETERS:
* __child__ `String|vjs.Component` The class name or instance of a child to add
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.

##### RETURNS:
* `vjs.Component` The child component (created by this process if a string was used)

_inherited from_: [src/js/component.js#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)

---

### addClass( classToAdd )
> Add a CSS class name to the component's element

##### PARAMETERS:
* __classToAdd__ `String` Classname to add

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)

---

### buffered()
> Get a TimeRange object with the times of the video that have been downloaded
>
> If you just want the percent of the video that's been downloaded,
> use bufferedPercent.
>
>     // Number of different ranges of time have been buffered. Usually 1.
>     numberOfRanges = bufferedTimeRange.length,
>
>     // Time in seconds when the first range starts. Usually 0.
>     firstRangeStart = bufferedTimeRange.start(0),
>
>     // Time in seconds when the first range ends
>     firstRangeEnd = bufferedTimeRange.end(0),
>
>     // Length in seconds of the first time range
>     firstRangeLength = firstRangeEnd - firstRangeStart;

##### RETURNS:
* `Object` A mock TimeRange object (following HTML spec)

_defined in_: [src/js/player.js#L767](https://github.com/videojs/video.js/blob/master/src/js/player.js#L767)

---

### bufferedPercent()
> Get the percent (as a decimal) of the video that's been downloaded
>
>     var howMuchIsDownloaded = myPlayer.bufferedPercent();
>
> 0 means none, 1 means all.
> (This method isn't in the HTML5 spec, but it's very convenient)

##### RETURNS:
* `Number` A decimal between 0 and 1 representing the percent

_defined in_: [src/js/player.js#L793](https://github.com/videojs/video.js/blob/master/src/js/player.js#L793)

---

### buildCSSClass()
> Allows sub components to stack CSS class names

##### RETURNS:
* `String` The constructed class name

_inherited from_: [src/js/component.js#L506](https://github.com/videojs/video.js/blob/master/src/js/component.js#L506)

---

### cancelFullScreen()
> Old naming for exitFullscreen
**Deprecated** true

_defined in_: [src/js/player.js#L990](https://github.com/videojs/video.js/blob/master/src/js/player.js#L990)

---

### children()
> Get an array of all child components
>
>     var kids = myComponent.children();

##### RETURNS:
* `Array` The children

_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)

---

### contentEl()
> Return the component's DOM element for embedding content.
> Will either be el_ or a new element defined in createEl.

##### RETURNS:
* `Element`

_inherited from_: [src/js/component.js#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)

---

### controls( controls )
> Get or set whether or not the controls are showing.

##### PARAMETERS:
* __controls__ `Boolean` Set controls to showing or not

##### RETURNS:
* `Boolean` Controls are showing

_defined in_: [src/js/player.js#L1250](https://github.com/videojs/video.js/blob/master/src/js/player.js#L1250)

---

### createEl( [tagName], [attributes] )
> Create the component's DOM element

##### PARAMETERS:
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element

##### RETURNS:
* `Element`

_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)

---

### currentTime( [seconds] )
> Get or set the current time (in seconds)
>
>     // get
>     var whereYouAt = myPlayer.currentTime();
>
>     // set
>     myPlayer.currentTime(120); // 2 minutes into the video

##### PARAMETERS:
* __seconds__ `Number|String` _(OPTIONAL)_ The time to seek to

##### RETURNS:
* `Number` The time in seconds, when not setting
* `vjs.Player` self, when the current time is set

_defined in_: [src/js/player.js#L690](https://github.com/videojs/video.js/blob/master/src/js/player.js#L690)

---

### dimensions( width, height )
> Set both width and height at the same time

##### PARAMETERS:
* __width__ `Number|String`
* __height__ `Number|String`

##### RETURNS:
* `vjs.Component` The component

_inherited from_: [src/js/component.js#L775](https://github.com/videojs/video.js/blob/master/src/js/component.js#L775)

---

### dispose()
> Destroys the video player and does any necessary cleanup
>
>     myPlayer.dispose();
>
> This is especially helpful if you are dynamically adding and removing videos
> to/from the DOM.

_defined in_: [src/js/player.js#L112](https://github.com/videojs/video.js/blob/master/src/js/player.js#L112)

---

### duration( seconds )
> Get the length in time of the video in seconds
>
>     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.

##### PARAMETERS:
* __seconds__

##### RETURNS:
* `Number` The duration of the video in seconds

_defined in_: [src/js/player.js#L721](https://github.com/videojs/video.js/blob/master/src/js/player.js#L721)

---

### el()
> Get the component's DOM element
>
>     var domEl = myComponent.el();

##### RETURNS:
* `Element`

_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)

---

### enableTouchActivity()
> Report user touch activity when touch events occur
>
> User activity is used to determine when controls should show/hide. It's
> relatively simple when it comes to mouse events, because any mouse event
> should show the controls. So we capture mouse events that bubble up to the
> player and report activity when that happens.
>
> With touch events it isn't as easy. We can't rely on touch events at the
> player level, because a tap (touchstart + touchend) on the video itself on
> mobile devices is meant to turn controls off (and on). User activity is
> checked asynchronously, so what could happen is a tap event on the video
> turns the controls off, then the touchend event bubbles up to the player,
> which if it reported user activity, would turn the controls right back on.
> (We also don't want to completely block touch events from bubbling up)
>
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
> to turn the controls back on on a mobile device.
>
> Here we're setting the default component behavior to report user activity
> whenever touch events happen, and this can be turned off by components that
> want touch events to act differently.

_inherited from_: [src/js/component.js#L954](https://github.com/videojs/video.js/blob/master/src/js/component.js#L954)

---

### error( err )
> Set or get the current MediaError

##### PARAMETERS:
* __err__ `*` A MediaError or a String/Number to be turned into a MediaError

##### RETURNS:
* `vjs.MediaError|null` when getting
* `vjs.Player` when setting

_defined in_: [src/js/player.js#L1335](https://github.com/videojs/video.js/blob/master/src/js/player.js#L1335)

---

### exitFullscreen()
> Return the video to its normal size after having been in full screen mode
>
>     myPlayer.exitFullscreen();

##### RETURNS:
* `vjs.Player` self

_defined in_: [src/js/player.js#L969](https://github.com/videojs/video.js/blob/master/src/js/player.js#L969)

---

### getChild( name )
> Returns a child component with the provided name

##### PARAMETERS:
* __name__

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)

---

### getChildById( id )
> Returns a child component with the provided ID

##### PARAMETERS:
* __id__

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)

---

### height( [num], [skipListeners] )
> Get or set the height of the component (CSS values)
>
> Setting the video tag dimension values only works with values in pixels.
> Percent values will not work.
> Some percents can be used, but width()/height() will return the number + %,
> not the actual computed width/height.

##### PARAMETERS:
* __num__ `Number|String` _(OPTIONAL)_ New component height
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger

##### RETURNS:
* `vjs.Component` This component, when setting the height
* `Number|String` The height, when getting

_inherited from_: [src/js/component.js#L764](https://github.com/videojs/video.js/blob/master/src/js/component.js#L764)

---

### hide()
> Hide the component element if currently showing

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L694](https://github.com/videojs/video.js/blob/master/src/js/component.js#L694)

---

### id()
> Get the component's ID
>
>     var id = myComponent.id();

##### RETURNS:
* `String`

_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)

---

### init( tag, [options], [ready] )
> player's constructor function

##### PARAMETERS:
* __tag__ `Element` The original video tag used for configuring options
* __options__ `Object` _(OPTIONAL)_ Player options
* __ready__ `Function` _(OPTIONAL)_ Ready callback function

_defined in_: [src/js/player.js#L32](https://github.com/videojs/video.js/blob/master/src/js/player.js#L32)

---

### initChildren()
> Add and initialize default child components from options
>
>     // 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: {
>         myChildOption: true
>       }
>     }
>
>     // Or when creating the component
>     var myComp = new MyComponent(player, {
>       children: {
>         myChildComponent: {
>           myChildOption: true
>         }
>       }
>     });
>
> The children option can also be an Array of child names or
> child options objects (that also include a 'name' key).
>
>     var myComp = new MyComponent(player, {
>       children: [
>         'button',
>         {
>           name: 'button',
>           someOtherOption: true
>         }
>       ]
>     });

_inherited from_: [src/js/component.js#L466](https://github.com/videojs/video.js/blob/master/src/js/component.js#L466)

---

### isFullScreen( isFS )
> Old naming for isFullscreen()
**Deprecated** true

##### PARAMETERS:
* __isFS__

_defined in_: [src/js/player.js#L892](https://github.com/videojs/video.js/blob/master/src/js/player.js#L892)

---

### isFullscreen( [isFS] )
> Check if the player is in fullscreen mode
>
>     // get
>     var fullscreenOrNot = myPlayer.isFullscreen();
>
>     // set
>     myPlayer.isFullscreen(true); // tell the player it's in fullscreen
>
> 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.

##### PARAMETERS:
* __isFS__ `Boolean` _(OPTIONAL)_ Update the player's fullscreen state

##### RETURNS:
* `Boolean` true if fullscreen, false if not
* `vjs.Player` self, when setting

_defined in_: [src/js/player.js#L880](https://github.com/videojs/video.js/blob/master/src/js/player.js#L880)

---

### muted( [muted] )
> Get the current muted state, or turn mute on or off
>
>     // get
>     var isVolumeMuted = myPlayer.muted();
>
>     // set
>     myPlayer.muted(true); // mute the volume

##### PARAMETERS:
* __muted__ `Boolean` _(OPTIONAL)_ True to mute, false to unmute

##### RETURNS:
* `Boolean` True if mute is on, false if not, when getting
* `vjs.Player` self, when setting mute

_defined in_: [src/js/player.js#L842](https://github.com/videojs/video.js/blob/master/src/js/player.js#L842)

---

### name()
> Get the component's name. The name is often used to reference the component.
>
>     var name = myComponent.name();

##### RETURNS:
* `String`

_inherited from_: [src/js/component.js#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)

---

### off( [type], [fn] )
> Remove an event listener from the component's element
>
>     myComponent.off("eventName", myFunc);

##### PARAMETERS:
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L545](https://github.com/videojs/video.js/blob/master/src/js/component.js#L545)

---

### on( type, fn )
> Add an event listener to this component's element
>
>     var myFunc = function(){
>       var myPlayer = this;
>       // Do something when the event is fired
>     };
>
>     myPlayer.on("eventName", myFunc);
>
> The context will be the component.

##### PARAMETERS:
* __type__ `String` The event type e.g. 'click'
* __fn__ `Function` The event listener

##### RETURNS:
* `vjs.Component` self

_inherited from_: [src/js/component.js#L531](https://github.com/videojs/video.js/blob/master/src/js/component.js#L531)

---

### one( type, fn )
> Add an event listener to be triggered only once and then removed

##### PARAMETERS:
* __type__ `String` Event type
* __fn__ `Function` Event listener

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L557](https://github.com/videojs/video.js/blob/master/src/js/component.js#L557)

---

### options( obj )
> Deep merge of options objects
>
> Whenever a property is an object on both options objects
> the two properties will be merged using vjs.obj.deepMerge.
>
> This is used for merging options for child components. We
> want it to be easy to override individual options on a child
> component without having to rewrite all the other default options.
>
>     Parent.prototype.options_ = {
>       children: {
>         'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
>         'childTwo': {},
>         'childThree': {}
>       }
>     }
>     newOptions = {
>       children: {
>         'childOne': { 'foo': 'baz', 'abc': '123' }
>         'childTwo': null,
>         'childFour': {}
>       }
>     }
>
>     this.options(newOptions);
>
> RESULT
>
>     {
>       children: {
>         'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
>         'childTwo': null, // Disabled. Won't be initialized.
>         'childThree': {},
>         'childFour': {}
>       }
>     }

##### PARAMETERS:
* __obj__ `Object` Object of new option values

##### RETURNS:
* `Object` A NEW object of this.options_ and obj merged

_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)

---

### pause()
> Pause the video playback
>
>     myPlayer.pause();

##### RETURNS:
* `vjs.Player` self

_defined in_: [src/js/player.js#L659](https://github.com/videojs/video.js/blob/master/src/js/player.js#L659)

---

### paused()
> Check if the player is paused
>
>     var isPaused = myPlayer.paused();
>     var isPlaying = !myPlayer.paused();

##### RETURNS:
* `Boolean` false if the media is currently playing, or true otherwise

_defined in_: [src/js/player.js#L672](https://github.com/videojs/video.js/blob/master/src/js/player.js#L672)

---

### play()
> start media playback
>
>     myPlayer.play();

##### RETURNS:
* `vjs.Player` self

_defined in_: [src/js/player.js#L647](https://github.com/videojs/video.js/blob/master/src/js/player.js#L647)

---

### player()
> Return the component's player

##### RETURNS:
* `vjs.Player`

_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)

---

### poster( [src] )
> get or set the poster image source url
>
> ##### EXAMPLE:
>
>     // getting
>     var currentPoster = myPlayer.poster();
>
>     // setting
>     myPlayer.poster('http://example.com/myImage.jpg');

##### PARAMETERS:
* __src__ `String` _(OPTIONAL)_ Poster image source URL

##### RETURNS:
* `String` poster URL when getting
* `vjs.Player` self when setting

_defined in_: [src/js/player.js#L1223](https://github.com/videojs/video.js/blob/master/src/js/player.js#L1223)

---

### ready( fn )
> Bind a listener to the component's ready state
>
> Different from event listeners in that if the ready event has already happend
> it will trigger the function immediately.

##### PARAMETERS:
* __fn__ `Function` Ready listener

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L616](https://github.com/videojs/video.js/blob/master/src/js/component.js#L616)

---

### removeChild( component )
> Remove a child component from this component's list of children, and the
> child component's element from this component's element

##### PARAMETERS:
* __component__ `vjs.Component` Component to remove

_inherited from_: [src/js/component.js#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)

---

### removeClass( classToRemove )
> Remove a CSS class name from the component's element

##### PARAMETERS:
* __classToRemove__ `String` Classname to remove

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L674](https://github.com/videojs/video.js/blob/master/src/js/component.js#L674)

---

### requestFullScreen()
> Old naming for requestFullscreen
**Deprecated** true

_defined in_: [src/js/player.js#L956](https://github.com/videojs/video.js/blob/master/src/js/player.js#L956)

---

### requestFullscreen()
> Increase the size of the video to full screen
>
>     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
> browser's default controls will be shown, and not the Video.js custom skin.
> This includes most mobile devices (iOS, Android) and older versions of
> Safari.

##### RETURNS:
* `vjs.Player` self

_defined in_: [src/js/player.js#L911](https://github.com/videojs/video.js/blob/master/src/js/player.js#L911)

---

### show()
> Show the component element if hidden

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L684](https://github.com/videojs/video.js/blob/master/src/js/component.js#L684)

---

### src( [source] )
> The source function updates the video source
>
> There are three types of variables you can pass as the argument.
>
> **URL String**: A URL to the the video file. Use this method if you are sure
> the current playback technology (HTML5/Flash) can support the source you
> provide. Currently only MP4 files can be used in both HTML5 and Flash.
>
>     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.
>
>     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.
>
>     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" }
>     ]);

##### PARAMETERS:
* __source__ `String|Object|Array` _(OPTIONAL)_ The source URL, object, or array of sources

##### RETURNS:
* `String` The current video source when getting
* `String` The player when setting

_defined in_: [src/js/player.js#L1100](https://github.com/videojs/video.js/blob/master/src/js/player.js#L1100)

---

### trigger( type, event )
> Trigger an event on an element
>
>     myComponent.trigger('eventName');

##### PARAMETERS:
* __type__ `String` The event type to trigger, e.g. 'click'
* __event__ `Event|Object` The event object to be passed to the listener

##### RETURNS:
* `vjs.Component` self

_inherited from_: [src/js/component.js#L571](https://github.com/videojs/video.js/blob/master/src/js/component.js#L571)

---

### triggerReady()
> Trigger the ready listeners

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L635](https://github.com/videojs/video.js/blob/master/src/js/component.js#L635)

---

### volume( percentAsDecimal )
> Get or set the current volume of the media
>
>     // get
>     var howLoudIsIt = myPlayer.volume();
>
>     // set
>     myPlayer.volume(0.5); // Set volume to half
>
> 0 is off (muted), 1.0 is all the way up, 0.5 is half way.

##### PARAMETERS:
* __percentAsDecimal__ `Number` The new volume as a decimal percent

##### RETURNS:
* `Number` The current volume, when getting
* `vjs.Player` self, when setting

_defined in_: [src/js/player.js#L812](https://github.com/videojs/video.js/blob/master/src/js/player.js#L812)

---

### width( [num], skipListeners )
> Set or get the width of the component (CSS values)
>
> Setting the video tag dimension values only works with values in pixels.
> Percent values will not work.
> Some percents can be used, but width()/height() will return the number + %,
> not the actual computed width/height.

##### PARAMETERS:
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
* __skipListeners__ `Boolean` Skip the 'resize' event trigger

##### RETURNS:
* `vjs.Component` This component, when setting the width
* `Number|String` The width, when getting

_inherited from_: [src/js/component.js#L747](https://github.com/videojs/video.js/blob/master/src/js/component.js#L747)

---

## EVENTS

### durationchange `EVENT`
> Fired when the duration of the media resource is first known or changed

_defined in_: [src/js/player.js#L542](https://github.com/videojs/video.js/blob/master/src/js/player.js#L542)

---

### ended `EVENT`
> Fired when the end of the media resource is reached (currentTime == duration)

_defined in_: [src/js/player.js#L531](https://github.com/videojs/video.js/blob/master/src/js/player.js#L531)

---

### firstplay `EVENT`
> Fired the first time a video is played
>
> Not part of the HLS spec, and we're not sure if this is the best
> implementation yet, so use sparingly. If you don't have a reason to
> prevent playback, use `myPlayer.one('play');` instead.

_defined in_: [src/js/player.js#L488](https://github.com/videojs/video.js/blob/master/src/js/player.js#L488)

---

### fullscreenchange `EVENT`
> Fired when the player switches in or out of fullscreen mode

_defined in_: [src/js/player.js#L571](https://github.com/videojs/video.js/blob/master/src/js/player.js#L571)

---

### loadedalldata `EVENT`
> Fired when the player has finished downloading the source data

_defined in_: [src/js/player.js#L468](https://github.com/videojs/video.js/blob/master/src/js/player.js#L468)

---

### loadeddata `EVENT`
> Fired when the player has downloaded data at the current playback position

_defined in_: [src/js/player.js#L462](https://github.com/videojs/video.js/blob/master/src/js/player.js#L462)

---

### loadedmetadata `EVENT`
> Fired when the player has initial duration and dimension information

_defined in_: [src/js/player.js#L456](https://github.com/videojs/video.js/blob/master/src/js/player.js#L456)

---

### loadstart `EVENT`
> Fired when the user agent begins looking for media data

_defined in_: [src/js/player.js#L412](https://github.com/videojs/video.js/blob/master/src/js/player.js#L412)

---

### pause `EVENT`
> Fired whenever the media has been paused

_defined in_: [src/js/player.js#L502](https://github.com/videojs/video.js/blob/master/src/js/player.js#L502)

---

### play `EVENT`
> Fired whenever the media begins or resumes playback

_defined in_: [src/js/player.js#L474](https://github.com/videojs/video.js/blob/master/src/js/player.js#L474)

---

### progress `EVENT`
> Fired while the user agent is downloading media data

_defined in_: [src/js/player.js#L520](https://github.com/videojs/video.js/blob/master/src/js/player.js#L520)

---

### resize `EVENT`
> Fired when the width and/or height of the component changes

_inherited from_: [src/js/component.js#L854](https://github.com/videojs/video.js/blob/master/src/js/component.js#L854)

---

### timeupdate `EVENT`
> Fired when the current playback position has changed
>
> During playback this is fired every 15-250 milliseconds, depnding on the
> playback technology in use.

_defined in_: [src/js/player.js#L514](https://github.com/videojs/video.js/blob/master/src/js/player.js#L514)

---

### volumechange `EVENT`
> Fired when the volume changes

_defined in_: [src/js/player.js#L565](https://github.com/videojs/video.js/blob/master/src/js/player.js#L565)

---


'name': objId, // Both ID and Name needed or swf to identifty itself

// If source was supplied pass as a flash var.

if (source.type && vjs.Flash.isStreamingType(source.type)) {

keep keep keep keep replace replace replace keep keep keep keep keep

# vjs.TextTrackButton

__EXTENDS__: [vjs.MenuButton](vjs.MenuButton.md)
__DEFINED IN__: [src/js/tracks.js#L814](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L814)

The base class for buttons that toggle specific text track types (e.g. subtitles)

---

## INDEX

- [METHODS](#methods)
  - [init](#init-player-options-)
  - [addChild](#addchild-child-options-) _`inherited`_
  - [addClass](#addclass-classtoadd-) _`inherited`_
  - [buildCSSClass](#buildcssclass) _`inherited`_
  - [children](#children) _`inherited`_
  - [contentEl](#contentel) _`inherited`_
  - [createEl](#createel-tagname-attributes-) _`inherited`_
  - [createItems](#createitems) _`inherited`_
  - [dimensions](#dimensions-width-height-) _`inherited`_
  - [dispose](#dispose) _`inherited`_
  - [el](#el) _`inherited`_
  - [enableTouchActivity](#enabletouchactivity) _`inherited`_
  - [getChild](#getchild-name-) _`inherited`_
  - [getChildById](#getchildbyid-id-) _`inherited`_
  - [height](#height-num-skiplisteners-) _`inherited`_
  - [hide](#hide) _`inherited`_
  - [id](#id) _`inherited`_
  - [initChildren](#initchildren) _`inherited`_
  - [name](#name) _`inherited`_
  - [off](#off-type-fn-) _`inherited`_
  - [on](#on-type-fn-) _`inherited`_
  - [one](#one-type-fn-) _`inherited`_
  - [options](#options-obj-) _`inherited`_
  - [player](#player) _`inherited`_
  - [ready](#ready-fn-) _`inherited`_
  - [removeChild](#removechild-component-) _`inherited`_
  - [removeClass](#removeclass-classtoremove-) _`inherited`_
  - [show](#show) _`inherited`_
  - [trigger](#trigger-type-event-) _`inherited`_
  - [triggerReady](#triggerready) _`inherited`_
  - [width](#width-num-skiplisteners-) _`inherited`_

- [EVENTS](#events)
  - [resize](#resize-event) _`inherited`_

---

## METHODS

### addChild( child, [options] )
> Adds a child component inside this component
>
>     myComponent.el();
>     // ->

>     myComonent.children();
>     // [empty array]
>
>     var myButton = myComponent.addChild('MyButton');
>     // ->

myButton

>     // -> myButton === myComonent.children()[0];
>
> Pass in options for child constructors and options for children of the child
>
>     var myButton = myComponent.addChild('MyButton', {
>       text: 'Press Me',
>       children: {
>         buttonChildExample: {
>           buttonChildOption: true
>         }
>       }
>     });

##### PARAMETERS:
* __child__ `String|vjs.Component` The class name or instance of a child to add
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.

##### RETURNS:
* `vjs.Component` The child component (created by this process if a string was used)

_inherited from_: [src/js/component.js#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)

---

### addClass( classToAdd )
> Add a CSS class name to the component's element

##### PARAMETERS:
* __classToAdd__ `String` Classname to add

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)

---

### buildCSSClass()
> Allows sub components to stack CSS class names

_inherited from_: [src/js/menu.js#L157](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L157)

---

### children()
> Get an array of all child components
>
>     var kids = myComponent.children();

##### RETURNS:
* `Array` The children

_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)

---

### contentEl()
> Return the component's DOM element for embedding content.
> Will either be el_ or a new element defined in createEl.

##### RETURNS:
* `Element`

_inherited from_: [src/js/component.js#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)

---

### createEl( [tagName], [attributes] )
> Create the component's DOM element

##### PARAMETERS:
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element

##### RETURNS:
* `Element`

_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)

---

### createItems()
> Create the list of menu items. Specific to each subclass.

_inherited from_: [src/js/menu.js#L154](https://github.com/videojs/video.js/blob/master/src/js/menu.js#L154)

---

### dimensions( width, height )
> Set both width and height at the same time

##### PARAMETERS:
* __width__ `Number|String`
* __height__ `Number|String`

##### RETURNS:
* `vjs.Component` The component

_inherited from_: [src/js/component.js#L775](https://github.com/videojs/video.js/blob/master/src/js/component.js#L775)

---

### dispose()
> Dispose of the component and all child components

_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)

---

### el()
> Get the component's DOM element
>
>     var domEl = myComponent.el();

##### RETURNS:
* `Element`

_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)

---

### enableTouchActivity()
> Report user touch activity when touch events occur
>
> User activity is used to determine when controls should show/hide. It's
> relatively simple when it comes to mouse events, because any mouse event
> should show the controls. So we capture mouse events that bubble up to the
> player and report activity when that happens.
>
> With touch events it isn't as easy. We can't rely on touch events at the
> player level, because a tap (touchstart + touchend) on the video itself on
> mobile devices is meant to turn controls off (and on). User activity is
> checked asynchronously, so what could happen is a tap event on the video
> turns the controls off, then the touchend event bubbles up to the player,
> which if it reported user activity, would turn the controls right back on.
> (We also don't want to completely block touch events from bubbling up)
>
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
> to turn the controls back on on a mobile device.
>
> Here we're setting the default component behavior to report user activity
> whenever touch events happen, and this can be turned off by components that
> want touch events to act differently.

_inherited from_: [src/js/component.js#L954](https://github.com/videojs/video.js/blob/master/src/js/component.js#L954)

---

### getChild( name )
> Returns a child component with the provided name

##### PARAMETERS:
* __name__

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)

---

### getChildById( id )
> Returns a child component with the provided ID

##### PARAMETERS:
* __id__

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)

---

### height( [num], [skipListeners] )
> Get or set the height of the component (CSS values)
>
> Setting the video tag dimension values only works with values in pixels.
> Percent values will not work.
> Some percents can be used, but width()/height() will return the number + %,
> not the actual computed width/height.

##### PARAMETERS:
* __num__ `Number|String` _(OPTIONAL)_ New component height
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger

##### RETURNS:
* `vjs.Component` This component, when setting the height
* `Number|String` The height, when getting

_inherited from_: [src/js/component.js#L764](https://github.com/videojs/video.js/blob/master/src/js/component.js#L764)

---

### hide()
> Hide the component element if currently showing

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L694](https://github.com/videojs/video.js/blob/master/src/js/component.js#L694)

---

### id()
> Get the component's ID
>
>     var id = myComponent.id();

##### RETURNS:
* `String`

_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)

---

### init( player, options )

##### PARAMETERS:
* __player__
* __options__

_defined in_: [src/js/tracks.js#L816](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L816)

---

### initChildren()
> Add and initialize default child components from options
>
>     // 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: {
>         myChildOption: true
>       }
>     }
>
>     // Or when creating the component
>     var myComp = new MyComponent(player, {
>       children: {
>         myChildComponent: {
>           myChildOption: true
>         }
>       }
>     });
>
> The children option can also be an Array of child names or
> child options objects (that also include a 'name' key).
>
>     var myComp = new MyComponent(player, {
>       children: [
>         'button',
>         {
>           name: 'button',
>           someOtherOption: true
>         }
>       ]
>     });

_inherited from_: [src/js/component.js#L466](https://github.com/videojs/video.js/blob/master/src/js/component.js#L466)

---

### name()
> Get the component's name. The name is often used to reference the component.
>
>     var name = myComponent.name();

##### RETURNS:
* `String`

_inherited from_: [src/js/component.js#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)

---

### off( [type], [fn] )
> Remove an event listener from the component's element
>
>     myComponent.off("eventName", myFunc);

##### PARAMETERS:
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L545](https://github.com/videojs/video.js/blob/master/src/js/component.js#L545)

---

### on( type, fn )
> Add an event listener to this component's element
>
>     var myFunc = function(){
>       var myPlayer = this;
>       // Do something when the event is fired
>     };
>
>     myPlayer.on("eventName", myFunc);
>
> The context will be the component.

##### PARAMETERS:
* __type__ `String` The event type e.g. 'click'
* __fn__ `Function` The event listener

##### RETURNS:
* `vjs.Component` self

_inherited from_: [src/js/component.js#L531](https://github.com/videojs/video.js/blob/master/src/js/component.js#L531)

---

### one( type, fn )
> Add an event listener to be triggered only once and then removed

##### PARAMETERS:
* __type__ `String` Event type
* __fn__ `Function` Event listener

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L557](https://github.com/videojs/video.js/blob/master/src/js/component.js#L557)

---

### options( obj )
> Deep merge of options objects
>
> Whenever a property is an object on both options objects
> the two properties will be merged using vjs.obj.deepMerge.
>
> This is used for merging options for child components. We
> want it to be easy to override individual options on a child
> component without having to rewrite all the other default options.
>
>     Parent.prototype.options_ = {
>       children: {
>         'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
>         'childTwo': {},
>         'childThree': {}
>       }
>     }
>     newOptions = {
>       children: {
>         'childOne': { 'foo': 'baz', 'abc': '123' }
>         'childTwo': null,
>         'childFour': {}
>       }
>     }
>
>     this.options(newOptions);
>
> RESULT
>
>     {
>       children: {
>         'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
>         'childTwo': null, // Disabled. Won't be initialized.
>         'childThree': {},
>         'childFour': {}
>       }
>     }

##### PARAMETERS:
* __obj__ `Object` Object of new option values

##### RETURNS:
* `Object` A NEW object of this.options_ and obj merged

_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)

---

### player()
> Return the component's player

##### RETURNS:
* `vjs.Player`

_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)

---

### ready( fn )
> Bind a listener to the component's ready state
>
> Different from event listeners in that if the ready event has already happend
> it will trigger the function immediately.

##### PARAMETERS:
* __fn__ `Function` Ready listener

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L616](https://github.com/videojs/video.js/blob/master/src/js/component.js#L616)

---

### removeChild( component )
> Remove a child component from this component's list of children, and the
> child component's element from this component's element

##### PARAMETERS:
* __component__ `vjs.Component` Component to remove

_inherited from_: [src/js/component.js#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)

---

### removeClass( classToRemove )
> Remove a CSS class name from the component's element

##### PARAMETERS:
* __classToRemove__ `String` Classname to remove

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L674](https://github.com/videojs/video.js/blob/master/src/js/component.js#L674)

---

### show()
> Show the component element if hidden

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L684](https://github.com/videojs/video.js/blob/master/src/js/component.js#L684)

---

### trigger( type, event )
> Trigger an event on an element
>
>     myComponent.trigger('eventName');

##### PARAMETERS:
* __type__ `String` The event type to trigger, e.g. 'click'
* __event__ `Event|Object` The event object to be passed to the listener

##### RETURNS:
* `vjs.Component` self

_inherited from_: [src/js/component.js#L571](https://github.com/videojs/video.js/blob/master/src/js/component.js#L571)

---

### triggerReady()
> Trigger the ready listeners

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L635](https://github.com/videojs/video.js/blob/master/src/js/component.js#L635)

---

### width( [num], skipListeners )
> Set or get the width of the component (CSS values)
>
> Setting the video tag dimension values only works with values in pixels.
> Percent values will not work.
> Some percents can be used, but width()/height() will return the number + %,
> not the actual computed width/height.

##### PARAMETERS:
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
* __skipListeners__ `Boolean` Skip the 'resize' event trigger

##### RETURNS:
* `vjs.Component` This component, when setting the width
* `Number|String` The width, when getting

_inherited from_: [src/js/component.js#L747](https://github.com/videojs/video.js/blob/master/src/js/component.js#L747)

---

## EVENTS

### resize `EVENT`
> Fired when the width and/or height of the component changes

_inherited from_: [src/js/component.js#L854](https://github.com/videojs/video.js/blob/master/src/js/component.js#L854)

---


keep keep keep keep replace replace replace replace replace replace replace replace replace replace replace replace replace keep keep keep

/**
 * @fileoverview VideoJS-SWF - Custom Flash Player with HTML5-ish API
 * https://github.com/zencoder/video-js-swf
 * Not using setupTriggers. Using global onEvent func to distribute events
 */

/**
 * Flash Media Controller - Wrapper for fallback SWF API
 *
 * @param {vjs.Player} player
 * @param {Object=} options
 * @param {Function=} ready
 * @constructor
 */
vjs.Flash = vjs.MediaTechController.extend({
  /** @constructor */
  init: function(player, options, ready){
    vjs.MediaTechController.call(this, player, options, ready);

    var source = options['source'],

        // Which element to embed in
        parentEl = options['parentEl'],

        // Create a temporary element to be replaced by swf object
        placeHolder = this.el_ = vjs.createEl('div', { id: player.id() + '_temp_flash' }),

        // Generate ID for swf object
        objId = player.id()+'_flash_api',

        // Store player options in local var for optimization
        // TODO: switch to using player methods instead of options
        // e.g. player.autoplay();
        playerOptions = player.options_,

        // Merge default flashvars with ones passed in to init
        flashVars = vjs.obj.merge({

          // SWF Callback Functions
          'readyFunction': 'videojs.Flash.onReady',
          'eventProxyFunction': 'videojs.Flash.onEvent',
          'errorEventProxyFunction': 'videojs.Flash.onError',

          // Player Settings
          'autoplay': playerOptions.autoplay,
          'preload': playerOptions.preload,
          'loop': playerOptions.loop,
          'muted': playerOptions.muted

        }, options['flashVars']),

        // Merge default parames with ones passed in
        params = vjs.obj.merge({
          'wmode': 'opaque', // Opaque is needed to overlay controls, but can affect playback performance
          'bgcolor': '#000000' // Using bgcolor prevents a white flash when the object is loading
        }, options['params']),

        // Merge default attributes with ones passed in
        attributes = vjs.obj.merge({
          'id': objId,
          'name': objId, // Both ID and Name needed or swf to identifty itself
          'class': 'vjs-tech'
        }, options['attributes']),

        lastSeekTarget
    ;

    // If source was supplied pass as a flash var.
    if (source) {
      if (source.type && vjs.Flash.isStreamingType(source.type)) {
        var parts = vjs.Flash.streamToParts(source.src);
        flashVars['rtmpConnection'] = encodeURIComponent(parts.connection);
        flashVars['rtmpStream'] = encodeURIComponent(parts.stream);
      }
      else {
        flashVars['src'] = encodeURIComponent(vjs.getAbsoluteURL(source.src));
      }
    }

    this['setCurrentTime'] = function(time){
      lastSeekTarget = time;
      this.el_.vjs_setProperty('currentTime', time);
    };
    this['currentTime'] = function(time){
      // when seeking make the reported time keep up with the requested time
      // by reading the time we're seeking to
      if (this.seeking()) {
        return lastSeekTarget;
      }
      return this.el_.vjs_getProperty('currentTime');
    };

    // Add placeholder to player div
    vjs.insertFirst(placeHolder, parentEl);

    // Having issues with Flash reloading on certain page actions (hide/resize/fullscreen) in certain browsers
    // This allows resetting the playhead when we catch the reload
    if (options['startTime']) {
      this.ready(function(){
        this.load();
        this.play();
        this.currentTime(options['startTime']);
      });
    }

    // firefox doesn't bubble mousemove events to parent. videojs/video-js-swf#37
    // bugzilla bug: https://bugzilla.mozilla.org/show_bug.cgi?id=836786
    if (vjs.IS_FIREFOX) {
      this.ready(function(){
        vjs.on(this.el(), 'mousemove', vjs.bind(this, function(){
          // since it's a custom event, don't bubble higher than the player
          this.player().trigger({ 'type':'mousemove', 'bubbles': false });
        }));
      });
    }

    // native click events on the SWF aren't triggered on IE11, Win8.1RT
    // use stageclick events triggered from inside the SWF instead
    player.on('stageclick', player.reportUserActivity);

    // Flash iFrame Mode
    // In web browsers there are multiple instances where changing the parent element or visibility of a plugin causes the plugin to reload.
    // - Firefox just about always. https://bugzilla.mozilla.org/show_bug.cgi?id=90268 (might be fixed by version 13)
    // - Webkit when hiding the plugin
    // - Webkit and Firefox when using requestFullScreen on a parent element
    // Loading the flash plugin into a dynamically generated iFrame gets around most of these issues.
    // Issues that remain include hiding the element and requestFullScreen in Firefox specifically

    // There's on particularly annoying issue with this method which is that Firefox throws a security error on an offsite Flash object loaded into a dynamically created iFrame.
    // Even though the iframe was inserted into a page on the web, Firefox + Flash considers it a local app trying to access an internet file.
    // I tried mulitple ways of setting the iframe src attribute but couldn't find a src that worked well. Tried a real/fake source, in/out of domain.
    // Also tried a method from stackoverflow that caused a security error in all browsers. http://stackoverflow.com/questions/2486901/how-to-set-document-domain-for-a-dynamically-generated-iframe
    // In the end the solution I found to work was setting the iframe window.location.href right before doing a document.write of the Flash object.
    // The only downside of this it seems to trigger another http request to the original page (no matter what's put in the href). Not sure why that is.

    // NOTE (2012-01-29): Cannot get Firefox to load the remote hosted SWF into a dynamically created iFrame
    // Firefox 9 throws a security error, unleess you call location.href right before doc.write.
    //    Not sure why that even works, but it causes the browser to look like it's continuously trying to load the page.
    // Firefox 3.6 keeps calling the iframe onload function anytime I write to it, causing an endless loop.

    if (options['iFrameMode'] === true && !vjs.IS_FIREFOX) {

      // Create iFrame with vjs-tech class so it's 100% width/height
      var iFrm = vjs.createEl('iframe', {
        'id': objId + '_iframe',
        'name': objId + '_iframe',
        'className': 'vjs-tech',
        'scrolling': 'no',
        'marginWidth': 0,
        'marginHeight': 0,
        'frameBorder': 0
      });

      // Update ready function names in flash vars for iframe window
      flashVars['readyFunction'] = 'ready';
      flashVars['eventProxyFunction'] = 'events';
      flashVars['errorEventProxyFunction'] = 'errors';

      // Tried multiple methods to get this to work in all browsers

      // Tried embedding the flash object in the page first, and then adding a place holder to the iframe, then replacing the placeholder with the page object.
      // The goal here was to try to load the swf URL in the parent page first and hope that got around the firefox security error
      // var newObj = vjs.Flash.embed(options['swf'], placeHolder, flashVars, params, attributes);
      // (in onload)
      //  var temp = vjs.createEl('a', { id:'asdf', innerHTML: 'asdf' } );
      //  iDoc.body.appendChild(temp);

      // Tried embedding the flash object through javascript in the iframe source.
      // This works in webkit but still triggers the firefox security error
      // iFrm.src = 'javascript: document.write('"+vjs.Flash.getEmbedCode(options['swf'], flashVars, params, attributes)+"');";

      // Tried an actual local iframe just to make sure that works, but it kills the easiness of the CDN version if you require the user to host an iframe
      // We should add an option to host the iframe locally though, because it could help a lot of issues.
      // iFrm.src = "iframe.html";

      // Wait until iFrame has loaded to write into it.
      vjs.on(iFrm, 'load', vjs.bind(this, function(){

        var iDoc,
            iWin = iFrm.contentWindow;

        // The one working method I found was to use the iframe's document.write() to create the swf object
        // This got around the security issue in all browsers except firefox.
        // I did find a hack where if I call the iframe's window.location.href='', it would get around the security error
        // However, the main page would look like it was loading indefinitely (URL bar loading spinner would never stop)
        // Plus Firefox 3.6 didn't work no matter what I tried.
        // if (vjs.USER_AGENT.match('Firefox')) {
        //   iWin.location.href = '';
        // }

        // Get the iFrame's document depending on what the browser supports
        iDoc = iFrm.contentDocument ? iFrm.contentDocument : iFrm.contentWindow.document;

        // Tried ensuring both document domains were the same, but they already were, so that wasn't the issue.
        // Even tried adding /. that was mentioned in a browser security writeup
        // document.domain = document.domain+'/.';
        // iDoc.domain = document.domain+'/.';

        // Tried adding the object to the iframe doc's innerHTML. Security error in all browsers.
        // iDoc.body.innerHTML = swfObjectHTML;

        // Tried appending the object to the iframe doc's body. Security error in all browsers.
        // iDoc.body.appendChild(swfObject);

        // Using document.write actually got around the security error that browsers were throwing.
        // Again, it's a dynamically generated (same domain) iframe, loading an external Flash swf.
        // Not sure why that's a security issue, but apparently it is.
        iDoc.write(vjs.Flash.getEmbedCode(options['swf'], flashVars, params, attributes));

        // Setting variables on the window needs to come after the doc write because otherwise they can get reset in some browsers
        // So far no issues with swf ready event being called before it's set on the window.
        iWin['player'] = this.player_;

        // Create swf ready function for iFrame window
        iWin['ready'] = vjs.bind(this.player_, function(currSwf){
          var el = iDoc.getElementById(currSwf),
              player = this,
              tech = player.tech;

          // Update reference to playback technology element
          tech.el_ = el;

          // Make sure swf is actually ready. Sometimes the API isn't actually yet.
          vjs.Flash.checkReady(tech);
        });

        // Create event listener for all swf events
        iWin['events'] = vjs.bind(this.player_, function(swfID, eventName){
          var player = this;
          if (player && player.techName === 'flash') {
            player.trigger(eventName);
          }
        });

        // Create error listener for all swf errors
        iWin['errors'] = vjs.bind(this.player_, function(swfID, eventName){
          vjs.log('Flash Error', eventName);
        });

      }));

      // Replace placeholder with iFrame (it will load now)
      placeHolder.parentNode.replaceChild(iFrm, placeHolder);

    // If not using iFrame mode, embed as normal object
    } else {
      vjs.Flash.embed(options['swf'], placeHolder, flashVars, params, attributes);
    }
  }
});

vjs.Flash.prototype.dispose = function(){
  vjs.MediaTechController.prototype.dispose.call(this);
};

vjs.Flash.prototype.play = function(){
  this.el_.vjs_play();
};

vjs.Flash.prototype.pause = function(){
  this.el_.vjs_pause();
};

vjs.Flash.prototype.src = function(src){
  if (src === undefined) {
    return this.currentSrc();
  }

  if (vjs.Flash.isStreamingSrc(src)) {
    src = vjs.Flash.streamToParts(src);
    this.setRtmpConnection(src.connection);
    this.setRtmpStream(src.stream);
  } else {
    // Make sure source URL is abosolute.
    src = vjs.getAbsoluteURL(src);
    this.el_.vjs_src(src);
  }

  // Currently the SWF doesn't autoplay if you load a source later.
  // e.g. Load player w/ no source, wait 2s, set src.
  if (this.player_.autoplay()) {
    var tech = this;
    setTimeout(function(){ tech.play(); }, 0);
  }
};

vjs.Flash.prototype.currentSrc = function(){
  var src = this.el_.vjs_getProperty('currentSrc');
  // no src, check and see if RTMP
  if (src == null) {
    var connection = this['rtmpConnection'](),
        stream = this['rtmpStream']();

    if (connection && stream) {
      src = vjs.Flash.streamFromParts(connection, stream);
    }
  }
  return src;
};

vjs.Flash.prototype.load = function(){
  this.el_.vjs_load();
};

vjs.Flash.prototype.poster = function(){
  this.el_.vjs_getProperty('poster');
};
vjs.Flash.prototype.setPoster = function(){
  // poster images are not handled by the Flash tech so make this a no-op
};

vjs.Flash.prototype.buffered = function(){
  return vjs.createTimeRange(0, this.el_.vjs_getProperty('buffered'));
};

vjs.Flash.prototype.supportsFullScreen = function(){
  return false; // Flash does not allow fullscreen through javascript
};

vjs.Flash.prototype.enterFullScreen = function(){
  return false;
};

// Create setters and getters for attributes
var api = vjs.Flash.prototype,
    readWrite = 'rtmpConnection,rtmpStream,preload,defaultPlaybackRate,playbackRate,autoplay,loop,mediaGroup,controller,controls,volume,muted,defaultMuted'.split(','),
    readOnly = 'error,networkState,readyState,seeking,initialTime,duration,startOffsetTime,paused,played,seekable,ended,videoTracks,audioTracks,videoWidth,videoHeight,textTracks'.split(',');
    // Overridden: buffered, currentTime, currentSrc

/**
 * @this {*}
 * @private
 */
var createSetter = function(attr){
  var attrUpper = attr.charAt(0).toUpperCase() + attr.slice(1);
  api['set'+attrUpper] = function(val){ return this.el_.vjs_setProperty(attr, val); };
};

/**
 * @this {*}
 * @private
 */
var createGetter = function(attr){
  api[attr] = function(){ return this.el_.vjs_getProperty(attr); };
};

(function(){
  var i;
  // Create getter and setters for all read/write attributes
  for (i = 0; i < readWrite.length; i++) {
    createGetter(readWrite[i]);
    createSetter(readWrite[i]);
  }

  // Create getters for read-only attributes
  for (i = 0; i < readOnly.length; i++) {
    createGetter(readOnly[i]);
  }
})();

/* Flash Support Testing -------------------------------------------------------- */

vjs.Flash.isSupported = function(){
  return vjs.Flash.version()[0] >= 10;
  // return swfobject.hasFlashPlayerVersion('10');
};

vjs.Flash.canPlaySource = function(srcObj){
  var type;

  if (!srcObj.type) {
    return '';
  }

  type = srcObj.type.replace(/;.*/,'').toLowerCase();
  if (type in vjs.Flash.formats || type in vjs.Flash.streamingFormats) {
    return 'maybe';
  }
};

vjs.Flash.formats = {
  'video/flv': 'FLV',
  'video/x-flv': 'FLV',
  'video/mp4': 'MP4',
  'video/m4v': 'MP4'
};

vjs.Flash.streamingFormats = {
  'rtmp/mp4': 'MP4',
  'rtmp/flv': 'FLV'
};

vjs.Flash['onReady'] = function(currSwf){
  var el = vjs.el(currSwf);

  // Get player from box
  // On firefox reloads, el might already have a player
  var player = el['player'] || el.parentNode['player'],
      tech = player.tech;

  // Reference player on tech element
  el['player'] = player;

  // Update reference to playback technology element
  tech.el_ = el;

  vjs.Flash.checkReady(tech);
};

// The SWF isn't alwasy ready when it says it is. Sometimes the API functions still need to be added to the object.
// If it's not ready, we set a timeout to check again shortly.
vjs.Flash.checkReady = function(tech){

  // Check if API property exists
  if (tech.el().vjs_getProperty) {

    // If so, tell tech it's ready
    tech.triggerReady();

  // Otherwise wait longer.
  } else {

    setTimeout(function(){
      vjs.Flash.checkReady(tech);
    }, 50);

  }
};

// Trigger events from the swf on the player
vjs.Flash['onEvent'] = function(swfID, eventName){
  var player = vjs.el(swfID)['player'];
  player.trigger(eventName);
};

// Log errors from the swf
vjs.Flash['onError'] = function(swfID, err){
  var player = vjs.el(swfID)['player'];
  var msg = 'FLASH: '+err;

  if (err == 'srcnotfound') {
    player.error({ code: 4, message: msg });

  // errors we haven't categorized into the media errors
  } else {
    player.error(msg);
  }
};

// Flash Version Check
vjs.Flash.version = function(){
  var version = '0,0,0';

  // IE
  try {
    version = new window.ActiveXObject('ShockwaveFlash.ShockwaveFlash').GetVariable('$version').replace(/\D+/g, ',').match(/^,?(.+),?$/)[1];

  // other browsers
  } catch(e) {
    try {
      if (navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin){
        version = (navigator.plugins['Shockwave Flash 2.0'] || navigator.plugins['Shockwave Flash']).description.replace(/\D+/g, ',').match(/^,?(.+),?$/)[1];
      }
    } catch(err) {}
  }
  return version.split(',');
};

// Flash embedding method. Only used in non-iframe mode
vjs.Flash.embed = function(swf, placeHolder, flashVars, params, attributes){
  var code = vjs.Flash.getEmbedCode(swf, flashVars, params, attributes),

      // Get element by embedding code and retrieving created element
      obj = vjs.createEl('div', { innerHTML: code }).childNodes[0],

      par = placeHolder.parentNode
  ;

  placeHolder.parentNode.replaceChild(obj, placeHolder);

  // IE6 seems to have an issue where it won't initialize the swf object after injecting it.
  // This is a dumb fix
  var newObj = par.childNodes[0];
  setTimeout(function(){
    newObj.style.display = 'block';
  }, 1000);

  return obj;

};

vjs.Flash.getEmbedCode = function(swf, flashVars, params, attributes){

  var objTag = '<object type="application/x-shockwave-flash"',
      flashVarsString = '',
      paramsString = '',
      attrsString = '';

  // Convert flash vars to string
  if (flashVars) {
    vjs.obj.each(flashVars, function(key, val){
      flashVarsString += (key + '=' + val + '&');
    });
  }

  // Add swf, flashVars, and other default params
  params = vjs.obj.merge({
    'movie': swf,
    'flashvars': flashVarsString,
    'allowScriptAccess': 'always', // Required to talk to swf
    'allowNetworking': 'all' // All should be default, but having security issues.
  }, params);

  // Create param tags string
  vjs.obj.each(params, function(key, val){
    paramsString += '<param name="'+key+'" value="'+val+'" />';
  });

  attributes = vjs.obj.merge({
    // Add swf to attributes (need both for IE and Others to work)
    'data': swf,

    // Default to 100% width/height
    'width': '100%',
    'height': '100%'

  }, attributes);

  // Create Attributes string
  vjs.obj.each(attributes, function(key, val){
    attrsString += (key + '="' + val + '" ');
  });

  return objTag + attrsString + '>' + paramsString + '</object>';
};

vjs.Flash.streamFromParts = function(connection, stream) {
  return connection + '&' + stream;
};

vjs.Flash.streamToParts = function(src) {
  var parts = {
    connection: '',
    stream: ''
  };

  if (! src) {
    return parts;
  }

  // Look for the normal URL separator we expect, '&'.
  // If found, we split the URL into two pieces around the
  // first '&'.
  var connEnd = src.indexOf('&');
  var streamBegin;
  if (connEnd !== -1) {
    streamBegin = connEnd + 1;
  }
  else {
    // If there's not a '&', we use the last '/' as the delimiter.
    connEnd = streamBegin = src.lastIndexOf('/') + 1;
    if (connEnd === 0) {
      // really, there's not a '/'?
      connEnd = streamBegin = src.length;
    }
  }
  parts.connection = src.substring(0, connEnd);
  parts.stream = src.substring(streamBegin, src.length);

  return parts;
};

vjs.Flash.isStreamingType = function(srcType) {
  return srcType in vjs.Flash.streamingFormats;
};

// RTMP has four variations, any string starting
// with one of these protocols should be valid
vjs.Flash.RTMP_RE = /^rtmp[set]?:\/\//i;

vjs.Flash.isStreamingSrc = function(src) {
  return vjs.Flash.RTMP_RE.test(src);
};


Setup
=====

Video.js is pretty easy to set up. It can take a matter of seconds to get the player up and working on your web page.

Step 1: Include the Video.js Javascript and CSS files in the head of your page.
------------------------------------------------------------------------------

You can download the Video.js source and host it on your own servers, or use the free CDN hosted version. It's often recommended now to put JavaScript before the end body tag (</body>) instead of the head (<head>), but Video.js includes an 'HTML5 Shiv', which needs to be in the head for older IE versions to respect the video tag as a valid element.

> NOTE: If you're already using an HTML5 shiv like [Modernizr](http://modernizr.com/) you can include the Video.js JavaScript anywhere, however make sure your version of Modernizr includes the shiv for video.

> If you're not using something like Modernizr but still want to include Video.JS before the closing body tag, you can add your own shiv. Include this in the head of your document:

> ```html
<script type="text/javascript">
  document.createElement('video');document.createElement('audio');document.createElement('track');
</script>
```

### CDN Version ###
```html
<link href="//vjs.zencdn.net/4.6/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.6/video.js"></script>
```

### Self Hosted. ###
With the self hosted option you'll also want to update the location of the video-js.swf file.
```html
<link href="//example.com/path/to/video-js.css" rel="stylesheet">
<script src="//example.com/path/to/video.js"></script>
<script>
  videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"
</script>
```

Step 2: Add an HTML5 video tag to your page.
--------------------------------------------
With Video.js you just use an HTML5 video tag to embed a video. Video.js will then read the tag and make it work in all browsers, not just ones that support HTML5 video. Beyond the basic markup, Video.js needs a few extra pieces.

  1. The 'data-setup' Attribute tells Video.js to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute (see [options](options.md)). There are other methods for initializing the player, but this is the easiest.

  2. The 'id' Attribute: Should be used and unique for every video on the same page.

  3. The 'class' attribute contains two classes:
    - `video-js` applies styles that are required for Video.js functionality, like fullscreen and subtitles.
    - `vjs-default-skin` applies the default skin to the HTML controls, and can be removed or overridden to create your own controls design.

Otherwise include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video.*
```html
<video id="example_video_1" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"example_option":true}'>
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
```

By default, the big play button is located in the upper left hand corner so it doesn't cover up the interesting parts of the poster. If you'd prefer to center the big play button, you can add an additional `vjs-big-play-centered` class to your video element. For example:

```html
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"example_option":true}'>
  ...
</video>
```

Alternative Setup for Dynamically Loaded HTML
---------------------------------------------
If your web page or application loads the video tag dynamically (ajax, appendChild, etc.), so that it may not exist when the page loads, you'll want to manually set up the player instead of relying on the data-setup attribute. To do this, first remove the data-setup attribute from the tag so there's no confusion around when the player is initialized. Next, run the following javascript some time after the Video.js javascript library has loaded, and after the video tag has been loaded into the DOM.
```js
videojs("example_video_1", {}, function(){
  // Player (this) is initialized and ready.
});
```

The first argument in the `videojs` function is the ID of your video tag. Replace it with your own.

The second argument is an options object. It allows you to set additional options like you can with the data-setup attribute.

The third argument is a 'ready' callback. Once Video.js has initialized it will call this function.

Instead of using an element ID, you can also pass a reference to the element itself.

```js
videojs(document.getElementById('example_video_1'), {}, function() {
  // This is functionally the same as the previous example.
});
```

```js
videojs(document.getElementsByClassName('awesome_video_class')[0], {}, function() {
  // You can grab an element by class if you'd like, just make sure
  // if it's an array that you pick one (here we chose the first).
});
```

\* If you have trouble playing back content you know is in the [correct format](http://blog.zencoder.com/2013/09/13/what-formats-do-i-need-for-html5-video/), your HTTP server might not be delivering the content with the correct [MIME type](http://en.wikipedia.org/wiki/Internet_media_type#Type_video). Please double check your content's headers before opening an [issue](https://github.com/videojs/video.js/blob/master/CONTRIBUTING.md).


# vjs.TextTrackDisplay

__EXTENDS__: [vjs.Component](vjs.Component.md)
__DEFINED IN__: [src/js/tracks.js#L717](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L717)

The component for displaying text track cues

---

## INDEX

- [METHODS](#methods)
  - [init](#init-player-options-ready-)
  - [addChild](#addchild-child-options-) _`inherited`_
  - [addClass](#addclass-classtoadd-) _`inherited`_
  - [buildCSSClass](#buildcssclass) _`inherited`_
  - [children](#children) _`inherited`_
  - [contentEl](#contentel) _`inherited`_
  - [createEl](#createel-tagname-attributes-) _`inherited`_
  - [dimensions](#dimensions-width-height-) _`inherited`_
  - [dispose](#dispose) _`inherited`_
  - [el](#el) _`inherited`_
  - [enableTouchActivity](#enabletouchactivity) _`inherited`_
  - [getChild](#getchild-name-) _`inherited`_
  - [getChildById](#getchildbyid-id-) _`inherited`_
  - [height](#height-num-skiplisteners-) _`inherited`_
  - [hide](#hide) _`inherited`_
  - [id](#id) _`inherited`_
  - [initChildren](#initchildren) _`inherited`_
  - [name](#name) _`inherited`_
  - [off](#off-type-fn-) _`inherited`_
  - [on](#on-type-fn-) _`inherited`_
  - [one](#one-type-fn-) _`inherited`_
  - [options](#options-obj-) _`inherited`_
  - [player](#player) _`inherited`_
  - [ready](#ready-fn-) _`inherited`_
  - [removeChild](#removechild-component-) _`inherited`_
  - [removeClass](#removeclass-classtoremove-) _`inherited`_
  - [show](#show) _`inherited`_
  - [trigger](#trigger-type-event-) _`inherited`_
  - [triggerReady](#triggerready) _`inherited`_
  - [width](#width-num-skiplisteners-) _`inherited`_

- [EVENTS](#events)
  - [resize](#resize-event) _`inherited`_

---

## METHODS

### addChild( child, [options] )
> Adds a child component inside this component
>
>     myComponent.el();
>     // ->

>     myComonent.children();
>     // [empty array]
>
>     var myButton = myComponent.addChild('MyButton');
>     // ->

myButton

>     // -> myButton === myComonent.children()[0];
>
> Pass in options for child constructors and options for children of the child
>
>     var myButton = myComponent.addChild('MyButton', {
>       text: 'Press Me',
>       children: {
>         buttonChildExample: {
>           buttonChildOption: true
>         }
>       }
>     });

##### PARAMETERS:
* __child__ `String|vjs.Component` The class name or instance of a child to add
* __options__ `Object` _(OPTIONAL)_ Options, including options to be passed to children of the child.

##### RETURNS:
* `vjs.Component` The child component (created by this process if a string was used)

_inherited from_: [src/js/component.js#L347](https://github.com/videojs/video.js/blob/master/src/js/component.js#L347)

---

### addClass( classToAdd )
> Add a CSS class name to the component's element

##### PARAMETERS:
* __classToAdd__ `String` Classname to add

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L663](https://github.com/videojs/video.js/blob/master/src/js/component.js#L663)

---

### buildCSSClass()
> Allows sub components to stack CSS class names

##### RETURNS:
* `String` The constructed class name

_inherited from_: [src/js/component.js#L506](https://github.com/videojs/video.js/blob/master/src/js/component.js#L506)

---

### children()
> Get an array of all child components
>
>     var kids = myComponent.children();

##### RETURNS:
* `Array` The children

_inherited from_: [src/js/component.js#L281](https://github.com/videojs/video.js/blob/master/src/js/component.js#L281)

---

### contentEl()
> Return the component's DOM element for embedding content.
> Will either be el_ or a new element defined in createEl.

##### RETURNS:
* `Element`

_inherited from_: [src/js/component.js#L224](https://github.com/videojs/video.js/blob/master/src/js/component.js#L224)

---

### createEl( [tagName], [attributes] )
> Create the component's DOM element

##### PARAMETERS:
* __tagName__ `String` _(OPTIONAL)_ Element's node type. e.g. 'div'
* __attributes__ `Object` _(OPTIONAL)_ An object of element attributes that should be set on the element

##### RETURNS:
* `Element`

_inherited from_: [src/js/component.js#L194](https://github.com/videojs/video.js/blob/master/src/js/component.js#L194)

---

### dimensions( width, height )
> Set both width and height at the same time

##### PARAMETERS:
* __width__ `Number|String`
* __height__ `Number|String`

##### RETURNS:
* `vjs.Component` The component

_inherited from_: [src/js/component.js#L775](https://github.com/videojs/video.js/blob/master/src/js/component.js#L775)

---

### dispose()
> Dispose of the component and all child components

_inherited from_: [src/js/component.js#L78](https://github.com/videojs/video.js/blob/master/src/js/component.js#L78)

---

### el()
> Get the component's DOM element
>
>     var domEl = myComponent.el();

##### RETURNS:
* `Element`

_inherited from_: [src/js/component.js#L205](https://github.com/videojs/video.js/blob/master/src/js/component.js#L205)

---

### enableTouchActivity()
> Report user touch activity when touch events occur
>
> User activity is used to determine when controls should show/hide. It's
> relatively simple when it comes to mouse events, because any mouse event
> should show the controls. So we capture mouse events that bubble up to the
> player and report activity when that happens.
>
> With touch events it isn't as easy. We can't rely on touch events at the
> player level, because a tap (touchstart + touchend) on the video itself on
> mobile devices is meant to turn controls off (and on). User activity is
> checked asynchronously, so what could happen is a tap event on the video
> turns the controls off, then the touchend event bubbles up to the player,
> which if it reported user activity, would turn the controls right back on.
> (We also don't want to completely block touch events from bubbling up)
>
> Also a touchmove, touch+hold, and anything other than a tap is not supposed
> to turn the controls back on on a mobile device.
>
> Here we're setting the default component behavior to report user activity
> whenever touch events happen, and this can be turned off by components that
> want touch events to act differently.

_inherited from_: [src/js/component.js#L954](https://github.com/videojs/video.js/blob/master/src/js/component.js#L954)

---

### getChild( name )
> Returns a child component with the provided name

##### PARAMETERS:
* __name__

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L315](https://github.com/videojs/video.js/blob/master/src/js/component.js#L315)

---

### getChildById( id )
> Returns a child component with the provided ID

##### PARAMETERS:
* __id__

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L298](https://github.com/videojs/video.js/blob/master/src/js/component.js#L298)

---

### height( [num], [skipListeners] )
> Get or set the height of the component (CSS values)
>
> Setting the video tag dimension values only works with values in pixels.
> Percent values will not work.
> Some percents can be used, but width()/height() will return the number + %,
> not the actual computed width/height.

##### PARAMETERS:
* __num__ `Number|String` _(OPTIONAL)_ New component height
* __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger

##### RETURNS:
* `vjs.Component` This component, when setting the height
* `Number|String` The height, when getting

_inherited from_: [src/js/component.js#L764](https://github.com/videojs/video.js/blob/master/src/js/component.js#L764)

---

### hide()
> Hide the component element if currently showing

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L694](https://github.com/videojs/video.js/blob/master/src/js/component.js#L694)

---

### id()
> Get the component's ID
>
>     var id = myComponent.id();

##### RETURNS:
* `String`

_inherited from_: [src/js/component.js#L243](https://github.com/videojs/video.js/blob/master/src/js/component.js#L243)

---

### init( player, options, ready )

##### PARAMETERS:
* __player__
* __options__
* __ready__

_defined in_: [src/js/tracks.js#L719](https://github.com/videojs/video.js/blob/master/src/js/tracks.js#L719)

---

### initChildren()
> Add and initialize default child components from options
>
>     // 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: {
>         myChildOption: true
>       }
>     }
>
>     // Or when creating the component
>     var myComp = new MyComponent(player, {
>       children: {
>         myChildComponent: {
>           myChildOption: true
>         }
>       }
>     });
>
> The children option can also be an Array of child names or
> child options objects (that also include a 'name' key).
>
>     var myComp = new MyComponent(player, {
>       children: [
>         'button',
>         {
>           name: 'button',
>           someOtherOption: true
>         }
>       ]
>     });

_inherited from_: [src/js/component.js#L466](https://github.com/videojs/video.js/blob/master/src/js/component.js#L466)

---

### name()
> Get the component's name. The name is often used to reference the component.
>
>     var name = myComponent.name();

##### RETURNS:
* `String`

_inherited from_: [src/js/component.js#L262](https://github.com/videojs/video.js/blob/master/src/js/component.js#L262)

---

### off( [type], [fn] )
> Remove an event listener from the component's element
>
>     myComponent.off("eventName", myFunc);

##### PARAMETERS:
* __type__ `String` _(OPTIONAL)_ Event type. Without type it will remove all listeners.
* __fn__ `Function` _(OPTIONAL)_ Event listener. Without fn it will remove all listeners for a type.

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L545](https://github.com/videojs/video.js/blob/master/src/js/component.js#L545)

---

### on( type, fn )
> Add an event listener to this component's element
>
>     var myFunc = function(){
>       var myPlayer = this;
>       // Do something when the event is fired
>     };
>
>     myPlayer.on("eventName", myFunc);
>
> The context will be the component.

##### PARAMETERS:
* __type__ `String` The event type e.g. 'click'
* __fn__ `Function` The event listener

##### RETURNS:
* `vjs.Component` self

_inherited from_: [src/js/component.js#L531](https://github.com/videojs/video.js/blob/master/src/js/component.js#L531)

---

### one( type, fn )
> Add an event listener to be triggered only once and then removed

##### PARAMETERS:
* __type__ `String` Event type
* __fn__ `Function` Event listener

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L557](https://github.com/videojs/video.js/blob/master/src/js/component.js#L557)

---

### options( obj )
> Deep merge of options objects
>
> Whenever a property is an object on both options objects
> the two properties will be merged using vjs.obj.deepMerge.
>
> This is used for merging options for child components. We
> want it to be easy to override individual options on a child
> component without having to rewrite all the other default options.
>
>     Parent.prototype.options_ = {
>       children: {
>         'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
>         'childTwo': {},
>         'childThree': {}
>       }
>     }
>     newOptions = {
>       children: {
>         'childOne': { 'foo': 'baz', 'abc': '123' }
>         'childTwo': null,
>         'childFour': {}
>       }
>     }
>
>     this.options(newOptions);
>
> RESULT
>
>     {
>       children: {
>         'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
>         'childTwo': null, // Disabled. Won't be initialized.
>         'childThree': {},
>         'childFour': {}
>       }
>     }

##### PARAMETERS:
* __obj__ `Object` Object of new option values

##### RETURNS:
* `Object` A NEW object of this.options_ and obj merged

_inherited from_: [src/js/component.js#L173](https://github.com/videojs/video.js/blob/master/src/js/component.js#L173)

---

### player()
> Return the component's player

##### RETURNS:
* `vjs.Player`

_inherited from_: [src/js/component.js#L120](https://github.com/videojs/video.js/blob/master/src/js/component.js#L120)

---

### ready( fn )
> Bind a listener to the component's ready state
>
> Different from event listeners in that if the ready event has already happend
> it will trigger the function immediately.

##### PARAMETERS:
* __fn__ `Function` Ready listener

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L616](https://github.com/videojs/video.js/blob/master/src/js/component.js#L616)

---

### removeChild( component )
> Remove a child component from this component's list of children, and the
> child component's element from this component's element

##### PARAMETERS:
* __component__ `vjs.Component` Component to remove

_inherited from_: [src/js/component.js#L405](https://github.com/videojs/video.js/blob/master/src/js/component.js#L405)

---

### removeClass( classToRemove )
> Remove a CSS class name from the component's element

##### PARAMETERS:
* __classToRemove__ `String` Classname to remove

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L674](https://github.com/videojs/video.js/blob/master/src/js/component.js#L674)

---

### show()
> Show the component element if hidden

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L684](https://github.com/videojs/video.js/blob/master/src/js/component.js#L684)

---

### trigger( type, event )
> Trigger an event on an element
>
>     myComponent.trigger('eventName');

##### PARAMETERS:
* __type__ `String` The event type to trigger, e.g. 'click'
* __event__ `Event|Object` The event object to be passed to the listener

##### RETURNS:
* `vjs.Component` self

_inherited from_: [src/js/component.js#L571](https://github.com/videojs/video.js/blob/master/src/js/component.js#L571)

---

### triggerReady()
> Trigger the ready listeners

##### RETURNS:
* `vjs.Component`

_inherited from_: [src/js/component.js#L635](https://github.com/videojs/video.js/blob/master/src/js/component.js#L635)

---

### width( [num], skipListeners )
> Set or get the width of the component (CSS values)
>
> Setting the video tag dimension values only works with values in pixels.
> Percent values will not work.
> Some percents can be used, but width()/height() will return the number + %,
> not the actual computed width/height.

##### PARAMETERS:
* __num__ `Number|String` _(OPTIONAL)_ Optional width number
* __skipListeners__ `Boolean` Skip the 'resize' event trigger

##### RETURNS:
* `vjs.Component` This component, when setting the width
* `Number|String` The width, when getting

_inherited from_: [src/js/component.js#L747](https://github.com/videojs/video.js/blob/master/src/js/component.js#L747)

---

## EVENTS

### resize `EVENT`
> Fired when the width and/or height of the component changes

_inherited from_: [src/js/component.js#L854](https://github.com/videojs/video.js/blob/master/src/js/component.js#L854)

---