video-controller

v1.4.0

Published

2 years ago

Offers an interface for controlling some of the popular video players and providers, so that you don't have to deal with the particularities of each video API.

Downloads

0High
0Medium
0Low

bqworks

video-controller video api youtube vimeo video.js sublimevideo jwplayer

Video Controller

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.

Getting started

Load the scripts:

<script type="text/javascript" src="/path/to/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.videoController.min.js"></script>

Load the video(s):

<body>
	<iframe id="my-video" src="http://www.youtube.com/embed/oaDkph9yQBs?enablejsapi=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</body>

Instantiate the plugin:

<script type="text/javascript">
	$(document).ready(function() {
		$('#my-video').videoController();
	});
</script>

Usage

Once the plugin is instantiated, you can use the API provided by the plugin for playing or pausing videos, as well as listening for events.

Methods

The available public methods are:

play - plays the video
pause - pauses the video
stop - stops the video
replay - replays the video

Example:

<script type="text/javascript">
	$(document).ready(function() {
		$('#my-video').videoController();
	});

	function playVideo() {
		$('#my-video').videoController('play');
	}

	function pauseVideo() {
		$('#my-video').videoController('pause');
	}

	function stopVideo() {
		$('#my-video').videoController('stop');
	}
</script>
</head>

<body>
	<iframe id="my-video" src="http://www.youtube.com/embed/oaDkph9yQBs?enablejsapi=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>
				
	<div class="controls">
	    <a href="#" onclick="playVideo();">Play</a>
	    <a href="#" onclick="pauseVideo();">Pause</a>
	    <a href="#" onclick="stopVideo();">Stop</a>
	</div>
</body>

Events

The available events are:

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:

<script type="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:

<script type="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.

<iframe id="my-video" src="http://www.youtube.com/embed/msIjWthwWwI?enablejsapi=1" width="500" height="350" frameborder="0" allowfullscreen></iframe>

Vimeo

The iframe embeds need to have the api=1 parameter appended to the URL of the video.

<iframe id="my-video" src="http://player.vimeo.com/video/43401199?api=1" width="500" height="350" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

HTML5

Simple HTML5 videos don't need any preparation.

<video id="my-video" poster="path/to/poster.jpg" width="500" height="350" controls="controls" preload="none">
	<source src="path/to/video.mp4" type="video/mp4"/>
	<source src="path/to/video.ogv" type="video/ogg"/>
</video>

Video.js

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.

<div id="video-container" data-videojs-id="my-video">
	<video id="my-video" class="video-js vjs-default-skin" poster="path/to/poster.jpg" width="500" height="350" controls="controls" preload="none" 
			data-setup="{}">
		<source src="path/to/video.mp4" type="video/mp4"/>
		<source src="path/to/video.ogv" type="video/ogg"/>
	</video>
</div>

$(document).ready(function() {
	$('#video-container').videoController();
});

If you prefer to not use a container, you will need to instantiate the plugin after the video was set up.

<video id="my-video" class="video-js vjs-default-skin" poster="path/to/poster.jpg" width="500" height="350" controls="controls" preload="none" 
		data-setup="{}">
	<source src="path/to/video.mp4" type="video/mp4"/>
	<source src="path/to/video.ogv" type="video/ogg"/>
</video>

$(document).ready(function() {
	videojs('my-video').ready(function() {
		$('#video-container').videoController();
	});
});

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.

<video id="my-video" class="sublime" poster="path/to/poster.jpg" width="500" height="350" controls="controls" preload="none">
	<source src="path/to/video.mp4" type="video/mp4"/>
	<source src="path/to/video.ogv" type="video/ogg"/>
</video>

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.

<div id="video-container" data-jwplayer-id="my-video">
	<div id="my-video">Loading the video...</div>
</div>

$(document).ready(function() {
    jwplayer("my-video").setup({
        file: "http://bqworks.com/products/assets/videos/bbb/bbb-trailer.mp4",
        image: "http://bqworks.com/products/assets/videos/bbb/bbb-poster.jpg",
        width: 500,
        height: 350
    });


	$('#video-container').videoController();
});

It's also possible to not use a container element, but in that case the plugin needs to be instantiated after the video was set up.

<div id="my-video">Loading the video...</div>

var video;

$(document).ready(function() {
    jwplayer("my-video").setup({
        file: "http://bqworks.com/products/assets/videos/bbb/bbb-trailer.mp4",
        image: "http://bqworks.com/products/assets/videos/bbb/bbb-poster.jpg",
        width: 500,
        height: 350,
        events: {
        	onReady: function() {
        		// if the flash player is used, the set ID will be attributed to an object element. 
        		// However, we can't instantiate the plugin on an object element, 
        		// so we instantiate it on the object's wrapper instead
        		video = $('#my-video').is('object') ? $('#my-video').parent() : $('#my-video');
        		video.videoController();
        	}
        }
    });
});

License

The plugin is available under the MIT license.