Usage examples for the functions on videojs

Table of Contents

videojs()

  1. var myPlayer = videojs('my_video_id');

options

  1. videojs.options.autoplay = true
  2. // -> all players will autoplay by default

getComponent()

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

registerComponent()

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

getTech()

  1. var Html5 = videojs.getTech('Html5');
  2. // Create a new instance of the component
  3. var html5 = new Html5(options);

registerTech()

  1. // get the Html5 Tech
  2. var Html5 = videojs.getTech('Html5');
  3. var MyTech = videojs.extend(Html5, {});
  4. // Register the new Tech
  5. videojs.registerTech('MyTech', MyTech);
  6. var player = videojs('myplayer', {
  7.   techOrder: ['myTech', 'html5']
  8. });

extend()

  1. // Create a basic javascript 'class'
  2. function MyClass(name) {
  3.   // Set a property at initialization
  4.   this.myName = name;
  5. }
  6. // Create an instance method
  7. MyClass.prototype.sayMyName = function() {
  8.   alert(this.myName);
  9. };
  10. // Subclass the exisitng class and change the name
  11. // when initializing
  12. var MySubClass = videojs.extend(MyClass, {
  13.   constructor: function(name) {
  14.     // Call the super class constructor for the subclass
  15.     MyClass.call(this, name)
  16.   }
  17. });
  18. // Create an instance of the new sub class
  19. var myInstance = new MySubClass('John');
  20. myInstance.sayMyName(); // -> should alert "John"

mergeOptions()

  1. var defaultOptions = {
  2.   foo: true,
  3.   bar: {
  4.     a: true,
  5.     b: [1,2,3]
  6.   }
  7. };
  8. var newOptions = {
  9.   foo: false,
  10.   bar: {
  11.     b: [4,5,6]
  12.   }
  13. };
  14. var result = videojs.mergeOptions(defaultOptions, newOptions);
  15. // result.foo = false;
  16. // result.bar.a = true;
  17. // result.bar.b = [4,5,6];

bind()

  1. var someClass = function() {};
  2. var someObj = new someClass();
  3. videojs.bind(someObj, function() {
  4.   // this will be the context of someObj here
  5. });

registerPlugin()

See the plugin guide in the docs for a more detailed example

  1. // Make a plugin that alerts when the player plays
  2. videojs.registerPlugin('myPlugin', function(myPluginOptions) {
  3.   myPluginOptions = myPluginOptions || {};
  5.   var player = this;
  6.   var alertText = myPluginOptions.text || 'Player is playing!'
  8.   player.on('play', function() {
  9.     alert(alertText);
  10.   });
  11. });
  12. // USAGE EXAMPLES
  13. // EXAMPLE 1: New player with plugin options, call plugin immediately
  14. var player1 = videojs('idOne', {
  15.   myPlugin: {
  16.     text: 'Custom text!'
  17.   }
  18. });
  19. // Click play
  20. // --> Should alert 'Custom text!'
  21. // EXAMPLE 3: New player, initialize plugin later
  22. var player3 = videojs('idThree');
  23. // Click play
  24. // --> NO ALERT
  25. // Click pause
  26. // Initialize plugin using the plugin function on the player instance
  27. player3.myPlugin({
  28.   text: 'Plugin added later!'
  29. });
  30. // Click play
  31. // --> Should alert 'Plugin added later!'

xhr()

  1. videojs.xhr({
  2.   body: someJSONString,
  3.   uri: "/foo",
  4.   headers: {
  5.     "Content-Type": "application/json"
  6.   }
  7. }, function (err, resp, body) {
  8.   // check resp.statusCode
  9. });