jQuery: creare una compilation audio e video HTML5

Gli elementi video ed audio HTML5 sono certamente una grande caratteristica di questo standard. Vediamo insieme come creare una compilation utilizzando jQuery.

Ciascun elemento video o audio ha un evento nativo chiamato ended. Questo evento si innesca quando un video o un file audio termina la sua esecuzione.

Possiamo quindi utilizzare un array di elementi media ed un indice incrementale per creare la nostra compilation:

(function($) {
    
    $.preloadCompilation = function(type, files) {
    	var len = files.length,
    	    i;
    	for(i = 0; i < len; i++) {
    		var element = document.createElement(type);
    		var src = files[i];
    		element.src = src;
    	}
    };
	
	$.fn.compilation = function(options) {
		var settings = {
			files: [],
			media: '#video'
		};
		options = $.extend(settings, options);
		
		var mediaIndex = -1;
		
		var play = function(media) {
			mediaIndex++;
			if(mediaIndex == options.files.length) {
				mediaIndex = 0;
			}
			media.src = options.files[mediaIndex];
			media.play();
		};
		
		return this.each(function() {
			var $element = $(this);
			var media = $(options.media, $element)[0];
			play(media);
			$(media).on('ended', function() {
				play(media);
			});
		});
	};
	
})(jQuery);

Ecco un esempio che fa uso dei Deferred Objects per il preload dei file:

$(function() {
  var files = ['Banded_Lapwing.ogg', 'Cotton_Pygmy-Goose.ogg', 'White-browed_Treecreeper.ogg'];
  
  $.when($.preloadCompilation('video', files)).done(function() { 
	$('#playlist').compilation({
		files: files
	});
  });
  
});