SublimeVideo

JavaScript API Methods

load pause play prepare prepareAndPlay resize stop unprepare

See also Using the JavaScript API and Listeners.

sublimevideo.load()

SublimeVideo Player and the sublimevideo API object are automatically loaded on page load if there is at least one <video> element in the DOM. If you have no videos initially on the page (and you plan for instance to add them dynamically later with JavaScript) you can use this method to force loading the player and the sublimevideo API object.

sublimevideo.pause()

Pauses the currently playing video.

sublimevideo.play([video])

• video (DOM Element | String) – The <video> DOM element to play, or its id. Set it to null (or omit this parameter) if you want to resume playback of a paused video. Default is null.

video must refer to a “prepared” video (if your video is not prepared, you might want to use sublimevideo.prepareAndPlay instead).
If video is not null and a video is currently playing, the playing video is stopped before video’s playback starts.

This method also works with zoomable videos.

Example

• Loop a video

sublimevideo.prepare(video)

• video (DOM Element | String) – The <video> DOM element to prepare, or its id.

Sometimes you don’t want SublimeVideo to be setup on page load because you might have some <video> elements hidden in the page that you want to show on demand using JavaScript. In this case, when you initially build your <video> element (in HTML or JavaScript) you don’t have to add the “sublime” class to it. When you are ready to show the video you then call this method by passing the <video> element (or its id) as an argument.

sublimevideo.prepareAndPlay(video)

• video (DOM Element | String) – The <video> DOM element to prepare and play, or its id.

This method has a similar goal to the sublimevideo.prepare method, but it will immediately start playing the video after performing the necessary preparation.

Preventing UI flickering
We recommend using sublimevideo.prepareAndPlay instead of calling the sublimevideo.prepare and sublimevideo.play methods separately in succession, because by using sublimevideo.prepareAndPlay the initial play button (the one covering the video) will never show up, resulting in less UI flickering.

This method also works with zoomable videos.

Side Notes
You cannot pass multiple videos as arguments to this method, as simultaneous playback of multiple videos is currently not supported. There is an actual advantage to this apparent limitation: if you have multiple “sublime” videos on one page and a video is already playing, you can hit the play button on another video without having to stop the previous one, SublimeVideo takes care of this (as in most cases you don’t want two videos – potentially with completely different audio tracks – to play at the same time).

Examples

• Customizing the initial play button
• Autoplay video upon page load

sublimevideo.resize(video, width, [height])

• video (DOM Element | String) – The <video> DOM element to resize, or its id.
• 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.

Fluid width and responsive layouts
You can use this method to make your videos scale along with your Fluid Width layout. In order to do this you have to listen to the browser’s window resize event, and then call this method when the event is fired. Please read this article for more details.

Example

• Resize API method test page

sublimevideo.stop()

Stops the currently started (playing or paused) video and shows the initial play button.

Example

• Returning to the initial state once video playback ends

sublimevideo.unprepare([video])

• video (DOM Element | String) – The <video> DOM element to unprepare, or its id. Set it to null (or omit this parameter) if you want all <video> elements in the page to be unprepared. Default is null.

This method undoes all modifications done by the sublimevideo.prepare method. You basically call it when you want to “unload” the SublimeVideo player from the specified videos.
A typical scenario where this might be useful is if you have a video on your page and you want another video (which either already exists hidden in the page or a new one loaded from JavaScript) to take up the same area where the initial video was displayed. Before hiding or removing that previous video you need to properly unload SublimeVideo from it by calling the sublimevideo.unprepare method.
Since in most cases you use this method when you’re done with the video and you want to hide (or remove) it from the DOM, the method will actually do it for you: once sublimevideo.unprepare is executed, your <video> element(s) will end up hidden.

This method also works with zoomable videos.