Universal Player JS Interface « Back to Developer Page

The Universal Player uses HTML controls, which talk to the browser's media player (Flash, QuickTime, etc) via a Javascript bridge. By default, the Universal Player presents basic controls that are styled to fit into most webpages. You may, however, wish to customize the look and feel of the player by creating your own controls.

When you create a Universal Player with the no_controller parameter set, no HTML controls will be included and the Javascript interface will be exposed. This interface lets you manipulate the playback of the video regardless of the specific media player being used. You don't have to worry about the details of Flash or QuickTime plugins — the interface handles that for you.

A reference to each embedded Universal Player is stored in the SVPlayer Javascript array, keyed on the video's id. For example, SVPlayer['VIDEO ID'] would reference all Universal Players on the page that contain the video with id 'VIDEO ID'. Since most of the time you will only embed a video once on a page, you'd reference it using the first entry in the array: SVPlayer['VIDEO ID'][0]

Because the Universal Player is added to the page dynamically, you cannot rely on the existence of SVPlayer['VIDEO ID'][0] when the page loads. Fortunately, you can define a callback method to be called when it does become available, using SVPlayer.onload, like so:

  SVPlayer.onload('VIDEO ID', 0, function(player) {
    // 'player' is a reference to SVPlayer['VIDEO ID'][0]
  });

As a convenience, if you know you'll only be embedding the same video once on the page, you may leave out the the index (0, in the above example):

  SVPlayer.onload('VIDEO ID', function(player) {
    // 'player' is a reference to SVPlayer['VIDEO ID'][0]
  });

Interface Methods

The player object (e.g., SVPlayer['VIDEO ID'][0]) stores a collection of functions used to control the playback of the video. The following is a complete list:

• play()...................................... Play the video
• pause()...................................... Pause the video
• seek(t)...................................... Move video playhead to t seconds into the video
• drag(t)...................................... Move video playhead to t seconds into the video. Unlike seek, it pauses the video until drop() is called.
• drop(t)...................................... Resumes playback after using drag() to move the playhead.
• get_time()...................................... Get the current playhead position, in seconds
• get_duration()...................................... Get the total duration of the video, in seconds
• get_bytes_loaded()...................................... Get the number of bytes downloaded so far
• get_bytes_total()...................................... Get the total size of the video, in bytes
• get_volume()...................................... Get the current volume level
• set_volume(v)...................................... Set the volume level
• mute()...................................... Mute the video
• unmute()...................................... Unmute the video
• is_loaded()...................................... Returns true if the video is playable, false otherwise
• get_container()...................................... Returns the top-level container DIV for the player
• onend = [funct]...................................... A function to be called when playback reaches the end of the video.
• playing_callback = [funct]...................................... A function to be called continuously as the video is playing (for example, to update a playhead).

Example Code

For example, suppose you've embedded a video with id 'VIDEO ID' onto your page and you'd like to start playback from half-way into the video. You might do the following:

  var myPlayer = SVPlayer['VIDEO ID'][0];
  var duration = myPlayer.get_duration();
  myPlayer.seek(duration / 2);
  myPlayer.play();

Building Scrub Bars & Volume Sliders

The most difficult part of building good video player controls with HTML and Javascript is building sliders for scrubbing around and changing the volume. To combat this we rolled together a little JS called MakeDragSlider that lets you make sliders quickly and easily. The values from these sliders can be useful for passing values to the seek() or set_volume() functions.