datenspuren mitschnitte: play-resources.js

content/static/datenspuren/2011/script/play-resources.js

@@ -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);
+	    });
+	}
+    });
+});

content/static/datenspuren/2011/style/style.css

@@ -276,7 +276,7 @@ dl dd {
 .resource {
     display: inline-block;
     margin: auto 2px 0;
-    width: 380px;
+    width: 390px;
     text-align: center;
 }
 

xsl/datenspuren/xhtml5.xsl

@@ -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>