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); } else if (r.type === 'video/x-flv') { /* Create unique id for multiple containers on one page */ var containerId = 'flowplayer' + Math.round(Math.random() * 9999); fallback = $('Moment bitte'); fallback.attr('id', containerId); /* Defer loading because fallback needs to be appended first, and we want that .js on demand anyway */ window.setTimeout(function() { loadFlowplayer(function() { fallback.text(''); flowplayer(containerId, { src: '/script/flowplayer-3.2.5.swf' }, { clip: r.href }); }); }, 1); } }); /* 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(r) { return r.type; }).some(canPlay)) { var liEl = $(''); $(this).before(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' || type === 'video/x-flv'; } function loadFlowplayer(cb) { if (window.flowplayer) cb(); else { var playerScript = $(''); $(document).append(playerScript); /* Cannot use load event because it won't work if when cached */ var interval = window.setInterval(function() { if (window.flowplayer) { window.clearInterval(interval); cb(); } }, 100); } }
Upps, das musst du wohl erstmal herunterladen