src/pyams_media/skin/templates/video.pt
changeset 127 ab50b62aa21b
parent 119 4cdacd1e34c7
child 132 2f7e36cb0e05
--- a/src/pyams_media/skin/templates/video.pt	Fri Jan 18 15:34:46 2019 +0100
+++ b/src/pyams_media/skin/templates/video.pt	Mon Feb 18 16:08:57 2019 +0100
@@ -3,16 +3,24 @@
 				   thumbnails tales:thumbnails(video);
 				   size thumbnails.get_image_size();
 				   thumbnail thumbnails.get_thumbnail('{0}x{1}'.format(size[0], size[1]), 'png');
-				   timestamp tales:timestamp(thumbnail);"
+				   global media_width 0;
+				   global min_width 0;
+				   global previous_type None;"
 	   controls="${'controls' if controls else None}"
-	   poster="${href}/++thumb++${size[0]}x${size[1]}.png?_=${timestamp}">
-	<tal:loop repeat="conversion conversions.get_conversions(order=('video/webm','video/mp4','video/x-flv'))">
-		<source tal:define="media_width conversions.get_conversion_width(conversion.__name__);
-							media_src tales:absolute_url(conversion);
-							video_type tales:video_type(conversion);"
-				tal:condition="video_type"
-				type="${video_type}"
-				src="${media_src.replace('+', '%2b')}"
-				media="${'all and (max-width: {0}px)'.format(media_width) if media_width else None}" />
+	   poster="${href}/++thumb++${size[0]}x${size[1]}.png?_=${tales:timestamp(thumbnail)}">
+	<tal:loop repeat="conversion conversions.get_conversions(order=('video/mp4','video/webm','video/ogg','video/x-flv'))">
+		<tal:var define="video_type tales:video_type(conversion);
+						 min_width ((media_width or 0) + 1) if (video_type == previous_type) else 0;
+						 global media_width conversions.get_conversion_width(conversion.__name__);
+						 media_src tales:absolute_url(conversion);
+						 media_url media_src.replace('+', '%2b');">
+			<source tal:condition="video_type"
+					type="${video_type}"
+					src="${media_url}?_=${tales:timestamp(conversion)}"
+					media="${'screen only{}{}'.format(
+								 ' and (min-width: {}px)'.format(min_width) if min_width else '',
+								 ' and (max-width: {}px)'.format(media_width) if media_width else '')}" />
+			<tal:var define="global previous_type video_type;" />
+		</tal:var>
 	</tal:loop>
 </video>