Fix: Issue with big play button when multiple videos are on the page.

README.markdown

@@ -133,6 +133,7 @@ Changelog
 ---------
 2.0.1 (2010-11-22)
 
+- Fix: Issue with big play button when multiple videos are on the page.
 - Fix: Optimized play progress tracking.
 - Fix: Optimized buffer progress checking.
 - Fix: Firefox not showing Flash fallback object.

dev/src/_begin.js

@@ -1,6 +1,6 @@
 /*
 VideoJS - HTML5 Video Player
-v2.0.0
+v2.0.1
 
 This file is part of VideoJS. Copyright 2010 Zencoder, Inc.
 

dev/src/behaviors.js

@@ -469,23 +469,25 @@ VideoJS.player.newBehavior("fullscreenToggle", function(element){
 /* Big Play Button Behaviors
 ================================================================================ */
 VideoJS.player.newBehavior("bigPlayButton", function(element){
-    if (!this.elements.bigPlayButtons) { 
+    console.log(this)
-      this.elements.bigPlayButtons = [];
+    if (!this.bigPlayButtons) {
+      this.bigPlayButtons = [];
       this.onPlay(this.bigPlayButtonsOnPlay);
       this.onEnded(this.bigPlayButtonsOnEnded);
     }
-    this.elements.bigPlayButtons.push(element);
+    this.bigPlayButtons.push(element);
     this.activateElement(element, "playButton");
   },{
     bigPlayButtonsOnPlay: function(event){ this.hideBigPlayButtons(); },
     bigPlayButtonsOnEnded: function(event){ this.showBigPlayButtons(); },
-    showBigPlayButtons: function(){ 
+    showBigPlayButtons: function(){
-      this.each(this.elements.bigPlayButtons, function(element){
+      this.each(this.bigPlayButtons, function(element){
         element.style.display = "block"; 
       });
     },
-    hideBigPlayButtons: function(){ 
+    hideBigPlayButtons: function(){
-      this.each(this.elements.bigPlayButtons, function(element){
+      console.log(this.bigPlayButtons)
+      this.each(this.bigPlayButtons, function(element){
         element.style.display = "none"; 
       });
     }
@@ -556,11 +558,11 @@ VideoJS.player.newBehavior("spinner", function(element){
 /* Subtitles
 ================================================================================ */
 VideoJS.player.newBehavior("subtitlesDisplay", function(element){
-    if (!this.elements.subtitlesDisplays) { 
+    if (!this.subtitlesDisplays) { 
-      this.elements.subtitlesDisplays = [];
+      this.subtitlesDisplays = [];
       _V_.addListener(this.video, "timeupdate", this.subtitlesDisplaysOnVideoTimeUpdate.context(this));
     }
-    this.elements.subtitlesDisplays.push(element);
+    this.subtitlesDisplays.push(element);
   },{
     subtitlesDisplaysOnVideoTimeUpdate: function(){
       // show the subtitles
@@ -586,7 +588,7 @@ VideoJS.player.newBehavior("subtitlesDisplay", function(element){
       }
     },
     updateSubtitlesDisplays: function(val){
-      this.each(this.elements.subtitlesDisplays, function(disp){
+      this.each(this.subtitlesDisplays, function(disp){
         disp.innerHTML = val;
       });
     }

dev/src/video.js

@@ -68,6 +68,7 @@ var VideoJS = JRClass.extend({
     this.extend(functions);
   },
   activateElement: function(element, behavior){
+    // if (behavior == "bigPlayButton") { console.log(this.video.id) }
     this.behaviors[behavior].call(this, element);
   },
   /* Errors/Warnings

dev/test.html

@@ -13,49 +13,50 @@
   <!-- <script src="flowplayer/video-js.flowplayer.js" type="text/javascript" charset="utf-8"></script> -->
 
   <script type="text/javascript">
+    VideoJS.setupAllWhenReady();
     VideoJS.DOMReady(function(){
-      myPlayer = VideoJS.setup("example_video_1", { 
+      // myPlayer = VideoJS.setup("example_video_1", { 
-        // controlsHiding: true, 
+      //         // controlsHiding: true, 
-        // controlsBelow: false, 
+      //         // controlsBelow: false, 
-        // showControlsAtStart: true
+      //         // showControlsAtStart: true
-      });
+      //       });
-      myPlayer.activateElement(document.getElementById("scrub"), "playProgressBar");
+      //       myPlayer.activateElement(document.getElementById("scrub"), "playProgressBar");
-      var vid = document.getElementById("example_video_1"),
+      //       var vid = document.getElementById("example_video_1"),
-          attrTable = document.getElementById("attributes"),
+      //           attrTable = document.getElementById("attributes"),
-          attrNames = ["error", "networkState", "readyState", "preload", "buffered",
+      //           attrNames = ["error", "networkState", "readyState", "preload", "buffered",
-            "seeking", "currentTime", "initialTime", "duration", "startOffsetTime",
+      //             "seeking", "currentTime", "initialTime", "duration", "startOffsetTime",
-            "paused", "defaultPlaybackRate", "playbackRate", "played", "seekable",
+      //             "paused", "defaultPlaybackRate", "playbackRate", "played", "seekable",
-            "ended", "autoplay", "loop", "controls", "volume", "muted", "tracks"
+      //             "ended", "autoplay", "loop", "controls", "volume", "muted", "tracks"
-          ],
+      //           ],
-          attrs = {};
+      //           attrs = {};
-
+      // 
-      for(var i=0,j=attrNames.length; i<j; i++) {
+      //       for(var i=0,j=attrNames.length; i<j; i++) {
-        var row = _V_.createElement("tr");
+      //         var row = _V_.createElement("tr");
-        var th = _V_.createElement("th"); 
+      //         var th = _V_.createElement("th"); 
-        th.innerHTML = attrNames[i];
+      //         th.innerHTML = attrNames[i];
-        attrs[attrNames[i]] = _V_.createElement("td", { id: attrNames[i] });
+      //         attrs[attrNames[i]] = _V_.createElement("td", { id: attrNames[i] });
-        row.appendChild(th); row.appendChild(attrs[attrNames[i]]);
+      //         row.appendChild(th); row.appendChild(attrs[attrNames[i]]);
-        attrTable.appendChild(row);
+      //         attrTable.appendChild(row);
-      }
+      //       }
-      
+      //       
-      setInterval(function(){
+      //       setInterval(function(){
-        for(var i=0,j=attrNames.length; i<j; i++) {
+      //         for(var i=0,j=attrNames.length; i<j; i++) {
-          attrs[attrNames[i]].innerHTML = vid[attrNames[i]];
+      //           attrs[attrNames[i]].innerHTML = vid[attrNames[i]];
-        }
+      //         }
-      }, 100);
+      //       }, 100);
-      
+      //       
-      var events = ["loadstart","progress","suspend","abort","error","emptied","stalled","play","pause",
+      //       var events = ["loadstart","progress","suspend","abort","error","emptied","stalled","play","pause",
-        "loadedmetadata", "loadeddata", "waiting", "playing", "canplay", "canplaythrough", "seeking", "seeked",
+      //         "loadedmetadata", "loadeddata", "waiting", "playing", "canplay", "canplaythrough", "seeking", "seeked",
-        // "timeupdate",
+      //         // "timeupdate",
-        "ended", "ratechange", "durationchange","volumechange"
+      //         "ended", "ratechange", "durationchange","volumechange"
-      ],
+      //       ],
-      eventsList = document.getElementById("events");
+      //       eventsList = document.getElementById("events");
-      
+      //       
-      for(var i=0,j=events.length; i<j; i++) {
+      //       for(var i=0,j=events.length; i<j; i++) {
-        _V_.addListener(vid, events[i], function(){
+      //         _V_.addListener(vid, events[i], function(){
-          eventsList.innerHTML = this + "\n" + eventsList.innerHTML
+      //           eventsList.innerHTML = this + "\n" + eventsList.innerHTML
-        }.context(events[i]));
+      //         }.context(events[i]));
-      }
+      //       }
       
     });
 
@@ -82,7 +83,36 @@
     <video data-subtitles="../demo-subtitles.srt" id="example_video_1" class="video-js" width="640" height="264" controls="controls" preload="none" poster="http://video-js.zencoder.com/oceans-clip.png">
       <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
       <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
-      <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' /> -->
+      <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
+      <!-- <track kind="subtitles" src="../demo-subtitles.srt" srclang="en-US" label="English"></track> -->
+      <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
+      <object id="flash_fallback_1" class="vjs-flash-fallback" 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" />
+        <param name="allowfullscreen" value="true" />
+        <param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
+        <!-- Image Fallback. Typically the same as the poster image. -->
+        <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
+          title="No video playback capabilities." />
+      </object>
+    </video>
+    <!-- Download links provided for devices that can't play video in the browser. -->
+    <p class="vjs-no-video"><strong>Download Video:</strong>
+      <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
+      <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
+      <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
+      <!-- Support VideoJS by keeping this link. -->
+      <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
+    </p>
+  </div>
+  <!-- End VideoJS -->
+  
+  <div class="video-js-box">
+    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
+    <video data-subtitles="../demo-subtitles.srt" id="example_video_2" class="video-js" width="640" height="264" controls="controls" preload="none" poster="http://video-js.zencoder.com/oceans-clip.png">
+      <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
+      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
+      <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
       <!-- <track kind="subtitles" src="../demo-subtitles.srt" srclang="en-US" label="English"></track> -->
       <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
       <object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"

video.js

@@ -217,7 +217,7 @@ VideoJS.flashPlayers.htmlObject = {
         this.triggerResizeListeners();
         return this;
       }
-      return this.element.offsetWidth;
+      return this.element.width;
     },
     height: function(height){
       if (height !== undefined) {
@@ -226,7 +226,7 @@ VideoJS.flashPlayers.htmlObject = {
         this.triggerResizeListeners();
         return this;
       }
-      return this.element.offsetHeight;
+      return this.element.height;
     }
   }
 };
@@ -822,8 +822,9 @@ VideoJS.player.extend({
       this.values.bufferStart = 0;
       this.values.bufferEnd = 0;
     }
-    if (this.video.buffered && this.video.buffered.length > 0 && this.video.buffered.end(0) > this.values.bufferEnd) {
+    if (this.video.buffered && this.video.buffered.length > 0) {
-      this.values.bufferEnd = this.video.buffered.end(0);
+      var newEnd = this.video.buffered.end(0);
+      if (newEnd > this.values.bufferEnd) { this.values.bufferEnd = newEnd; }
     }
     return [this.values.bufferStart, this.values.bufferEnd];
   },
@@ -894,17 +895,20 @@ VideoJS.player.newBehavior("player", function(player){
     this.onError(this.playerOnVideoError);
     // Listen for when the video is played
     this.onPlay(this.playerOnVideoPlay);
+    this.onPlay(this.trackCurrentTime);
     // Listen for when the video is paused
     this.onPause(this.playerOnVideoPause);
+    this.onPause(this.stopTrackingCurrentTime);
     // Listen for when the video ends
     this.onEnded(this.playerOnVideoEnded);
     // Set interval for load progress using buffer watching method
-    this.trackCurrentTime();
+    // this.trackCurrentTime();
     this.trackBuffered();
     // Buffer Full
     this.onBufferedUpdate(this.isBufferFull);
   },{
-    playerOnVideoError: function(event){ 
+    playerOnVideoError: function(event){
+      this.log(event);
       this.log(this.video.error);
     },
     playerOnVideoPlay: function(event){ this.hasPlayed = true; },
@@ -918,7 +922,7 @@ VideoJS.player.newBehavior("player", function(player){
     // Buffer watching method for load progress.
     // Used for browsers that don't support the progress event
     trackBuffered: function(){
-      this.bufferedInterval = setInterval(this.triggerBufferedListeners.context(this), 200);
+      this.bufferedInterval = setInterval(this.triggerBufferedListeners.context(this), 500);
     },
     stopTrackingBuffered: function(){ clearInterval(this.bufferedInterval); },
     bufferedListeners: [],