Merge branch 'release/baxter' into stable

videojs · Mar 20, 2012 · 352bd38 · 352bd38
2 parents c4fbc91 + 8e50338
commit 352bd38
Show file tree

Hide file tree

Showing 22 changed files with 2,191 additions and 616 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -36,3 +36,14 @@ CHANGELOG
 * Fixed CDN Version which was breaking dev.html
 * Made full-window mode more independent
 * Added rakefile for release generation
+
+---- 3.2.0 / 2012-03-20 / baxter -----------------------------------------------
+* Updated docs with more options.
+* Overhauled HTML5 Track support.
+* Fixed Flash always autoplaying when setting source.
+* Fixed localStorage context
+* Updated 'fullscreenchange' event to be called even if the user presses escape to exit fullscreen.
+* Automatically converting URsource URL to absolute for Flash fallback.
+* Created new 'loadedalldata' event for when  the source is completely downloaded
+* Improved player.destory(). Now removes elements and references.
+* Refactored API to be more immediately available.
diff --git a/Rakefile b/Rakefile
@@ -21,6 +21,7 @@ namespace :build do
       Rake::Shell["cp dist/video-js.swf dist/#{vsn}/video-js.swf"]
       Rake::Shell["cp dist/video-js.png dist/#{vsn}/video-js.png"]
       Rake::Shell["cp dist/demo.html dist/#{vsn}/demo.html"]
+      Rake::Shell["cp dist/captions.vtt dist/#{vsn}/captions.vtt"]
     end
 
     Rake::Shell["mkdir dist/video-js"]
@@ -38,6 +39,7 @@ namespace :build do
     Rake::Shell["cp dist/video-js.swf dist/video-js/video-js.swf"]
     Rake::Shell["cp dist/video-js.png dist/video-js/video-js.png"]
     Rake::Shell["cp dist/demo.html dist/video-js/demo.html"]
+    Rake::Shell["cp dist/captions.vtt dist/video-js/captions.vtt"]
 
     Rake::Shell["cd dist && zip -r video-js-#{version_number}.zip video-js && cd .."]
 
@@ -94,6 +96,7 @@ namespace :build do
 
     Rake::Shell["cp build/release-files/README.md dist/README.md"]
     Rake::Shell["cp build/release-files/demo.html dist/demo.html"]
+    Rake::Shell["cp build/release-files/captions.vtt dist/captions.vtt"]
     Rake::Shell["cp LGPLv3-LICENSE.txt dist/LGPLv3-LICENSE.txt"]
 
     Rake::Log["Minimizing JavaScript"]
@@ -135,6 +138,39 @@ namespace :build do
 
     end
   end
+
+  desc "Build list of source files for easy inclusion in projects"
+  task :source_html do
+
+    File.open("dev/source-list.html", "w+") do |file|
+      file.puts "<!-- Video.js Source Files -->"
+
+      src_array = ["src/core", "src/lib"]
+      last = ["src/setup"] # "flash/swfobject", 
+      exclude = [".", "..", ".DS_Store", "_end.js", "_begin.js"]
+
+      Dir.foreach('src') do |item|
+        next if exclude.include? item
+
+        item_name = "src/" << item.sub(".js", "")
+
+        next if (src_array + last).include? item_name
+
+        src_array << item_name
+      end
+
+      src_array = src_array + last
+
+      src_array.each do |item|
+        file.puts "<script src='#{item}.js'></script>"
+      end
+      # file.puts "vjsSourceList.push('src/#{item.sub(".js", "")}')"
+      # file.puts "vjsSourceList.push('flash/swfobject.js')"
+
+      file.puts "<!-- END Video.js Source Files -->"
+
+    end
+  end
 
 end
 

diff --git a/VERSION.yml b/VERSION.yml
@@ -1,4 +1,4 @@
 --- 
 major: 3
 patch: 0
-minor: 1
+minor: 2
diff --git a/build/release-files/captions.vtt b/build/release-files/captions.vtt
@@ -0,0 +1,41 @@
+WEBVTT
+
+00:00.700 --> 00:04.110
+Captions describe all relevant audio for the hearing impaired.
+[ Heroic music playing for a seagull ]
+
+00:04.500 --> 00:05.000
+[ Splash!!! ]
+
+00:05.100 --> 00:06.000
+[ Sploosh!!! ]
+
+00:08.000 --> 00:09.225
+[ Splash...splash...splash splash splash ]
+
+00:10.525 --> 00:11.255
+[ Splash, Sploosh again ]
+
+00:13.500 --> 00:14.984
+Dolphin: eeeEEEEEeeee!
+
+00:14.984 --> 00:16.984
+Dolphin: Squawk! eeeEEE?
+
+00:25.000 --> 00:28.284
+[ A whole ton of splashes ]
+
+00:29.500 --> 00:31.000
+Mine. Mine. Mine.
+
+00:34.300 --> 00:36.000
+Shark: Chomp
+
+00:36.800 --> 00:37.900
+Shark: CHOMP!!!
+
+00:37.861 --> 00:41.193
+EEEEEEOOOOOOOOOOWHALENOISE
+
+00:42.593 --> 00:45.611
+[ BIG SPLASH ]
diff --git a/build/release-files/demo.html b/build/release-files/demo.html
@@ -3,10 +3,16 @@
 <head>
   <title>Video.js | HTML5 Video Player</title>
 
-  <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet" type="text/css">
-
+  <!-- Chang URLs to wherever Video.js files will be hosted -->
+  <link href="video-js.css" rel="stylesheet" type="text/css">
   <!-- video.js must be in the <head> for older IEs to work. -->
-  <script src="http://vjs.zencdn.net/c/video.js"></script>
+  <script src="video.js"></script>
+
+  <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
+  <script>
+    _V_.options.flash.swf = "video-js.swf";
+  </script>
+
 
 </head>
 <body>
@@ -17,6 +23,7 @@
     <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
     <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
     <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
+    <track kind="captions" src="captions.vtt" srclang="en" label="English" />
   </video>
 
 </body>

diff --git a/design/video-js.css b/design/video-js.css
@@ -48,17 +48,27 @@ body.vjs-full-window {
   margin: 0 auto; padding: 0; cursor: pointer;
 
   /* Scale with the size of the player div. Works when poster is vertically shorter, but stretches when it's less wide. */
-  position: relative; width: 100%; max-height: 100%; 
+  position: relative; width: 100%; max-height: 100%;
 }
 
-/* Subtiles Styles */
-.video-js .vjs-subtitles { color: #fff; font-size: 20px; text-align: center; position: absolute; bottom: 40px; left: 0; right: 0; }
+/* Text Track Styles */
+/* Overall track holder for both captions and subtitles */
+.video-js .vjs-text-track-display { text-align: center; position: absolute; bottom: 4em; left: 1em; right: 1em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
+/* Individual tracks */
+.video-js .vjs-text-track {
+  display: none; color: #fff; font-size: 1.4em; text-align: center; margin-bottom: 0.1em;
+  /* Transparent black background, or fallback to all black (IE6) */
+  background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50);
+}
+.video-js .vjs-subtitles { color: #fff; }
+.video-js .vjs-captions { color: #fc6; }
+.vjs-tt-cue { display: block; }
 
 /* Fading sytles, used to fade control bar. */
 .vjs-fade-in {
   visibility: visible !important; /* Needed to make sure things hide in older browsers too. */
   opacity: 1 !important;
-  
+
   -webkit-transition: visibility 0s linear 0s, opacity 0.3s linear;
   -moz-transition: visibility 0s linear 0s, opacity 0.3s linear;
   -ms-transition: visibility 0s linear 0s, opacity 0.3s linear;
@@ -116,7 +126,8 @@ so you can upgrade to newer versions easier. You can remove all these styles by
 }
 
 .vjs-default-skin .vjs-control:focus {
-  outline: 0;
+  outline: 1;
+/*  background-color: #555;*/
 }
 
 /* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
@@ -319,8 +330,8 @@ so you can upgrade to newer versions easier. You can remove all these styles by
 ---------------------------------------------------------*/
 .vjs-default-skin .vjs-big-play-button {
   display: block; /* Start hidden */ z-index: 2;
-  position: absolute; top: 50%; left: 50%; width: 8.0em; height: 8.0em; margin: -43px 0 0 -43px; text-align: center; vertical-align: center; cursor: pointer !important;
-  border: 0.3em solid #fff; opacity: 0.95;
+  position: absolute; top: 50%; left: 50%; width: 8.0em; height: 8.0em; margin: -42px 0 0 -42px; text-align: center; vertical-align: center; cursor: pointer !important;
+  border: 0.2em solid #fff; opacity: 0.95;
   -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;
 
   background: #454545;
@@ -424,4 +435,65 @@ div.vjs-loading-spinner .ball7 { opacity: 0.87; position:absolute; left: 0px; to
   border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
 
 div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; top: 6px; width: 13px; height: 13px; background: #fff;
-  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
+  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
+
+/* Menu Buttons (Captions/Subtitles/etc.)
+-------------------------------------------------------------------------------- */
+.vjs-default-skin .vjs-menu-button {
+  float: right; margin: 0.2em 0.5em 0 0; padding: 0; width: 3em; height: 2em; cursor: pointer !important;
+
+  border: 1px solid #111; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
+
+  background: #4d4d4d;
+  background: -moz-linear-gradient(top,  #4d4d4d 0%, #3f3f3f 50%, #333333 50%, #252525 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(50%,#3f3f3f), color-stop(50%,#333333), color-stop(100%,#252525));
+  background: -webkit-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
+  background: -o-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
+  background: -ms-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
+  background: linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
+}
+/* Button Icon */
+.vjs-default-skin .vjs-menu-button div { background: url('video-js.png') 0px -75px no-repeat; width: 16px; height: 16px; margin: 0.2em auto 0; padding: 0; }
+
+/* Button Pop-up Menu */
+.vjs-default-skin .vjs-menu-button ul {
+  display: none; /* Start hidden. Hover will show. */
+  opacity: 0.8;
+  padding: 0; margin: 0;
+  position: absolute; width: 10em; bottom: 2em; max-height: 15em;
+  left: -3.5em; /* Width of menu - width of button / 2 */
+  background-color: #111;
+  border: 2px solid #333;
+  -moz-border-radius: 0.7em; -webkit-border-radius: 1em; border-radius: .5em;
+  -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
+  overflow: auto;
+}
+
+.vjs-default-skin .vjs-menu-button:focus ul,
+.vjs-default-skin .vjs-menu-button:hover ul { display: block; list-style: none; }
+.vjs-default-skin .vjs-menu-button ul li { list-style: none; margin: 0; padding: 0.3em 0 0.3em 20px; line-height: 1.4em; font-size: 1.2em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: left; }
+.vjs-default-skin .vjs-menu-button ul li.vjs-selected { text-decoration: underline; background: url('video-js.png') -125px -50px no-repeat; }
+.vjs-default-skin .vjs-menu-button ul li:focus,
+.vjs-default-skin .vjs-menu-button ul li:hover,
+.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
+.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover { background-color: #ccc; color: #111; outline: 0; }
+.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
+  text-align: center; text-transform: uppercase; font-size: 1em; line-height: 2em; padding: 0; margin: 0 0 0.3em 0;
+
+  color: #fff; font-weight: bold;
+
+  cursor: default;
+
+  background: #4d4d4d;
+  background: -moz-linear-gradient(top,  #4d4d4d 0%, #3f3f3f 50%, #333333 50%, #252525 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(50%,#3f3f3f), color-stop(50%,#333333), color-stop(100%,#252525));
+  background: -webkit-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
+  background: -o-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
+  background: -ms-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
+  background: linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
+}
+
+/* Subtitles Button */
+.vjs-default-skin .vjs-captions-button div { background-position: -25px -75px; }
+.vjs-default-skin .vjs-chapters-button div { background-position: -100px -75px; }
+.vjs-default-skin .vjs-chapters-button ul { width: 20em; left: -8.5em; /* Width of menu - width of button / 2 */ }
diff --git a/design/video-js.png b/design/video-js.png
diff --git a/dev/source-list.html b/dev/source-list.html
@@ -0,0 +1,13 @@
+<!-- Video.js Source Files -->
+<script src='src/core.js'></script>
+<script src='src/lib.js'></script>
+<script src='src/component.js'></script>
+<script src='src/controls.js'></script>
+<script src='src/ecma.js'></script>
+<script src='src/events.js'></script>
+<script src='src/json.js'></script>
+<script src='src/player.js'></script>
+<script src='src/tech.js'></script>
+<script src='src/tracks.js'></script>
+<script src='src/setup.js'></script>
+<!-- END Video.js Source Files -->