Brightcove Video

jQuery Plugin

Helps you to create custom dynamic solutions that work with the Brightcove Video Platform.

The Smart Player technology detects whether the device supports Flash or HTML5 and then loads the video in Flash or HTML5 mode (for Apple iOS and Android OS devices) without any custom work or additional JavaScript on your part.

It handles player events, including events triggered by viewer actions like play or pause. You can capture these events using simple event listeners.

You can also add an overlay positioned directly on top of the video element with your custom HTML content.

Features

• Custom video players
• Mobile devices support (iOS and Android)
• Custom HTML overlay
• Handling events triggered by users

Initialization & Usage

The video object is created from an HTML element container (for example a DIV element). When the video object is ready, the TEMPLATE_READY event is triggered. So to execute the desired action, bind a function to the templateReadyHandler.

EXAMPLE.html

// Initialize the jQuery Brightcove Video plugin
$( "#player" ).brightcoveVideo({
    "playerID": "1925363807001",
    "@videoPlayer": "1754276221001",
    "templateReadyHandler": onTemplateReady
});

// On TEMPLATE_READY (The player is ready for interaction through API)
function onTemplateReady( event ) {
    var $player = $( this );

    // On PLAY (The player has begun or resumed playback)
    $player.brightcoveVideo( "onMediaEvent", "PLAY", function(event) {
        alert( "Play" );

        // Pause after 3 seconds
        setTimeout( function() {
            $player.brightcoveVideo( "pause" );
            alert( "Pause after 3 seconds" );
        }, 3000 );
    } );

    // Append an image on top of the player, fading out on click
    $player.brightcoveVideo( "overlay", "<img src='http://goo.gl/hR0kK'>" )
        .on( "click", function() { $(this).fadeOut() } );
}

Requirements

The plugin requires

• jQuery 1.6+

Licensing

Copyright © 2013 Carmine Olivo

Licensed under the MIT license.