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 {
|
||||
display: inline-block;
|
||||
margin: auto 2px 0;
|
||||
width: 380px;
|
||||
width: 390px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
|
@ -172,6 +172,9 @@
|
|||
<script type="application/javascript" src="script/jquery-1.6.4.min.js" defer="defer">
|
||||
<xsl:text> </xsl:text>
|
||||
</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">
|
||||
<xsl:text> </xsl:text>
|
||||
</script>
|
||||
|
@ -304,9 +307,14 @@
|
|||
|
||||
<xsl:template match="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>
|
||||
<xsl:if test="@poster">
|
||||
<img src="{@poster}" title="@title"/>
|
||||
<img src="{@poster}" title="{@title}"/>
|
||||
</xsl:if>
|
||||
<ul>
|
||||
<li><xsl:call-template name="link-resource"/></li>
|
||||
|
@ -317,7 +325,7 @@
|
|||
</section>
|
||||
</xsl:template>
|
||||
<xsl:template name="link-resource">
|
||||
<a href="{@url}">
|
||||
<a href="{@url}" type="{@type}">
|
||||
<xsl:choose>
|
||||
<xsl:when test="@type='video/mp4'">MP4</xsl:when>
|
||||
<xsl:when test="@type='video/webm'">WebM</xsl:when>
|
||||
|
|
Loading…
Reference in New Issue
Block a user