play-resources.js & Play button
This commit is contained in:
parent
86ec0178ba
commit
258087e82f
|
@ -0,0 +1,123 @@
|
||||||
|
function addButton(container, res) {
|
||||||
|
var button = $('<a class="play">▶ Play</a>');
|
||||||
|
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&autostart=1&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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* 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') };
|
||||||
|
|
||||||
|
/* 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 = $('<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';
|
||||||
|
}
|
|
@ -765,3 +765,8 @@ a.flattr:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.play {
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
|
@ -54,6 +54,11 @@
|
||||||
<xsl:text>
|
<xsl:text>
|
||||||
</xsl:text>
|
</xsl:text>
|
||||||
</script>
|
</script>
|
||||||
|
<script src="{$baseurl}script/play-resources.js"
|
||||||
|
type="text/javascript" defer="defer">
|
||||||
|
<xsl:text>
|
||||||
|
</xsl:text>
|
||||||
|
</script>
|
||||||
|
|
||||||
</xsl:template>
|
</xsl:template>
|
||||||
|
|
||||||
|
|
|
@ -374,8 +374,6 @@
|
||||||
<xsl:call-template name="resource-item"/>
|
<xsl:call-template name="resource-item"/>
|
||||||
|
|
||||||
<xsl:apply-templates select="alternative" mode="resources-in-news"/>
|
<xsl:apply-templates select="alternative" mode="resources-in-news"/>
|
||||||
|
|
||||||
<xsl:call-template name="insert-player"/>
|
|
||||||
</xsl:template>
|
</xsl:template>
|
||||||
|
|
||||||
<xsl:template match="resource/alternative" mode="resources-in-news">
|
<xsl:template match="resource/alternative" mode="resources-in-news">
|
||||||
|
@ -392,7 +390,8 @@
|
||||||
</xsl:call-template>
|
</xsl:call-template>
|
||||||
</xsl:variable>
|
</xsl:variable>
|
||||||
|
|
||||||
<li>
|
<!-- @class = "resource" | "alternative" -->
|
||||||
|
<li class="{name(.)}">
|
||||||
<!-- MIME-Type ist nützlich z.B. für ftp:// URLs -->
|
<!-- MIME-Type ist nützlich z.B. für ftp:// URLs -->
|
||||||
<a href="{$href}" type="{@type}" class="mime" rel="enclosure">
|
<a href="{$href}" type="{@type}" class="mime" rel="enclosure">
|
||||||
<xsl:choose>
|
<xsl:choose>
|
||||||
|
@ -409,29 +408,4 @@
|
||||||
</li>
|
</li>
|
||||||
</xsl:template>
|
</xsl:template>
|
||||||
|
|
||||||
<xsl:template name="insert-player">
|
|
||||||
<xsl:if test="@type='audio/mpeg' or @type='application/ogg' or
|
|
||||||
count(resource[@type='audio/mpeg' or @type='application/ogg']) > 0">
|
|
||||||
<li>
|
|
||||||
<audio preload="none" controls="controls">
|
|
||||||
<source src="{@url}" type="{@type}"/>
|
|
||||||
<xsl:for-each select="alternative">
|
|
||||||
<source src="{@url}" type="{@type}"/>
|
|
||||||
</xsl:for-each>
|
|
||||||
</audio>
|
|
||||||
</li>
|
|
||||||
</xsl:if>
|
|
||||||
<xsl:if test="@type='video/webm' or @type='video/ogg' or @type='video/mp4' or
|
|
||||||
count(resource[@type='video/webm' or @type='video/ogg' or @type='video/mp4']) > 0">
|
|
||||||
<li>
|
|
||||||
<video preload="none" controls="controls">
|
|
||||||
<source src="{@url}" type="{@type}"/>
|
|
||||||
<xsl:for-each select="alternative">
|
|
||||||
<source src="{@url}" type="{@type}"/>
|
|
||||||
</xsl:for-each>
|
|
||||||
</video>
|
|
||||||
</li>
|
|
||||||
</xsl:if>
|
|
||||||
</xsl:template>
|
|
||||||
|
|
||||||
</xsl:stylesheet>
|
</xsl:stylesheet>
|
||||||
|
|
Loading…
Reference in New Issue