From 67ddefec1eee0fdc9313739421a2f56929d253f5 Mon Sep 17 00:00:00 2001
From: Steve Heffernan <steve@sevenwire.com>
Date: Tue, 18 May 2010 17:53:58 -0700
Subject: [PATCH] Changed order of sources. Updated styles.

---
 demo.html             | 34 ----------------------------------
 index.html            |  3 ++-
 video-js/video-js.css |  9 ++++++---
 3 files changed, 8 insertions(+), 38 deletions(-)
 delete mode 100644 demo.html
diff --git a/demo.html b/demo.html
deleted file mode 100644
index aa1c306e4..000000000
--- a/demo.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <title>HTML5 Video Player</title>
-  <script src="video.js" type="text/javascript" charset="utf-8"></script>
-  <script type="text/javascript" charset="utf-8">
-
-    var bodyLoaded = function(){
-      VideoJS.setup();
-    }
-
-  </script>
-  <link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
-</head>
-<body id="body" onload="bodyLoaded()">
-
-  <div class="video-box">
-    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
-    <video id="video" class="video-js" width="640" height="360" poster="http://zencoder-demo.s3.amazonaws.com/poster.jpg" autobuffer>
-      <source src="http://zencoder-demo.s3.amazonaws.com/trailer_test.mp4" type="video/mp4"></source>
-      <source src="http://zencoder-demo.s3.amazonaws.com/trailer_test.ogg" type="video/ogg"></source>
-      <object width="640" height="360" type="application/x-shockwave-flash"
-        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
-        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
-        <param name="allowfullscreen" value="true" />
-        <param name="flashvars" value='config={"clip":"http://zencoder-demo.s3.amazonaws.com/trailer_test.mp4"}' />
-        <img src="http://zencoder-demo.s3.amazonaws.com/poster.jpg" width="640" height="360" alt="Poster Image" title="No video playback capabilities." />
-      </object>
-    </video>
-  </div>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 3d3e1877f..85dc7f590 100644
--- a/index.html
+++ b/index.html
@@ -40,8 +40,8 @@
         <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
         <video id="video" class="video-js" width="640" height="264" poster="http://zencoder-demo.s3.amazonaws.com/poster.jpg" autobuffer>
           <source src="http://video-js.s3.amazonaws.com/oceans-clip.mp4" type="video/mp4"></source>
-          <source src="http://video-js.s3.amazonaws.com/oceans-clip.ogg" type="video/ogg"></source>
           <source src="http://video-js.s3.amazonaws.com/oceans-clip.webm" type="video/webm"></source>
+          <source src="http://video-js.s3.amazonaws.com/oceans-clip.ogg" type="video/ogg"></source>
           <object width="640" height="264" type="application/x-shockwave-flash"
             data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
             <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
@@ -68,6 +68,7 @@
             <li>Consistent look between browsers</li>
             <li>Full Window Mode</li>
             <li>Volume Control</li>
+            <li>Fallback to <a href="http://flowplayer.org/">Flowplayer</a></li>
             <li></li>
           </ul>
         </div>
diff --git a/video-js/video-js.css b/video-js/video-js.css
index 2bf3ac5cc..6af69e616 100644
--- a/video-js/video-js.css
+++ b/video-js/video-js.css
@@ -1,4 +1,3 @@
-
 .video-box { text-align: left; position: relative; }
 .video-js { background-color: #000; }
 
@@ -20,14 +19,18 @@
 
 /* Play/Pause */
 .vjs-play-control span { display: block; font-size: 0px; line-height: 0; text-decoration: none; }
-.vjs-play-control.vjs-play span { width: 0; height: 0; margin: 8px 0 0 8px; border-top: 5px solid #273F3E; border-left: 10px solid #fff; border-bottom: 5px solid #273F3E; }
+.vjs-play-control.vjs-play span { width: 0; height: 0; margin: 8px 0 0 8px; border-top: 5px solid #273F3E; border-left: 10px solid #fff; border-bottom: 5px solid #112129; }
 .vjs-play-control.vjs-pause span { width: 3px; height: 10px; margin: 8px auto 0; border-top: 0px; border-left: 3px solid #fff; border-bottom: 0px; border-right: 3px solid #fff; }
 
 /* Progress */
 .vjs-progress-control { width: 190px; }
 .vjs-progress-control ul { list-style: none; margin: 0; padding: 0; }
 .vjs-progress-control .vjs-progress-holder { list-style: none; position: relative; float: left; width: 100px; height: 9px; border: 1px solid #777; margin: 7px 0 0 5px; padding: 0; background-color: #112129; overflow:hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
-.vjs-progress-control .vjs-play-progress { position: absolute; display: block; width: 0px; height: 9px; background-color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
+.vjs-progress-control .vjs-play-progress { position: absolute; display: block; width: 0px; height: 9px; background: #fff; 
+    -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
+    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#777));
+    background: -moz-linear-gradient(top,  #fff,  #777);
+    }
 .vjs-progress-control .vjs-load-progress { position: absolute; display: block; width: 0px; height: 9px; background-color: #777; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
 .vjs-progress-control .vjs-progress-time { list-style: none; float: left; margin: 7px 0 0 5px; padding: 0; font-size: 10px; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif;  }
 
