updated video demo

nko · Aug 29, 2010 · 6cd90c1 · 6cd90c1
1 parent b80c3db
commit 6cd90c1
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 11 deletions.
diff --git a/public/demos/video/index.html b/public/demos/video/index.html
@@ -10,15 +10,23 @@
 
   <div class="ume-group">
     <div class="ume-module" id="video-display">
-      <video width="640" height="360" controls preload autobuffer id="main-video">
-        <source src="http://www.archive.org/download/taboca_201004_04/80434e64104c39a71ab9f37226a78024.mts-mp424-272.MP4" type="video/mp4" /><!-- WebKit video    -->
-        <source src="http://www.archive.org/download/taboca_201004_04/80434e64104c39a71ab9f37226a78024.mts-webm24-272.WEBM" type='video/webm; codecs="vp8.0, vorbis"' /> 
-        <source src="http://www.archive.org/download/taboca_201004_04/80434e64104c39a71ab9f37226a78024.mts-ogv24-272.OGV" type="video/ogg" /><!-- Firefox / Opera -->
+      <video width="640" height="360" id="main-video" > <!-- preload autobuffer  -->
+        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" /><!-- WebKit video    -->
+        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type='video/webm; codecs="vp8.0, vorbis"' /> 
+        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" /><!-- Firefox / Opera -->
       </video>
     </div>
+    <div id="video-controls">
+      <div id="play-button"><img src="play.png" id="play-image"/></div>
+      <div id="seek-container" >
+        <div id="seek-bar-inside">
+          <div id="loaded-bar"></div>
+          <div id="played-bar"></div>
+        </div>
+      </div>
+    </div>
   </div>
   <div class="ume-ribbon"><img src="sliceMe.png" /></div>
-  <a href="#" id="testlink">Test publishing</a>
   <div style="background-color:#fff;">Playback control URL:<input type="text" style="width:500px;" id="playback-control-url-field" /></div>
 <script src="http://umeboshi-fireteam.no.de:8000/pubsubhub.js"></script>
 <!-- <script src="http://localhost:8000/pubsubhub.js"></script> -->

diff --git a/public/demos/video/main.css b/public/demos/video/main.css
@@ -2,12 +2,13 @@
 body,h1,h2,h3,h4,a,img,div,p,video,ol,li,table,caption,thead,tr,td {margin:0px;padding:0px;border:none;}
 
 body{
-  background-color: #2e2e2e;
+  background-color: #dbdacd;
 }
 
 .ume-group{
   border: 15px solid white;
   width:640px;
+  height:420px;
   position:absolute;
   left:50%;
   top:46%;
@@ -18,14 +19,56 @@ body{
 #video-display{
   width:640px;
   height:360px;
+  background-color:#333;
 }
 
 #video-controls{
   width:640px;
   height:61px;
   background-color:#000;
+  margin-top:-1px;
+  position:absolute;
+}
+#video-controls #play-button{
+  background:none;
+  width:66px;
+  height:61px;
+  background-image:url('pause.png');
+  display:block;
+  position: absolute;
+  cursor: pointer;
+}
+#video-controls #play-button #play-image{
+/*  display:none;*/
+}
+#seek-container{
+  width:550px;
+  height:20px;
+  border:1px solid #fff;
+  position:absolute;
+  top:20px;
+  left:65px;
+}
+#seek-container #seek-bar-inside{
+  position:relative;
+  border:none;
+  height:16px;
+  width:546px;
+  top:2px;
+  left:2px;
+}
+#loaded-bar {
+/*  width:15%;*/
+  height:100%;
+  position:absolute;
+  background-color:#262626;
+}
+#played-bar {
+/*  width:5%;*/
+  height:100%;
+  position:absolute;
+  background-color:#fff;
 }
-
 .ume-ribbon{
   position: absolute;
   z-index: 100;

diff --git a/public/demos/video/main.js b/public/demos/video/main.js
@@ -10,15 +10,28 @@ var  channel_key
     ,pubsub_client
     ,domain_name =  window.location.hostname
     ,pubsub_server_url = 'http://'+domain_name+':8000'
-    ,http_server_url = 'http://'+domain_name + ((domain_name.indexOf('no.de')==-1)?(':8080'):(''));
+    ,http_server_url = 'http://'+domain_name + ((domain_name.indexOf('no.de')==-1)?(':8080'):(''))
+    ,video_element
+    ,video_progress_bar
+    ,video_location_bar
+    ,playpausebtn
+    ,playpausebtn_play_img
+
 
 function init(){
   console.log('init')
   console.log(domain_name)
-  document.getElementById('testlink').addEventListener('click', pubTest, false)
+  video_element = document.getElementById('main-video'); 
+  video_progress_bar = document.getElementById('loaded-bar')
+  video_location_bar = document.getElementById('played-bar')
+  playpausebtn = document.getElementById('play-button')
+  playpausebtn_play_img = document.getElementById('play-image')
   pubsub_client = new Faye.Client(pubsub_server_url+'/pubsubhub', {
       timeout: 120
   });
+  video_element.addEventListener('progress', updateLoadingBar, false);
+  video_element.addEventListener('timeupdate', updateTimeBar, false);
+  playpausebtn.addEventListener('click', playPauseVideo, false)
 }
 
 
@@ -45,12 +58,19 @@ function pubTest(e){
   pub(my_obj);
 }
 
-
+function updateLoadingBar(e){
+  video_progress_bar.style.width = ((e.loaded/e.total)*100)+'%';
+}
+function updateTimeBar(e){
+  console.log(e.target.currentTime+' / '+e.target.duration)
+  video_location_bar.style.width = ((e.target.currentTime/e.target.duration)*100)+'%';
+}
 function playPauseVideo(){
-  var video_element = document.getElementById('main-video')
   if (video_element.paused){
     video_element.play();
+    playpausebtn_play_img.style.display = 'none'
   } else{
     video_element.pause();
+    playpausebtn_play_img.style.display = 'block'
   }
 }
diff --git a/public/demos/video/pause.png b/public/demos/video/pause.png