Documentation

Methods

play pause stop setSize videoId videoElement on seekTo duration playbackTime videoWidth videoHeight

Events

start play pause end stop seek metadata timeUpdate

See also Using the JavaScript API, Application API and Lightbox API.

Methods

These API methods are to be called on a player object, which you can retrieve in the following way

var player = sublime.player(elementOrId);

which is equivalent to

var player = sublime(elementOrId);

player.play()

Plays the video. If the video is already playing, the call has no effect.

Note: on touch devices user interaction is required to start playing the video.

player.pause()

Pauses the video. If the video is already paused, the call has no effect.

player.stop()

Stops the video and shows the initial play button. If the video is already stopped, the call has no effect.

player.videoId() ⇒ String

Returns the id of the DOM <video> element, or undefined if the video has no id.

player.videoElement() ⇒ Element

Returns the DOM <video> element.

player.setSize(width, [height])

• width (Number) – An integer representing the number of pixels. Set it to null if you want to modify only the height of the video.
• height (Number) – An integer representing the number of pixels. Set it to null (or omit this parameter) if you want to modify only the width of the video. Default is null.

Use this method to resize the width and/or height of a video (this works on any browser and device).

If you want to scale the video proportionally, you need to compute the new size and then set both the width and height parameters.

This method has no effect if the player is in fullmode (fullscreen or fullwindow).

Fluid width and responsive layouts
If you want to integrate SublimeVideo in your fluid width or responsive layout, you can simply take advantage of the autoresize player setting.

player.on(eventOrHash, [callback])

• eventOrHash (String | Object) – A string representing the event name to listen, or an object where its keys are events and its values are callbacks.

• callback (Function) – The function to call when the event occurs. Pass this parameter only if the first one is an event (String).

Registers and invokes the given callbacks every time that the corresponding events occur.

Example – listening a single event

sublime.player('my_player_id').on('start', function(player) {
  console.log('playback started.');
});

Example – listening more events

sublime.player('my_player_id').on({
  start: function(player) { console.log('playback started.') },
  end:   function(player) { console.log('playback ended.') }
});

player.seekTo(time)

• time (Number) – The time in seconds to seek to.

Seeks to the specified playback time.

Note: if the player is using Flash to decode the video, seeking can be inaccurate because Flash is only able to seek to some specific frames called keyframes. The more keyframes the video has, the more precise the seek feature will be. You can specify the number of keyframes during the encoding phase, however adding many keyframes may significantly increase the size of your videos.

player.duration() ⇒ Number

Returns the video duration in seconds. The duration is available only once the video metadata has been loaded, hence calling this method before obtaining the metadata will return undefined.

Example – retrieving video duration

sublime.player('my_player_id').on('metadata', function(player) {
  console.log(player.duration());
});

player.playbackTime() ⇒ Number

Returns the current playback time in seconds. This method will return 0 if the video has not been started yet.

player.videoWidth() ⇒ Number

Returns the video width for the current quality. The video resolution is available only once the metadata has been loaded, hence calling this method before obtaining the metadata will return undefined.

Note: With YouTube videos this value is just an estimation, since it’s not possible to obtain the real value via their API.

Example – retrieving video width

sublime.player('my_player_id').on('metadata', function(player) {
  console.log(player.videoWidth());
});

player.videoHeight() ⇒ Number

Returns the video height for the current quality. The video resolution is available only once the metadata has been loaded, hence calling this method before obtaining the metadata will return undefined.

Note: With YouTube videos this value is just an estimation, since it’s not possible to obtain the real value via their API.

Example – retrieving video height

sublime.player('my_player_id').on('metadata', function(player) {
  console.log(player.videoHeight());
});

Events

Below are all the events supported by the player. You may listen to these events via the player.on method.

start

Fired when the video is started (either by clicking on the initial play button or by calling the player.play method). This event is not fired every time the video is resumed after pause, but just the first time the video is started.

Callback parameters

• player (Object) – The player API object.

play

Fired when the video is started and everytime the video is resumed after pause. The first play event is always preceded by a start event, otherwise it will always be preceded by a pause event.

Callback parameters

• player (Object) – The player API object.

pause

Fired when the playback pauses.

Callback parameters

• player (Object) – The player API object.

end

Fired when the playback ends. This event is always preceded by a pause event.

Callback parameters

• player (Object) – The player API object.

stop

Fired when the playback stops.

Callback parameters

• player (Object) – The player API object.

seek

Fired when a seek action is completed.

Callback parameters

• player (Object) – The player API object.

metadata

Fired as soon as the video metadata is loaded.

Callback parameters

• player (Object) – The player API object.

timeUpdate

Fired everytime the playback time changes.

Callback parameters

• player (Object) – The player API object.

• playbackTime (Number) – The current playback time.