The SproutVideo Javascript Player API provides a way to both receive events and control the SproutVideo Player. You can see an example below or checkout the documentation here.



Count Data
Ready Event 0
Play Event 0
Pause Event 0
Loading Event 0
Progress Event 0
Completed Event 0
Volume Event 0
RateChange Event 0
$(document).ready(function(){
    // create a new SV.Player instance for the video.
    // videoID: the id of the video from which you want to receive events and control.
    var player = new SV.Player({videoId: '709adcb31f19e5c6f8'});
    
    //Bind events for the buttons.
    $('#play').bind('click', function(e){
        player.play();
    });
    $('#pause').bind('click', function(e){
        player.pause();
    });
    $('#seek').bind('click', function(e){
        player.seek(50);
    });
    $('#currentTime').bind('click', function(e){
        alert(player.getCurrentTime());
    });
    $('#setVolume').bind('click', function(e){
        player.setVolume(0.5);
    });
    $('#getVolume').bind('click', function(e){
        alert(player.getVolume());
    });
    $('#loaded').bind('click', function(e){
        alert(player.getPercentLoaded());
    });
    $('#duration').bind('click', function(e){
        alert(player.getDuration());
    });
    $('#email').bind('click', function(e){
        alert(player.getEmail());
    });
    $('#setPlaybackRate').bind('click', function(e){
        player.setPlaybackRate(0.5);
    });
    $('#getPlaybackRate').bind('click', function(e){
        alert(player.getPlaybackRate());
    });

    // Available events
    var events = ['ready', 'play', 'pause', 'loading', 'progress', 'completed', 'volume', 'rateChange'];

    // Bind all events
    for (var i = 0; i < events.length; i++) {
        player.bind(events[i], function(e) {
            var count = parseInt($('#' + e.type + '_count').text());
            $('#' + e.type + '_count').html(count + 1);
            $('#' + e.type + '_data').html(JSON.stringify(e.data));
        });
    }
});