datenspuren mitschnitte: play-resources.js
This commit is contained in:
parent
ca878e066e
commit
863acb238f
49
content/static/datenspuren/2011/script/play-resources.js
Normal file
49
content/static/datenspuren/2011/script/play-resources.js
Normal file
|
@ -0,0 +1,49 @@
|
||||||
|
/**
|
||||||
|
* 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)));
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
/* Iterate over all resources in HTML output */
|
||||||
|
$('.resource').each(function() {
|
||||||
|
var that = $(this);
|
||||||
|
var preview = that.data('preview');
|
||||||
|
var sources = [];
|
||||||
|
that.find('a').each(function() {
|
||||||
|
var a = $(this);
|
||||||
|
sources.push({ href: a.attr('href'), type: a.attr('type') });
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/* Check playability */
|
||||||
|
if (sources.map(function(r) {
|
||||||
|
return r.type;
|
||||||
|
}).some(canPlayVideo)) {
|
||||||
|
var img = that.find('img');
|
||||||
|
var poster = img.attr('src');
|
||||||
|
img.mouseover(function() {
|
||||||
|
img.attr('src', preview);
|
||||||
|
});
|
||||||
|
img.mouseout(function() {
|
||||||
|
img.attr('src', poster);
|
||||||
|
});
|
||||||
|
img.click(function() {
|
||||||
|
var video = $('<video controls="controls" autoplay="autoplay"></video>');
|
||||||
|
sources.forEach(function(source) {
|
||||||
|
var src = $('<source></source>');
|
||||||
|
src.attr('src', source.href);
|
||||||
|
src.attr('type', source.type);
|
||||||
|
video.append(src);
|
||||||
|
});
|
||||||
|
img.replaceWith(video);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
|
@ -276,7 +276,7 @@ dl dd {
|
||||||
.resource {
|
.resource {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: auto 2px 0;
|
margin: auto 2px 0;
|
||||||
width: 380px;
|
width: 390px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -172,6 +172,9 @@
|
||||||
<script type="application/javascript" src="script/jquery-1.6.4.min.js" defer="defer">
|
<script type="application/javascript" src="script/jquery-1.6.4.min.js" defer="defer">
|
||||||
<xsl:text> </xsl:text>
|
<xsl:text> </xsl:text>
|
||||||
</script>
|
</script>
|
||||||
|
<script type="application/javascript" src="script/play-resources.js" defer="defer">
|
||||||
|
<xsl:text> </xsl:text>
|
||||||
|
</script>
|
||||||
<script type="application/javascript" src="script/clouds.js" defer="defer">
|
<script type="application/javascript" src="script/clouds.js" defer="defer">
|
||||||
<xsl:text> </xsl:text>
|
<xsl:text> </xsl:text>
|
||||||
</script>
|
</script>
|
||||||
|
@ -304,9 +307,14 @@
|
||||||
|
|
||||||
<xsl:template match="resource">
|
<xsl:template match="resource">
|
||||||
<section class="resource">
|
<section class="resource">
|
||||||
|
<xsl:if test="@preview">
|
||||||
|
<xsl:attribute name="data-preview">
|
||||||
|
<xsl:value-of select="@preview"/>
|
||||||
|
</xsl:attribute>
|
||||||
|
</xsl:if>
|
||||||
<h4><xsl:value-of select="@title"/></h4>
|
<h4><xsl:value-of select="@title"/></h4>
|
||||||
<xsl:if test="@poster">
|
<xsl:if test="@poster">
|
||||||
<img src="{@poster}" title="@title"/>
|
<img src="{@poster}" title="{@title}"/>
|
||||||
</xsl:if>
|
</xsl:if>
|
||||||
<ul>
|
<ul>
|
||||||
<li><xsl:call-template name="link-resource"/></li>
|
<li><xsl:call-template name="link-resource"/></li>
|
||||||
|
@ -317,7 +325,7 @@
|
||||||
</section>
|
</section>
|
||||||
</xsl:template>
|
</xsl:template>
|
||||||
<xsl:template name="link-resource">
|
<xsl:template name="link-resource">
|
||||||
<a href="{@url}">
|
<a href="{@url}" type="{@type}">
|
||||||
<xsl:choose>
|
<xsl:choose>
|
||||||
<xsl:when test="@type='video/mp4'">MP4</xsl:when>
|
<xsl:when test="@type='video/mp4'">MP4</xsl:when>
|
||||||
<xsl:when test="@type='video/webm'">WebM</xsl:when>
|
<xsl:when test="@type='video/webm'">WebM</xsl:when>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user