[xiph-commits] r18820 - websites/xiph.org/video

xiphmont at svn.xiph.org xiphmont at svn.xiph.org
Mon Feb 25 11:24:34 PST 2013


Author: xiphmont
Date: 2013-02-25 11:24:34 -0800 (Mon, 25 Feb 2013)
New Revision: 18820

Added:
   websites/xiph.org/video/fallback.include
Modified:
   websites/xiph.org/video/subtitles.js
   websites/xiph.org/video/vid1.shtml
   websites/xiph.org/video/video.js
Log:
Update video page scripting to accept VTT subtitles, use a modified version of Daiz's line-splitting scripts
Eliminate Cortado fallback; add a fallback.include to share across vid pages



Added: websites/xiph.org/video/fallback.include
===================================================================
--- websites/xiph.org/video/fallback.include	                        (rev 0)
+++ websites/xiph.org/video/fallback.include	2013-02-25 19:24:34 UTC (rev 18820)
@@ -0,0 +1,26 @@
+
+	  <!-- dropping Cortado fallback.  Java in the browser is dead as a doornail -->
+	  <div class="fallback">
+  	    <p>
+	      Your browser doesn't seem to support HTML5 WebM or Ogg
+	      video.
+	    </p>
+	    <p>
+	      Please consider upgrading to an
+	      open-standards-compliant web browser such as
+	      <a href="http://www.getfirefox.net">Firefox</a>,
+	      <a href="https://www.google.com/intl/en/chrome/browser/">Chrome</a>
+	      or
+	      <a href="http://www.opera.com/download/">Opera</a>, or
+	      downloading this video to watch in your favorite media
+	      player such as <a href="http://www.videolan.org/vlc/index.html">VLC<a> or
+	      <a href="http://www.getmiro.com/">Miro</a>.
+	    </p>
+
+	    <div>
+	      <a href="http://www.getfirefox.net"><img border="0"
+	         src="http://www.getfirefox.net/banner/160x60_download.png"
+	         width="160" height="60" border="0" alt="firefox">
+              </a>
+	    </div>
+	  </div>

Modified: websites/xiph.org/video/subtitles.js
===================================================================
--- websites/xiph.org/video/subtitles.js	2013-02-25 10:17:01 UTC (rev 18819)
+++ websites/xiph.org/video/subtitles.js	2013-02-25 19:24:34 UTC (rev 18820)
@@ -31,10 +31,10 @@
     if(t) {
         var p = t.split(':');
         for(i=0;i<p.length;i++)
-            ms = ms * 60 + parseInt('1'+p[i].replace(',', ' ')) - 100;
+            ms = ms * 60 + parseInt('1'+p[i].replace(/,|\./g, ' ')) - 100;
         ms*=1000;
         if(i){
-            var m = p[i-1].split(',');
+            var m = p[i-1].split(/,|\./);
             if(m[1]) ms+= parseInt(m[1]);
         }
     }
@@ -87,7 +87,37 @@
                 }
                 if(subtitle > 0 && subtitles[subtitle].o > currentTime*1000) {
                     if(current_subtitle != subtitle){
-                        subtitleElement.html(subtitles[subtitle].t);
+                        var text = subtitles[subtitle].t;
+                        subtitleElement.html(text);
+			var hgt = subtitleElement.innerHeight();
+			var baseline = $(document.querySelector('.baseline')).outerHeight();
+			if(hgt > baseline*1.5 && hgt < baseline*2.5) {
+			    var split = text.split(''),
+			    len = text.length,
+			    liners = [], breaks = [],
+			    res = 0, rnum = 0, top, btm, tlen, blen, t, tt, splim = 1000000;
+
+			    for(var j = 0; j < len; j++) {
+				if(split[j] === ' ') {
+				    breaks.push(j);
+				}
+			    }
+
+			    for(var k = 0, kk = breaks.length; k < kk; k++) {
+				top = text.substr(0,breaks[k]).replace(/\ /g,'^').split('');
+				btm = text.substr(breaks[k]+1,len).replace(/\ /g,'^').split('');
+				liners.push(Math.abs(top.length - btm.length));
+			    }
+			    for(var c = 0, cc = liners.length; c < cc; c++) {
+				if(liners[c] < splim) {
+				    res = c;
+				    splim = liners[c];
+				}
+			    }
+			    res = breaks[res];
+			    subtitleElement.html(text.substr(0,res+1)+'<br>'+text.substr(res+1,len));
+			}
+			
                         current_subtitle = subtitle;
                     }
                 }else{

Modified: websites/xiph.org/video/vid1.shtml
===================================================================
--- websites/xiph.org/video/vid1.shtml	2013-02-25 10:17:01 UTC (rev 18819)
+++ websites/xiph.org/video/vid1.shtml	2013-02-25 19:24:34 UTC (rev 18820)
@@ -29,26 +29,23 @@
 	   onended="undimpage()">
 	  
 	  <!-- Cortado fallback for browsers w/o video, or without Ogg/WebM in video -->
-	  <applet 
-	     width="640"
-	     height="360"
-	     class="video" 
+	  <!-- Nope, dropping Cortado fallback.  java in the web browser is dead as a doornail -->
+	  <div class="fallback">
+	  <p>
+	    Your browser doesn't seem to support HTML5 WebM or Ogg
+	    video.  Please consider upgrading to an
+	    open-standards-compliant web browser such
+	    as <a href="http://www.getfirefox.net">Firefox</a> or
+	    downloading this video to watch in your favorite media
+	    player.</p>
 
-	     archive="http://downloads.xiph.org/video/cortado_latest.jar"
-	     code="com.fluendo.player.Cortado.class">
-	    <!-- Safari ignores 'unknown' params in applet tags; the
-	    must be in explicit <param> tags -->
-	    <param name="url" value="http://downloads.xiph.org/video/A_Digital_Media_Primer_For_Geeks-360p.ogv">
-	    <param name="statusheight" value="20">
-	    <param name="BufferSize" value="512">
-	    <param name="BufferHigh" value="25">
-	    <param name="BufferLow" value="5">
-	    
-	    <p>Your browser doesn't seem to support WebM, Ogg or Java;
-	      please consider downloading this
-	      video to play in your favorite media player!</p>
-	    
-	  </applet>
+	  <div>
+	  <a href="http://www.getfirefox.net"><img border="0"
+	  src="http://www.getfirefox.net/banner/160x60_download.png"
+	  width="160" height="60" border="0" alt="firefox"></a>
+	  </div>
+	  </div>
+
 	</video>
       </div>    
     </div>

Modified: websites/xiph.org/video/video.js
===================================================================
--- websites/xiph.org/video/video.js	2013-02-25 10:17:01 UTC (rev 18819)
+++ websites/xiph.org/video/video.js	2013-02-25 19:24:34 UTC (rev 18820)
@@ -8,9 +8,8 @@
     var videoElement = false;
 
     if ((video.canPlayType &&
-	 (video.canPlayType("video/ogg;codecs=\"theora,vorbis\"") == "probably" ||
-          video.canPlayType("video/webm;codecs=\"vp8,vorbis\"") == "probably")) ||
-        (!video.canPlayType && video.play)) {
+	 (video.canPlayType("video/ogg; codecs=\"theora, vorbis\"") == "probably" ||
+          video.canPlayType("video/webm; codecs=\"vp8, vorbis\"") == "probably"))) {
         videoElement = true;
     }
 
@@ -190,16 +189,38 @@
 // Show/hide our upper control toolbar according to mouseover
 var stick=0; // only one input queue, so a single global stick will do
 var mousein=0;
-function showControls(el){
+var mousetimeout;
+var showtimeout;
+var playonce=0;
+
+function showControls(el,delay){
     var wrapper = findUnder(el,'.vcwrapper');
+    var video = findUnder(el,'video');
+    var playing = !(video.paused);
+    var position = video.currentTime;
     if(!wrapper)return;
-    $(wrapper).animate({opacity: 1}, {duration: 160, queue: false});
+    if(!mousein){
+	clearTimeout(showtimeout);
+	showtimeout=setTimeout(function(){
+	    $(wrapper).animate({opacity: 1}, {duration: 160, queue: false});},
+			       delay);
+	mousein=1;
+    }
+    clearTimeout(mousetimeout);
+    if(playonce)
+	mousetimeout=setTimeout(function(){mousein=0;hideControls(el);},2000);
+    if(position)playonce=1;
     stick=0;
 }
 
 var focused_el = 0;
 function hideControls(el){
-    if(!stick && !mousein){
+    var video = findUnder(el,'video');
+    var playing = !(video.paused);
+    var position = video.currentTime;
+    if(position)playonce=1;
+    clearTimeout(showtimeout);
+    if(!stick && !mousein && playonce){
         var wrapper = findUnder(el,'.vcwrapper');
         if(!wrapper)return;
         $(wrapper).animate({opacity: 0.}, {duration: 160, queue: false});
@@ -245,7 +266,8 @@
 
         $('.vid_control').each(function() {
                 this.onmouseout=function(){mousein=0;hideControls(this)};
-                this.onmouseover=function(){mousein=1;showControls(this)};
+                this.onmouseover=function(){showControls(this,0)};
+                this.onmousemove=function(){showControls(this,500)};
             });
 
         // subtitles and video settings aren't statically set in the



More information about the commits mailing list