jQuery plugin that offers an interface for controlling (play, pause and stop) some of the popular video players and providers, so that you don't have to deal with the particularities of each video API. The plugin is most useful when you have multiple types of videos.
At the moment, support was added for YouTube, Vimeo, HTML5, Video.js, Sublime Video and JW Player.
videoReady - triggered when the video is ready for interaction
videoStart - triggered the first time when a video starts playing
videoPlay - triggered whenever a video starts playing, whether it's the first time or after it was paused or stopped
videoPause - triggered when the video is paused
videoStop - triggered when the video is stopped. Usually, when a video is stopped it's actually paused and the playhead is moved to the beginning of the video
videoEnded - triggered when a video ends
Example 1:
<scripttype="text/javascript">
$(document).ready(function(){
$('#my-video').videoController({
videoReady:function(){console.log('ready');},
videoStart:function(){console.log('start');},
videoPlay:function(){console.log('play');},
videoPause:function(){console.log('pause');},
videoEnded:function(){console.log('ended');}
});
});
</script>
Example 2:
<scripttype="text/javascript">
$(document).ready(function(){
$('#my-video').videoController();
$('#my-video').on('videoPlay',function(event){
console.log('video with the ID '+event.video+' has started playing');
});
$('#my-video').on('videoEnded',function(event){
console.log('video has ended');
});
});
</script>
Preparing the videos
YouTube
The iframe embeds need to have the enablejsapi=1 parameter appended to the URL of the video.
Videos that use the Video.js library have their HTML markup modified. This creates some problems if we want to instantiate the plugin on the video element. The solution is to create a container element and add the video inside the container. To this container we'll add the data-videojs-id attribute in order to indicate the id attribute of the video element.
Please note that, in order to use Video.js, you need to load the Video.js JavaScript and CSS files in your page. More information about how to use Video.js, in general, can be found on the official Video.js page.
SublimeVideo
No preparation is required, other than setting up the videos as the Sublime Video documentation indicates.
Please note that, in order to use SublimeVideo, you will also need to load a script in your page which you need to download from the SublimeVideo page. More information about how to use SublimeVideo, in general, can be found on the official SublimeVideo page.
JW Player
Just like Video.js, JW Player videos modify the HTML markup and we need to use a container element to facilitate the integration with the Video Controller plugin. The container will have the data-jwplayer-id attribute which will indicate the id attribute of the video element.