videojs

Add a CSS class name to an element

Adding languages so that they're available to all players.

    videojs.addLanguage('es', { 'Hello': 'Hola' });

Normalizes and appends content to an element.

The content for an element can be passed in multiple types and combinations, whose behavior is as follows:

• String Normalized into a text node.

• Element, TextNode Passed through.

• Array A one-dimensional array of strings, elements, nodes, or functions (which return single strings, elements, or nodes).

• Function If the sole argument, is expected to produce a string, element, node, or array.

Creates an element and applies properties.

Creates an emulated TimeRange object.

Empties the contents of an element.

Subclass an existing class Mimics ES6 subclassing with the extend keyword

    // Create a basic javascript 'class'
    function MyClass(name){
      // Set a property at initialization
      this.myName = name;
    }
    // Create an instance method
    MyClass.prototype.sayMyName = function(){
      alert(this.myName);
    };
    // Subclass the exisitng class and change the name
    // when initializing
    var MySubClass = videojs.extend(MyClass, {
      constructor: function(name) {
        // Call the super class constructor for the subclass
        MyClass.call(this, name)
      }
    });
    // Create an instance of the new sub class
    var myInstance = new MySubClass('John');
    myInstance.sayMyName(); // -> should alert "John"

Format seconds as a time string, H:MM:SS or M:SS Supplying a guide (in seconds) will force a number of leading zeros to cover the length of the guide

Get an element's attribute values, as defined on the HTML tag Attributes are not the same as properties. They're defined on the tag or with setAttribute (which shouldn't be used with HTML) This will return true or false for boolean attributes.

Get a component class object by name

    var VjsButton = videojs.getComponent('Button');
    // Create a new instance of the component
    var myButton = new VjsButton(myPlayer);

Get an object with the currently created players, keyed by player ID

Check if an element has a CSS class

Normalizes and inserts content into an element; this is identical to appendContent(), except it empties the element first.

The content for an element can be passed in multiple types and combinations, whose behavior is as follows:

• String Normalized into a text node.

• Element, TextNode Passed through.

• Array A one-dimensional array of strings, elements, nodes, or functions (which return single strings, elements, or nodes).

• Function If the sole argument, is expected to produce a string, element, node, or array.

Returns whether the url passed is a cross domain request or not.

Determines, via duck typing, whether or not a value is a DOM element.

Determines, via duck typing, whether or not a value is a text node.

Merge two options objects recursively Performs a deep merge like lodash.merge but only merges plain objects (not arrays, elements, anything else) Other values will be copied directly from the second object.

    var defaultOptions = {
      foo: true,
      bar: {
        a: true,
        b: [1,2,3]
      }
    };
    var newOptions = {
      foo: false,
      bar: {
        b: [4,5,6]
      }
    };
    var result = videojs.mergeOptions(defaultOptions, newOptions);
    // result.foo = false;
    // result.bar.a = true;
    // result.bar.b = [4,5,6];

Removes event listeners from an element

Add an event listener to element It stores the handler function in a separate cache object and adds a generic handler to the element's event, along with a unique id (guid) to the element.

Trigger a listener only once for an event

Resolve and parse the elements of a URL

Create a Video.js player plugin Plugins are only initialized when options for the plugin are included in the player options, or the plugin function on the player instance is called. See the plugin guide in the docs for a more detailed example

    // Make a plugin that alerts when the player plays
    videojs.plugin('myPlugin', function(myPluginOptions) {
      myPluginOptions = myPluginOptions || {};

      var player = this;
      var alertText = myPluginOptions.text || 'Player is playing!'

      player.on('play', function(){
        alert(alertText);
      });
    });
    // USAGE EXAMPLES
    // EXAMPLE 1: New player with plugin options, call plugin immediately
    var player1 = videojs('idOne', {
      myPlugin: {
        text: 'Custom text!'
      }
    });
    // Click play
    // --> Should alert 'Custom text!'
    // EXAMPLE 3: New player, initialize plugin later
    var player3 = videojs('idThree');
    // Click play
    // --> NO ALERT
    // Click pause
    // Initialize plugin using the plugin function on the player instance
    player3.myPlugin({
      text: 'Plugin added later!'
    });
    // Click play
    // --> Should alert 'Plugin added later!'

Register a component so it can referred to by name Used when adding to other components, either through addChild component.addChild('myComponent') or through default children options { children: ['myComponent'] }.

    // Get a component to subclass
    var VjsButton = videojs.getComponent('Button');
    // Subclass the component (see 'extend' doc for more info)
    var MySpecialButton = videojs.extend(VjsButton, {});
    // Register the new component
    VjsButton.registerComponent('MySepcialButton', MySepcialButton);
    // (optionally) add the new component as a default player child
    myPlayer.addChild('MySepcialButton');

NOTE: You could also just initialize the component before adding. component.addChild(new MyComponent());

Register a Tech so it can referred to by name. This is used in the tech order for the player.

    // get the Html5 Tech
    var Html5 = videojs.getTech('Html5');
    var MyTech = videojs.extend(Html5, {});
    // Register the new Tech
    VjsButton.registerTech('Tech', MyTech);
    var player = videojs('myplayer', {
      techOrder: ['myTech', 'html5']
    });

Remove a CSS class name from an element

Apply attributes to an HTML element.

Adds or removes a CSS class name on an element depending on an optional condition or the presence/absence of the class name.

Trigger an event for an element

Doubles as the main function for users to create a player instance and also the main library object. The videojs function can be used to initialize or retrieve a player.

    var myPlayer = videojs('my_video_id');

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
      }
    });

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

Dispose of the component and all child components

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.

Returns a child component with the provided name

Returns a child component with the provided ID

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.

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();

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

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 the ready listeners

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.