function addButton(container, res) { var button = $(''); if (res.poster) { var img = $(''); 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 or please? * * Video must be prefered over audio because can play * videos too. */ var html5player; if (types.some(canPlayVideo)) { html5player = $(''); } else if (types.some(canPlayAudio)) { html5player = $(''); } /* ...install sources */ if (html5player) { res.forEach(function(r) { var src = $(''); 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&autostart=1&mp3=' + r.href; fallback = $('' + '' + '' + '' + ''); 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('Upps, das musst du wohl erstmal herunterladen'); } } $(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 = $(''); 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 */ 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 */ }
Upps, das musst du wohl erstmal herunterladen