From 3337b2517bfac70c55b5e25c26fc488f10f089e1 Mon Sep 17 00:00:00 2001
From: Guillaume Pellerin <yomguy@parisson.com>
Date: Fri, 27 Sep 2013 14:11:42 +0200
Subject: [PATCH] add source type detection from the browser to apply the right
 video format

---
 index.html | 87 ++++++++++++++++++++++++------------------------------
 1 file changed, 39 insertions(+), 48 deletions(-)

diff --git a/index.html b/index.html
index 8aaff19..7a5a187 100644
--- a/index.html
+++ b/index.html
@@ -11,8 +11,16 @@ cineteve, flach films, telfrance, mobile, infographiste, infographie">
 		<link rel="icon" type="image/png" href="images/favicon.png">
 		<link rel="shortcut icon" href="images/favicon.ico">
 
+    <style type="text/css">
+	a{text-decoration:none;	color:gainsboro;
+	}
+	.active{color:black;
+	}
+    </style>
+
 <!-- maintien couleur texte clické -->
     <script type="text/javascript" src="media/system/js/jquery-1.7.1.js"></script>
+    
     <script type="text/javascript">
     $(function(){
 	$('a').click(function(){
@@ -20,44 +28,26 @@ cineteve, flach films, telfrance, mobile, infographiste, infographie">
 	$(this).addClass('active');
 	});
     });
+
     </script>
 	
-    <style type="text/css">
-a{text-decoration:none;	color:gainsboro;
-}
-.active{color:black;
-}
-    </style>
-<!-- ___ -->
-
 <!-- change vidéo -->
-		<script language="JavaScript" type="text/javascript">
-		function changeVideo(newUrl) {
-		var video = document.getElementById("player");
-		video.src = newUrl;
-		video.load();
-		video.play();
-		video.loop = false;
-		video.controls=true;
-		video.muted = true;
-		}
-		</script>
-		
-		
-		<script language="JavaScript" type="text/javascript">
-		function changeVideo2(newUrl) {
-		var video = document.getElementById("player");
-		video.src = newUrl;			
-		video.load();
-		video.play();		
-		video.loop = true;
-		video.controls=false;
+	<script language="JavaScript" type="text/javascript">
+		function changeVideo(path) {
+			var video = document.getElementById("player");
+    		var videoSrc = video.currentSrc;
+    		var ext = videoSrc.substr(videoSrc.lastIndexOf(".")); // figure the correct extension
+    		video.src = path + ext; // set up the new src  
+    		video.load(); // load the new video  
+    		video.play(); // play the new video  
+    		video.loop = true;
+			video.controls=false;	
 		}
-		</script>
+	</script>
 		
-		<script language="JavaScript" type="text/javascript">
+	<script language="JavaScript" type="text/javascript">
 		var media_properties = [ "error", "src", "currentSrc", "crossOrigin", "networkState", "preload", "buffered", "readyState", "seeking", "currentTime", "duration", "startDate", "paused", "defaultPlaybackRate", "playbackRate", "played", "seekable", "ended", "autoplay", "loop", "mediaGroup", "controller", "controls", "volume", "muted", "defaultMuted", "audioTracks", "videoTracks", "textTracks", "width", "height", "videoWidth", "videoHeight", "poster" ];
-		</script>
+	</script>
 
 
 	</head>
@@ -84,70 +74,71 @@ a{text-decoration:none;	color:gainsboro;
     <h1>
   
   		<font size="3" >
-   		<a href="javascript:changeVideo('media/video/generiqOccupation.mp4','media/video/generiqOccupation.ogv')" >ALLEMAGNE, L'ART ET LA NATION</a></font>
+   		<a href="#" onclick="changeVideo('media/video/generiqOccupation');" >ALLEMAGNE, L'ART ET LA NATION</a></font>
 		(JEAN-BAPTISTE PÉRETIÉ) © TEMPS NOIR PRODUCTION (2013)</a>
     
   		<font size="3">
-   		<a href="javascript:changeVideo('media/video/PCM_03_leX.mp4','media/video/PCM_03_leX.ogv')"  >PETITS CONTES MATHÉMATIQUES</a></font>
+   		<a href="#" onclick="changeVideo('media/video/PCM_03_leX');"  >PETITS CONTES MATHÉMATIQUES</a></font>
+
 		(<a href="https://www.vimeo.com/aurelienrocland/ "target="_blank">AURÉLIEN ROCLAND</a> / <a href=https://www.vimeo.com/user2282537/videos/ "target="_blank">CLÉMENCE GANDILLOT</a>)
     	<a href="http://www.goldeniastudios.com/ "target="_blank"> © GOLDENIA STUDIOS </a> / <a href=http://www.universcience.tv/categorie-petits-contes-mathematiques-626.html "target="_blank"> UNIVERSCIENCE (2012)</a> 
 
 		<font size="3">
-   		<a href="javascript:changeVideo('media/video/longchamp_2012.mp4','media/video/longchamp_2012.ogv')" rel="player">LONGCHAMP BOUTIQUE</a></font>
-		<a href="http://www.mirabellstudio.com/ "target="_blank"> © MIRABELL STUDIOS (2012)</a>
+   		<a href="javascript:changeVideo('media/video/longchamp_2012')" rel="player">LONGCHAMP BOUTIQUE</a></font>
+		<a href="#" onclick="http://www.mirabellstudio.com/ "target="_blank"> © MIRABELL STUDIOS (2012)</a>
   
    		<font size="3">
-   		<a href="javascript:changeVideo('media/video/generiqClowns.mp4','media/video/generiqClowns.ogv')" rel="player">CLOWNS</a></font>
+   		<a href="#" onclick="javascript:changeVideo('media/video/generiqClowns')" rel="player">CLOWNS</a></font>
 		(<a href="http://www.riou-et-pouchain.jimdo.com/ "target="_blank">YVES RIOU & PHILIPPE POUCHAIN</a>)
    		<a href="http://www.cineteve.com/ "target="_blank"> © CINÉTÉVÉ (2011)</a>
 		
 		<font size="3">
-   		<a href="javascript:changeVideo2('media/video/anim_atome.mp4','media/video/anim_atome.ogv')" rel="player">MARIE CURIE, AU DELÀ DU MYTHE</a></font>
+   		<a href="#" onclick="changeVideo('media/video/anim_atome')" rel="player">MARIE CURIE, AU DELÀ DU MYTHE</a></font>
     	(MICHEL VUILLERMET)
     	<a href="http://http://www.filmsdunjour.com/ "target="_blank"> © LES FILMS D’UN JOUR (2011)</a>
 
 		<font size="3">
-		<a href="javascript:changeVideo('media/video/generiqOccupation.mp4','media/video/generiqOccupation.ogv')" rel="player">L’OCCUPATION SANS RELÂCHE</a></font>
+		<a href="#" onclick="changeVideo('media/video/generiqOccupation')" rel="player">L’OCCUPATION SANS RELÂCHE</a></font>
 		(<a href="http://www.riou-et-pouchain.jimdo.com/ "target="_blank">YVES RIOU & PHILIPPE POUCHAIN</a>)
 		<a href="http://www.cineteve.com/ "target="_blank"> © CINÉTÉVÉ (2010)</a> 
 		
 		<font size="3">
-   		<a href="javascript:changeVideo('media/video/GeneriqYeyeRevolution.mp4','media/video/GeneriqYeyeRevolution.ogv')" rel="player">YÉYÉ RÉVOLUTION</a></font>
+   		<a href="#" onclick="changeVideo('media/video/GeneriqYeyeRevolution')" rel="player">YÉYÉ RÉVOLUTION</a></font>
     	(MICHEL ROYER)
     	<a href="http://www.program33.com/ "target="_blank"> © PROGRAM33 (2010)</a>  
 
 		<font size="3">
-   		<a href="javascript:changeVideo('media/video/ClipSstMix.mp4','media/video/ClipSstMix.ogv')" rel="player">LA PETITE FILLE SANS LANGUE</a></font>
+   		<a href="#" onclick="changeVideo('media/video/ClipSstMix')" rel="player">LA PETITE FILLE SANS LANGUE</a></font>
 		© IJKL / SIN S THESIA (2010)</a>
 
 		<font size="3">
-   		<a href="javascript:changeVideo('media/video/pinUp.mp4','media/video/pinUp.ogv')" rel="player">SOIRÉE THÉMA / PIN-UP</a></font>
+   		<a href="#" onclick="changeVideo('media/video/pinUp')" rel="player">SOIRÉE THÉMA / PIN-UP</a></font>
 		(SÉBASTIEN VIDAL)
     	<a href="http://www.novaprod-owl.com/ "target="_blank"> © NOVA PROD (2009)</a>
 
 		<font size="3">
-   		<a href="javascript:changeVideo('media/video/generiqMilesDavis.mp4','media/video/generiqMilesDavis.ogv')" rel="player">SOIRÉE THÉMA / MILES DAVIS</a></font>
+   		<a href="#" onclick="changeVideo('media/video/generiqMilesDavis')" rel="player">SOIRÉE THÉMA / MILES DAVIS</a></font>
 		(SÉBASTIEN VIDAL)
     	<a href="http://www.novaprod-owl.com/ "target="_blank"> © NOVA PROD (2009)</a>
 
 		<font size="3">
-   		<a href="javascript:changeVideo2('media/video/mobileDEFnb.mp4','media/video/mobileDEFnb.ogv')" rel="player">MOBILE <font size="2">(L1*P1 = L2*P2)</font></a></font>
+   		<a href="#" onclick="changeVideo('media/video/mobileDEFnb')" rel="player">MOBILE <font size="2">(L1*P1 = L2*P2)</font></a></font>
 		© IJKL (2009)</a>
 
 		<font size="3">
-   		<a href="javascript:changeVideo('media/video/mobileartokyo.mp4','media/video/mobileartokyo.ogv')" rel="player">MOBILEART TOKYO</a></font>
+   		<a href="#" onclick="changeVideo('media/video/mobileartokyo')" rel="player">MOBILEART TOKYO</a></font>
 		© CHANEL (2008)
 
 		<font size="3">
-   		<a href="javascript:changeVideo2('media/video/LeTrouCarre.mp4','media/video/LeTrouCarre.ogv')" rel="player" >GÉOMETRIES</a></font>
+   		<a href="#" onclick="changeVideo('media/video/LeTrouCarre')" rel="player" >GÉOMETRIES</a></font>
 		© IJKL (2008)</a>
 		
 		<font size="3">
-   		<a href="javascript:changeVideo('media/video/chanel_3.mp4','media/video/chanel_3.ogv')" rel="player" >CHANEL PARIS-LONDRES</a></font>
+   		<a href="#" onclick="changeVideo('media/video/chanel_3')" rel="player" >CHANEL PARIS-LONDRES</a></font>
 		(AMAR ARHAB) © CHANEL (2007)
 
 		<font size="3">
-   		<a href="javascript:changeVideo2('media/video/cir.mp4','media/video/cir.ogv')" rel="player" >CENTRE INSTANTANÉ DE ROTATION</a></font>
+   		<a href="#" onclick="changeVideo('media/video/cir')" rel="player" >CENTRE INSTANTANÉ DE ROTATION</a></font>
 		© IJKL (2004)</a>
 
 		
-- 
2.39.5