What its $media

$media is a jQuery based library to manage audio and video html5 elements. You can manage the properties, events and methods in an easy way.

Execute basic functions

With $media you can execute basic functions like play, pause, seek, change volume, etc, detect if the browser can play the video or audio, manage media fragments, load new sources, convert time values throught different formats, etc.

	var video = $.media('#my-video');

	video.play(); //Plays the video

	video.seek(3); //Goes to second 3
	video.seek(3.5); //Goes to second 3.5
	video.seek('00:03'); //Goes to second 3

	var time = video.time(); //Get the current time (in seconds)

	video.sources(['my-video.ogv', 'my-video.mp4']); //Change the videos

Manage events

It can manage all video/audio events: when the video plays or pauses, after the user seek or change volume, when the video is ready to play, etc.

	var video = $.media('#my-video');

	//Bind an event
	video.play(function () {
		alert('You have clicked the play button');
	});

	//Bind an event once (like jQuery function "one")
	video.play(function () {
		alert('This is the first time you click play button');
	}, true);

Execute code in the video timeline

$.media provide a complete timeline where you can place functions in time points or time ranges. For example, you can execute a function when user plays the point (for example) '00:43:00', or between the points '00:43:00' and '00:43:23'. The timeline is divided in channels, so you can enable or disable channels to execute some functions and others don't.

	var video = $.media('#my-video');

	//Create a new channel
	var myChannel = video.createChannel('myChannel');
	
	//Add one function to this channel (pause on second 45)
	myChannel.addPoint('00:45', function () {
		this.pause();
	});

	//Enable channel
	myChannel.enable();

$.media is extensible

$.media is extensible with plugins easily (like jquery). For example, plugins to show subtitles, to manage fragments or to synchronize differents videos and audios

	var video = $.media('#my-video');
	
	//Create a new plugin
	video.extend('goto10', function () {
		this.seek(10);
	});

	//Use the plugin
	video.goto10(); //Goes to second 10

Issues and collaborations?

You can send us issues in the github issues page. We are also available in the email idc@anavallasuiza.com for anything you want to tell us.