SublimeVideo

JavaScript API Listeners

onEnd onStart ready

See also Using the JavaScript API and Methods.

Note on using listeners

Always write your listeners inside the sublimevideo.ready callback in order to be sure the sublimevideo API object is actually available.

sublimevideo.onEnd(handler)

• handler (Function) – The function to call when the event occurs.

Use this method to be notified when playback has reached the end of the video.

The Handler

function handler(videoObject){
  // Code to execute once a video ends!
});

videoObject is the video that generated the event (“ended” in this case) and it has the following properties:

• element: a reference to the <video> DOM element
• mode: either html5 or flash

Example

sublimevideo.ready(function(){
  sublimevideo.onEnd(function(sv){
    alert("Video has ended!");
  });
});

You can use this listener to restore the video to its initial state (that shows the poster frame and the play button) automatically when the video ends.
See Returning to the initial state once video playback ends for further instructions.

sublimevideo.onStart(handler)

• handler (Function) – The function to call when the event occurs.

Use this method to be notified when a video is started.
Please note this is not called every time the video starts playing after a pause event (it’s called once when the user clicks on the initial play button).

The Handler

function handler(videoObject){
  // Code to execute once a video starts!
});

videoObject is the video that generated the event (“started” in this case) and it has the following properties:

• element: a reference to the <video> DOM element
• mode: either html5 or flash

Examples

sublimevideo.ready(function(){
  sublimevideo.onStart(function(sv){
    alert("Video has started!");
  });
});

You can see a real example on our demo page where we use sublimevideo.onStart to update the label showing the current mode of the player (HTML5 or Flash). We only do this for the first video in the demo, but there are different videos on that page. In order to target the first video we use the videoObject parameter passed to the handler function.

Here is the code we use in the demo page to detect when the <video> with the single_video id has started:

sublimevideo.ready(function(){
  sublimevideo.onStart(function(sv){
    if (sv.element.id == "single_video"){
      //...
    }
  });
});

sublimevideo.ready(handler)

• handler (Function) – The function to call when the event occurs.

The sublimevideo API object might not be immediately available when the DOM is loaded.

You should avoid making calls to the SublimeVideo JavaScript API in your own DOM loaded/ready method (e.g. DOMContentLoaded, jQuery’s .ready() or Prototype’s dom:loaded) unless you are sure those calls will not be executed immediately, but only upon a future user action (so that, by that time, we’ll be sure the sublimevideo API object has been loaded).

Use sublimevideo.ready to be notified when the sublimevideo API object is actually available or if you want to make calls to our JavaScript API as soon as possible after the page is loaded.

The Handler

function handler(){
  // Code to execute once the SublimeVideo JS API is ready!
});

Example

sublimevideo.ready(function(){
  alert("SublimeVideo API is ready!");
});