web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-12-16 11:37:29 +02:00
Code Releases Activity
df7c91ad92
video.js/docs/api/vjs.Html5.md
Steve Heffernan df7c91ad92 Generated new API docs
2013-11-04 16:03:51 -08:00

15 KiB
Raw Blame History

vjs.Html5

EXTENDS: vjs.MediaTechController
DEFINED IN: src/js/media/html5.js#L12

HTML5 Media Controller - Wrapper for HTML5 Media API

INDEX

METHODS

addChild( child, [options] )

Adds a child component inside this component

myComponent.el();
// -> <div class='my-component'></div>
myComonent.children();
// [empty array]

var myButton = myComponent.addChild('MyButton');
// -> <div class='my-component'><div class="my-button">myButton<div></div>
// -> 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

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

buildCSSClass()

Allows sub components to stack CSS class names

RETURNS:
  • String The constructed class name

inherited from: src/js/component.js#L471

children()

Get an array of all child components

var kids = myComponent.children();
RETURNS:
  • Array The children

inherited from: 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

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

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

disable()

Disable component by making it unshowable

inherited from: src/js/component.js#L691

dispose()

Dispose of the component and all child components

inherited from: src/js/component.js#L74

el()

Get the component's DOM element

var domEl = myComponent.el();
RETURNS:
  • Element

inherited from: 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

getChildById( id )

Returns a child component with the provided ID

PARAMETERS:
  • id
RETURNS:
  • vjs.Component

inherited from: 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

hide()

Hide the component element if hidden

RETURNS:
  • vjs.Component

inherited from: src/js/component.js#L659

id()

Get the component's ID

var id = myComponent.id();
RETURNS:
  • String

inherited from: src/js/component.js#L239

init( player, options, ready )

PARAMETERS:
  • player
  • options
  • ready

defined in: src/js/media/html5.js#L14

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

initControlsListeners()

Set up click and touch listeners for the playback element On desktops, a click on the video itself will toggle playback, on a mobile device a click on the video toggles controls. (toggling controls is done by toggling the user state between active and inactive)

A tap can signal that a user has become active, or has become inactive e.g. a quick tap on an iPhone movie should reveal the controls. Another quick tap should hide them again (signaling the user is in an inactive viewing state)

In addition to this, we still want the user to be considered inactive after a few seconds of inactivity.

Note: the only part of iOS interaction we can't mimic with this setup is a touch and hold on the video element counting as activity in order to keep the controls showing, but that shouldn't be an issue. A touch and hold on any controls will still keep the user active

inherited from: src/js/media/media.js#L41

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

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

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

onClick( event )

Handle a click on the media element. By default will play/pause the media.

PARAMETERS:
  • event

inherited from: src/js/media/media.js#L131

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

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

player()

Return the component's player

RETURNS:
  • vjs.Player

inherited from: src/js/component.js#L116

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

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

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

removeControlsListeners()

Remove the listeners used for click and tap controls. This is needed for toggling to controls disabled, where a tap/touch should do nothing.

inherited from: src/js/media/media.js#L115

show()

Show the component element if hidden

RETURNS:
  • vjs.Component

inherited from: src/js/component.js#L649

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

triggerReady()

Trigger the ready listeners

RETURNS:
  • vjs.Component

inherited from: src/js/component.js#L600

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

EVENTS

resize EVENT

Fired when the width and/or height of the component changes

inherited from: src/js/component.js#L809