Html5

Creates a remote text track object and returns a html track element

Creates and returns a text track object

Get autoplay attribute

Get a TimeRange object that represents the intersection of the time ranges for which the user agent has all relevant media

Get controls attribute

Create the component's DOM element

Get current source

Get current time

Get the value of the muted content attribute This attribute has no dynamic effect, it only controls the default state of the element

Dispose of html5 media element

Get duration

Get if video ended

Request to enter fullscreen

Get error value

Request to exit fullscreen

Get player height

Load media into player

Get loop attribute

Get if muted

Get the current state of network activity for the element, from the list below NETWORK_EMPTY (numeric value 0) NETWORK_IDLE (numeric value 1) NETWORK_LOADING (numeric value 2) NETWORK_NO_SOURCE (numeric value 3)

Pause for html5 tech

Paused for html5 tech

Play for html5 tech

Get desired speed at which the media resource is to play

Get poster

Get preload attribute

Get a value that expresses the current state of the element with respect to rendering the current playback position, from the codes in the list below HAVE_NOTHING (numeric value 0) HAVE_METADATA (numeric value 1) HAVE_CURRENT_DATA (numeric value 2) HAVE_FUTURE_DATA (numeric value 3) HAVE_ENOUGH_DATA (numeric value 4)

Remove remote text track from TextTrackList object

Reset the tech. Removes all sources and calls load.

Get a TimeRanges object that represents the ranges of the media resource to which it is possible for the user agent to seek.

Get whether or not the player is in the "seeking" state

Set autoplay attribute

Set controls attribute

Set current time

Set loop attribute

Set muted

Set desired speed at which the media resource is to play

Set preload attribute

Set video

Set volume level

Get/set video

Get if there is fullscreen support

Get text tracks

Get height of video

Get width of video

Get volume level

Get player width

Get buffered percent

Emulate texttracks

Gets a component by name

Initialize texttrack listeners

Turn off progress events

Turn on progress events

Remove event listeners for on play and pause and tracking current time

Set event listeners for on play and pause and tracking current time

Update duration

Return the time ranges that have been played through for the current source. This implementation is incomplete. It does not track the played time ranges, only whether the source has played at all or not.

Registers a Tech

Get remote htmltrackelements

Get remote texttracks

Provide a default setPoster method for techs Poster support for techs should be optional, so we don't want techs to break if they don't have a way to set a poster.

Turn off play progress tracking (when paused or dragging)

Stops tracking progress by clearing progress interval

Tracks current time

Track progress

Finds a single DOM element matching selector within the component's contentEl or another custom context.

Finds a all DOM elements matching selector within the component's contentEl or another custom context.

Adds a child component inside this component

    myComponent.el();
    // -> 

    myComponent.children();
    // [empty array]

    var myButton = myComponent.addChild('MyButton');
    // -> 
myButton

    // -> myButton === myComponent.children()[0];

Pass in options for child constructors and options for children of the child

    var myButton = myComponent.addChild('MyButton', {
      text: 'Press Me',
      buttonChildExample: {
        buttonChildOption: true
      }
    });

Add a CSS class name to the component's element

Allows sub components to stack CSS class names

Get an array of all child components

    var kids = myComponent.children();

Clears an interval and removes the associated dispose listener

Clears a timeout and removes the associated dispose listener

Return the component's DOM element where children are inserted. Will either be the same as el() or a new element defined in createEl().

Set both width and height at the same time

Get the component's DOM element

    var domEl = myComponent.el();

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.

Sets up the constructor using the supplied init method or uses the init of the parent object

Returns a child component with the provided name

Returns a child component with the provided ID

Check if a component's element has a CSS class name

Hide the component element if currently showing

Get the component's ID

    var id = myComponent.id();

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'
      ],
      myChildComponent: {
        myChildOption: true
      }
    };

    // Or when creating the component
    var myComp = new MyComponent(player, {
      children: [
        'myChildComponent'
      ],
      myChildComponent: {
        myChildOption: true
      }
    });

The children option can also be an array of child options objects (that also include a 'name' key). This can be used if you have two child components of the same type that need different options.

    var myComp = new MyComponent(player, {
      children: [
        'button',
        {
          name: 'button',
          someOtherOption: true
        },
        {
          name: 'button',
          someOtherOption: false
        }
      ]
    });

Get the component's name. The name is often used to reference the component.

    var name = myComponent.name();

Remove an event listener from this component's element

    myComponent.off('eventType', myFunc);

If myFunc is excluded, ALL listeners for the event type will be removed. If eventType is excluded, ALL listeners will be removed from the component. Alternatively you can use off to remove listeners that were added to other elements or components using myComponent.on(otherComponent.... In this case both the event type and listener function are REQUIRED.

    myComponent.off(otherElement, 'eventType', myFunc);
    myComponent.off(otherComponent, 'eventType', myFunc);

Add an event listener to this component's element

    var myFunc = function(){
      var myComponent = this;
      // Do something when the event is fired
    };

    myComponent.on('eventType', myFunc);

The context of myFunc will be myComponent unless previously bound. Alternatively, you can add a listener to another element or component.

    myComponent.on(otherElement, 'eventName', myFunc);
    myComponent.on(otherComponent, 'eventName', myFunc);

The benefit of using this over VjsEvents.on(otherElement, 'eventName', myFunc) and otherComponent.on('eventName', myFunc) is that this way the listeners will be automatically cleaned up when either component is disposed. It will also bind myComponent as the context of myFunc. NOTE: When using this on elements in the page other than window and document (both permanent), if you remove the element from the DOM you need to call myComponent.trigger(el, 'dispose') on it to clean up references to it and allow the browser to garbage collect it.

Add an event listener to be triggered only once and then removed

    myComponent.one('eventName', myFunc);

Alternatively you can add a listener to another element or component that will be triggered only once.

    myComponent.one(otherElement, 'eventName', myFunc);
    myComponent.one(otherComponent, 'eventName', myFunc);

Deep merge of options objects Whenever a property is an object on both options objects the two properties will be merged using mergeOptions.

    Parent.prototype.options_ = {
      optionSet: {
        'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
        'childTwo': {},
        'childThree': {}
      }
    }
    newOptions = {
      optionSet: {
        'childOne': { 'foo': 'baz', 'abc': '123' }
        'childTwo': null,
        'childFour': {}
      }
    }

    this.options(newOptions);

RESULT

    {
      optionSet: {
        'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
        'childTwo': null, // Disabled. Won't be initialized.
        'childThree': {},
        'childFour': {}
      }
    }

Return the component's player

Bind a listener to the component's ready state. Different from event listeners in that if the ready event has already happened it will trigger the function immediately.

Remove a child component from this component's list of children, and the child component's element from this component's element

Remove a CSS class name from the component's element

Creates an interval and sets up disposal automatically.

Creates timeout and sets up disposal automatically.

Show the component element if hidden

Add or remove a CSS class name from the component's element

Trigger an event on an element

    myComponent.trigger('eventName');
    myComponent.trigger({'type':'eventName'});
    myComponent.trigger('eventName', {data: 'some data'});
    myComponent.trigger({'type':'eventName'}, {data: 'some data'});

Trigger the ready listeners