c3d2-web/content/static/script/play-resources.js

function addButton(container, res) {
    var button = $('<a class="play" title="Play this"></a>');
    if (res.poster) {
	var img = $('<img class="poster"/>');
	img.attr('src', res.poster);
	if (res.preview) {
	    button.mouseover(function() {
		img.attr('src', res.preview);
	    });
	    button.mouseout(function() {
		img.attr('src', res.poster);
	    });
	}
	button.append(img);
    } else {
	/* No poster */
	button.text('▶ Play');
    }

    button.click(function() {
	button.remove();

	addPlayer(container, res);
    });
    container.append(button);
}

function addPlayer(container, res) {
    var types = res.map(function(res) {
			    return res.type;
			});
    /* Can we have <audio> or <video> please?
     *
     * Video must be prefered over audio because <audio> can play
     * videos too.
     */
    var html5player;
    if (types.some(canPlayVideo)) {
	html5player = $('<video controls="controls" autoplay="autoplay"></video>');
    } else if (types.some(canPlayAudio)) {
	html5player = $('<audio controls="controls" autoplay="autoplay"></audio>');
    }
    /* ...install sources */
    if (html5player) {
	res.forEach(function(r) {
	    var src = $('<source/>');
	    src.attr('src', r.href);
	    src.attr('type', r.type);
	    html5player.append(src);
	});
    }

    /* Anything else than HTML5? */
    var fallback;
    res.forEach(function(r) {
	if (fallback)  /* Got one already */
	    return;

	if (r.type === 'audio/mpeg') {
	    var movie = '/script/dewplayer-mini.swf?showtime=1&amp;autostart=1&amp;mp3=' + r.href;
	    fallback = $('<object type="application/x-shockwave-flash" width="150" height="20">' +
		'<param name="wmode" value="transparent"/>' +
		'<param name="allowScriptAccess" value="always"/>' +
		'<param name="movie"/>' +
		'</object>');
	    fallback.attr('data', movie);
	    fallback.find('param[name="movie"]').attr('value', movie);
	}
	/* FIXME:
	 * support video/x-flv
	 */
    });

    /* Add stuff to page */
    if (html5player) {
	if (fallback)
	    html5player.append(fallback);
	container.append(html5player);
    } else if (fallback) {
	container.append(fallback);
    } else {
	container.append('<p>Upps, das musst du wohl erstmal herunterladen</p>');
    }
}

$(document).ready(function() {
    /* Iterate over all resources in HTML output */
    $('.resource').each(function() {
	var resource = { href: $(this).find('a').attr('href'),
			 type: $(this).find('a').attr('type') };
	var poster = $(this).dataset('poster');
	var preview = $(this).dataset('preview');

	/* Get all associated alternatives */
	var alternativeEls = $(this).nextUntil('.resource');
	var alternatives = alternativeEls.find('a').
	    map(function() {
		    return { href: $(this).attr('href'),
			     type: $(this).attr('type') };
		}).
	    toArray();

	var res = [resource].concat(alternatives);
	if (poster)
	    res.poster = poster;
	if (preview)
	    res.preview = preview;

	/* Check playability */
	if (res.map(function(res) {
			return res.type;
		    }).some(canPlay)) {
	    var liEl = $('<li></li>');
	    alternativeEls.last().after(liEl);
	    var player = addButton(liEl, res);
	}
    });
});

function canPlay(type) {
    return canPlayAudio(type) ||
	canPlayVideo(type) ||
	canFallback(type);
}

/**
 * From http://diveintohtml5.org/everything.html
 */
function canPlayAudio(type) {
    var a = document.createElement('audio');
    return !!(a.canPlayType &&
	      a.canPlayType(type).replace(/no/, ''));
}

/**
 * Partially from http://diveintohtml5.org/everything.html
 *
 * But we don't want audio/* as <video>
 */
function canPlayVideo(type) {
    var v = document.createElement('video');
    return !!(v.canPlayType &&
	      v.canPlayType(type).replace(/no/, '') &&
	      !(/^audio\//.test(type)));
}

function canFallback(type) {
    return type === 'audio/mpeg';
    /* FIXME:
     * support video/x-flv
     */
}