Smart jQuery Brightcove Video Plugin

File Size: 6.94KB
Views Total: 5399
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Smart jQuery Brightcove Video Plugin

A smart jQuery plugin helps you create custom dynamic solutions that work with the Brightcove Video platform. It auto detects whether the device supports Flash or HTML5 and then loads the video in flash or HTML5 mode. 

  • Mobile devices support (iOS and Android).
  • You can add an overlay positioned directly on top of the video element with your custom HTML content.
  • Player events handling triggered by visitors supported.

You might also like:

How to use it:

1. Include jQuery library and jquery.brightcove-video.js on your web page

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="jquery.brightcove-video.js"></script>

2. Markup

<div class="player" style="height:400px; width:300px;"></div>

3. The javascript

<script>
$( function() {

// 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() } );
}
} );
</script>

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.