diff --git a/content/static/script/play-resources.js b/content/static/script/play-resources.js new file mode 100644 index 000000000..94224ac25 --- /dev/null +++ b/content/static/script/play-resources.js @@ -0,0 +1,123 @@ +function addButton(container, res) { + var button = $('▶ 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); + } + }); + + /* 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') }; + + /* 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); + + /* 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'; +} diff --git a/content/static/style/default.css b/content/static/style/default.css index 63c04e554..0eb7bd8bd 100644 --- a/content/static/style/default.css +++ b/content/static/style/default.css @@ -765,3 +765,8 @@ a.flattr:hover { text-decoration: none; border-bottom: none; } + +.play { + cursor: pointer; + font-weight: bold; +} diff --git a/xsl/header.xsl b/xsl/header.xsl index 144db8706..c5763eb24 100644 --- a/xsl/header.xsl +++ b/xsl/header.xsl @@ -54,6 +54,11 @@ + diff --git a/xsl/xhtml5.xsl b/xsl/xhtml5.xsl index b394f7c45..b3c35efc4 100644 --- a/xsl/xhtml5.xsl +++ b/xsl/xhtml5.xsl @@ -374,8 +374,6 @@ - - @@ -392,7 +390,8 @@ - + + @@ -409,29 +408,4 @@ - - - - - - - - - - - - - - - - - - - - - - -
Upps, das musst du wohl erstmal herunterladen