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#L343](https://github.com/videojs/video.js/blob/master/src/js/component.js#L343) --- ### 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#L628](https://github.com/videojs/video.js/blob/master/src/js/component.js#L628) --- ### 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#L717](https://github.com/videojs/video.js/blob/master/src/js/player.js#L717) --- ### 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#L743](https://github.com/videojs/video.js/blob/master/src/js/player.js#L743) --- ### buildCSSClass() > Allows sub components to stack CSS class names ##### RETURNS: * `String` The constructed class name _inherited from_: [src/js/component.js#L471](https://github.com/videojs/video.js/blob/master/src/js/component.js#L471) --- ### cancelFullScreen() > Return the video to its normal size after having been in full screen mode > > myPlayer.cancelFullScreen(); ##### RETURNS: * `vjs.Player` self _defined in_: [src/js/player.js#L864](https://github.com/videojs/video.js/blob/master/src/js/player.js#L864) --- ### children() > Get an array of all child components > > var kids = myComponent.children(); ##### RETURNS: * `Array` The children _inherited from_: [src/js/component.js#L277](https://github.com/videojs/video.js/blob/master/src/js/component.js#L277) --- ### 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#L220](https://github.com/videojs/video.js/blob/master/src/js/component.js#L220) --- ### 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#L1115](https://github.com/videojs/video.js/blob/master/src/js/player.js#L1115) --- ### 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#L190](https://github.com/videojs/video.js/blob/master/src/js/component.js#L190) --- ### 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#L641](https://github.com/videojs/video.js/blob/master/src/js/player.js#L641) --- ### 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#L730](https://github.com/videojs/video.js/blob/master/src/js/component.js#L730) --- ### disable() > Disable component by making it unshowable _inherited from_: [src/js/component.js#L691](https://github.com/videojs/video.js/blob/master/src/js/component.js#L691) --- ### 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#L128](https://github.com/videojs/video.js/blob/master/src/js/player.js#L128) --- ### 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#L671](https://github.com/videojs/video.js/blob/master/src/js/player.js#L671) --- ### el() > Get the component's DOM element > > var domEl = myComponent.el(); ##### RETURNS: * `Element` _inherited from_: [src/js/component.js#L201](https://github.com/videojs/video.js/blob/master/src/js/component.js#L201) --- ### getChild( name ) > Returns a child component with the provided ID ##### PARAMETERS: * __name__ ##### RETURNS: * `vjs.Component` _inherited from_: [src/js/component.js#L311](https://github.com/videojs/video.js/blob/master/src/js/component.js#L311) --- ### getChildById( id ) > Returns a child component with the provided ID ##### PARAMETERS: * __id__ ##### RETURNS: * `vjs.Component` _inherited from_: [src/js/component.js#L294](https://github.com/videojs/video.js/blob/master/src/js/component.js#L294) --- ### height( [num], [skipListeners] ) > Get or set the height of the component (CSS values) ##### PARAMETERS: * __num__ `Number|String` _(OPTIONAL)_ New component height * __skipListeners__ `Boolean` _(OPTIONAL)_ Skip the resize event trigger ##### RETURNS: * `vjs.Component` The component if the height was set * `Number|String` The height if it wasn't set _inherited from_: [src/js/component.js#L719](https://github.com/videojs/video.js/blob/master/src/js/component.js#L719) --- ### hide() > Hide the component element if hidden ##### RETURNS: * `vjs.Component` _inherited from_: [src/js/component.js#L659](https://github.com/videojs/video.js/blob/master/src/js/component.js#L659) --- ### id() > Get the component's ID > > var id = myComponent.id(); ##### RETURNS: * `String` _inherited from_: [src/js/component.js#L239](https://github.com/videojs/video.js/blob/master/src/js/component.js#L239) --- ### 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 > } > } _inherited from_: [src/js/component.js#L439](https://github.com/videojs/video.js/blob/master/src/js/component.js#L439) --- ### 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#L792](https://github.com/videojs/video.js/blob/master/src/js/player.js#L792) --- ### 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#L258](https://github.com/videojs/video.js/blob/master/src/js/component.js#L258) --- ### 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#L510](https://github.com/videojs/video.js/blob/master/src/js/component.js#L510) --- ### 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#L496](https://github.com/videojs/video.js/blob/master/src/js/component.js#L496) --- ### 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#L522](https://github.com/videojs/video.js/blob/master/src/js/component.js#L522) --- ### 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 whose values will be overwritten ##### RETURNS: * `Object` NEW merged object. Does not return obj1. _inherited from_: [src/js/component.js#L169](https://github.com/videojs/video.js/blob/master/src/js/component.js#L169) --- ### pause() > Pause the video playback > > myPlayer.pause(); ##### RETURNS: * `vjs.Player` self _defined in_: [src/js/player.js#L610](https://github.com/videojs/video.js/blob/master/src/js/player.js#L610) --- ### 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#L623](https://github.com/videojs/video.js/blob/master/src/js/player.js#L623) --- ### play() > start media playback > > myPlayer.play(); ##### RETURNS: * `vjs.Player` self _defined in_: [src/js/player.js#L598](https://github.com/videojs/video.js/blob/master/src/js/player.js#L598) --- ### player() > Return the component's player ##### RETURNS: * `vjs.Player` _inherited from_: [src/js/component.js#L116](https://github.com/videojs/video.js/blob/master/src/js/component.js#L116) --- ### 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#L1095](https://github.com/videojs/video.js/blob/master/src/js/player.js#L1095) --- ### 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#L581](https://github.com/videojs/video.js/blob/master/src/js/component.js#L581) --- ### 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#L401](https://github.com/videojs/video.js/blob/master/src/js/component.js#L401) --- ### 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#L639](https://github.com/videojs/video.js/blob/master/src/js/component.js#L639) --- ### 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#L817](https://github.com/videojs/video.js/blob/master/src/js/player.js#L817) --- ### show() > Show the component element if hidden ##### RETURNS: * `vjs.Component` _inherited from_: [src/js/component.js#L649](https://github.com/videojs/video.js/blob/master/src/js/component.js#L649) --- ### 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: * `vjs.Player` self _defined in_: [src/js/player.js#L979](https://github.com/videojs/video.js/blob/master/src/js/player.js#L979) --- ### 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#L536](https://github.com/videojs/video.js/blob/master/src/js/component.js#L536) --- ### triggerReady() > Trigger the ready listeners ##### RETURNS: * `vjs.Component` _inherited from_: [src/js/component.js#L600](https://github.com/videojs/video.js/blob/master/src/js/component.js#L600) --- ### 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#L762](https://github.com/videojs/video.js/blob/master/src/js/player.js#L762) --- ### width( [num], skipListeners ) > Set or get the width of the component (CSS values) > > Video tag width/height only work in pixels. No percents. > But allowing limited percents use. e.g. width() will return number+%, not computed width ##### PARAMETERS: * __num__ `Number|String` _(OPTIONAL)_ Optional width number * __skipListeners__ `Boolean` Skip the 'resize' event trigger ##### RETURNS: * `vjs.Component` Returns 'this' if width was set * `Number|String` Returns the width if nothing was set _inherited from_: [src/js/component.js#L707](https://github.com/videojs/video.js/blob/master/src/js/component.js#L707) --- ## EVENTS ### durationchange `EVENT` > Fired when the duration of the media resource is first known or changed _defined in_: [src/js/player.js#L498](https://github.com/videojs/video.js/blob/master/src/js/player.js#L498) --- ### ended `EVENT` > Fired when the end of the media resource is reached (currentTime == duration) _defined in_: [src/js/player.js#L487](https://github.com/videojs/video.js/blob/master/src/js/player.js#L487) --- ### error `EVENT` > Fired when there is an error in playback ##### PARAMETERS: * __e__ _defined in_: [src/js/player.js#L525](https://github.com/videojs/video.js/blob/master/src/js/player.js#L525) --- ### 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#L444](https://github.com/videojs/video.js/blob/master/src/js/player.js#L444) --- ### fullscreenchange `EVENT` > Fired when the player switches in or out of fullscreen mode _defined in_: [src/js/player.js#L513](https://github.com/videojs/video.js/blob/master/src/js/player.js#L513) --- ### loadedalldata `EVENT` > Fired when the player has finished downloading the source data _defined in_: [src/js/player.js#L424](https://github.com/videojs/video.js/blob/master/src/js/player.js#L424) --- ### loadeddata `EVENT` > Fired when the player has downloaded data at the current playback position _defined in_: [src/js/player.js#L418](https://github.com/videojs/video.js/blob/master/src/js/player.js#L418) --- ### loadedmetadata `EVENT` > Fired when the player has initial duration and dimension information _defined in_: [src/js/player.js#L412](https://github.com/videojs/video.js/blob/master/src/js/player.js#L412) --- ### loadstart `EVENT` > Fired when the user agent begins looking for media data _defined in_: [src/js/player.js#L406](https://github.com/videojs/video.js/blob/master/src/js/player.js#L406) --- ### pause `EVENT` > Fired whenever the media has been paused _defined in_: [src/js/player.js#L458](https://github.com/videojs/video.js/blob/master/src/js/player.js#L458) --- ### play `EVENT` > Fired whenever the media begins or resumes playback _defined in_: [src/js/player.js#L430](https://github.com/videojs/video.js/blob/master/src/js/player.js#L430) --- ### progress `EVENT` > Fired while the user agent is downloading media data _defined in_: [src/js/player.js#L476](https://github.com/videojs/video.js/blob/master/src/js/player.js#L476) --- ### resize `EVENT` > Fired when the width and/or height of the component changes _inherited from_: [src/js/component.js#L809](https://github.com/videojs/video.js/blob/master/src/js/component.js#L809) --- ### 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#L470](https://github.com/videojs/video.js/blob/master/src/js/player.js#L470) --- ### volumechange `EVENT` > Fired when the volume changes _defined in_: [src/js/player.js#L507](https://github.com/videojs/video.js/blob/master/src/js/player.js#L507) ---