[xiph-commits] r2961 - cmmlwiki/trunk/cmmlwiki

[ctford at svn.annodex.net]

Author: ctford
Date: 2007-06-17 05:36:37 -0700 (Sun, 17 Jun 2007)
New Revision: 2961

Modified:
   cmmlwiki/trunk/cmmlwiki/embed.py
Log:
Added javascript to gracefully downgrade to "application/ogg" if oggplay isn't installed, or upgrade to use the html5 <video> tag if that is available.

Order of preference: <video> -> "application/liboggplay" -> "application/ogg".

Not yet tested with a <video> enabled browser.


Modified: cmmlwiki/trunk/cmmlwiki/embed.py
===================================================================
--- cmmlwiki/trunk/cmmlwiki/embed.py	2007-06-17 05:30:14 UTC (rev 2960)
+++ cmmlwiki/trunk/cmmlwiki/embed.py	2007-06-17 12:36:37 UTC (rev 2961)
@@ -37,21 +37,104 @@
 
     s = """
 <div id="monitor-big">
+
 <p class="centre-video">
-  <embed type="application/liboggplay"
-    src="%s"
-    width="320" height="240">
-  </embed>
+  <script type="text/javascript">
+
+    var oggplayMimeType     = "application/liboggplay";
+    var plainOggMimeType    = "application/ogg";
+    var width               = 320;
+    var height              = 240;
+
+    function html5Supported()
+    {
+        var video = document.createElement("video");
+        if( video.play )
+        {
+            return true;
+        }
+        else
+        {
+            return false;
+        }
+    }
+    function oggplayPresent()
+    {
+        return navigator.mimeTypes[oggplayMimeType];
+    }
+    function getBaseUrl( url )
+    {
+        return (url.split("?"))[0];
+    }
+    function getFragment( url )
+    {
+        return (url.split("?"))[1];
+    }
+
+    // Move to a new part of the video.
+    function setlocation(location) 
+    {
+        // Only call oggplay methods if we are using oggplay.     
+        if( oggplayPresent() && !html5Supported() )
+        {
+            var player = document.embeds[0];
+            //player.setParam("url", location);
+            player.setCurrentMovie(location);
+        }
+        else
+        {
+            // We need to reload the page, adding the clip or time parameter.
+            var baseUrl = getBaseUrl(document.URL);
+            var fragment = getFragment(location);
+            window.location.href = baseUrl + "?" + fragment; 
+        }
+    }
+
+    // Default to using oggplay.
+    var mimeType = oggplayMimeType;
+
+    // Gracefully degrade to plain ogg if the user doesn't have oggplay. 
+    if(!oggplayPresent())
+    { 
+        mimeType = plainOggMimeType;
+    }
+
+    // Do we use the fancy new <video> tag or good old <embed>?
+    var tagName;
+    if( html5Supported() )
+    {
+        tagName = "video";
+
+        var styleTag = "<style type='text/css'>";
+        styleTag    += "video { width:"+width+"px; height:"+height+"px }";
+        styleTag    += "<style\>";
+
+        var videoTag = "<" + tagName + " ";
+        videoTag    += "src='%s?" + getFragment(document.URL) + "' ";
+        videoTag    += "autoplay='true' ";
+        videoTag    += "/>";
+
+        document.write(styleTag);
+        document.write(videoTag);                         
+    }
+    else
+    {
+        tagName = "embed";
+
+        var embedTag = "<" + tagName + " ";
+        embedTag    += "src='%s?" + getFragment(document.URL) + "' ";
+        embedTag    += "type='" + mimeType + "' ";
+        embedTag    += "height='" + height + "' ";
+        embedTag    += "width='" + width + "'";
+        embedTag    += "/>";
+
+        document.write(embedTag);                         
+    }
+  </script>
 </p>
+
 </div><!-- end monitor-big -->
 
-<script type="text/javascript">
-  function setlocation(location) {
-    var player = document.embeds[0];
-    //player.setParam("url", location);
-    player.setCurrentMovie(location);
-  }
-</script>
 """ % (play_url)
 
 #    s += """