Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

MAJOR REFACTOR: Restrcutured code into class-based components. Setup …

…and configuring should still work the same, but controls and tech elements are now sub-classes for Component, which builds elements and applies event behaviors.

Removed demo source code from repository root. Was receiving pull requests for the release files instead of source files. This makes it more clear where to make changes.
  • Loading branch information...
commit ef321a807237ee512af0ec3ab16d6b9e378b7b37 1 parent a314c0a
@heff heff authored
Showing with 2,315 additions and 6,436 deletions.
  1. +10 −138 README.md
  2. +41 −0 build.sh
  3. 0  {dev → }/build/Create Release Notes.md
  4. +9 −8 {dev → }/build/combine_sources.sh
  5. +153 −0 build/files/README.md
  6. 0  { → build/files}/demo.html
  7. 0  {dev → }/compare/compare.css
  8. +4 −2 {dev → }/compare/compare.html
  9. +2 −2 {dev → }/compare/compare.js
  10. 0  {dev → }/decisions.txt
  11. 0  {dev → }/demo-subtitles.srt
  12. 0  {dev → }/design/Icon Design.png
  13. 0  {dev → }/design/skin.old.css
  14. 0  {dev → }/design/video-js.css
  15. 0  { → design}/video-js.png
  16. +6 −28 {dev → }/dev.html
  17. BIN  dev/design/video-js.png
  18. +0 −298 dev/src/api.js
  19. +0 −37 dev/src/autoload.js
  20. +0 −312 dev/src/behaviors/behaviors.js
  21. +0 −216 dev/src/behaviors/seekBar.js
  22. +0 −43 dev/src/behaviors/texttrackdisplays.js
  23. +0 −177 dev/src/behaviors/volume.js
  24. +0 −153 dev/src/controls/bar.js
  25. +0 −52 dev/src/controls/bigPlay.js
  26. +0 −157 dev/src/controls/controls.html
  27. +0 −134 dev/src/controls/main.js
  28. +0 −22 dev/src/controls/subtitlesBox.js
  29. +0 −451 dev/src/core.js
  30. +0 −15 dev/src/log.js
  31. +0 −153 dev/src/tech/h5swf.js
  32. +0 −170 dev/src/tech/html5.js
  33. +0 −262 dev/src/ui.js
  34. 0  {dev → }/flash/swfobject.js
  35. 0  dev/flash/VideoJS.swf → flash/video-js.swf
  36. 0  {dev → }/src/_begin.js
  37. +3 −0  {dev → }/src/_end.js
  38. +183 −0 src/component.js
  39. +725 −0 src/controls.js
  40. +146 −0 src/core.js
  41. 0  {dev → }/src/ecma.js
  42. +1 −1  {dev → }/src/events.js
  43. 0  {dev → }/src/json.js
  44. +37 −13 {dev → }/src/lib.js
  45. +607 −0 src/player.js
  46. +382 −0 src/tech.js
  47. +2 −1  {dev → }/src/tracks.js
  48. +2 −0  {dev/src → }/tech/flowplayer.js
  49. 0  {dev/src → }/tech/youtube.html
  50. +2 −0  {dev/src → }/tech/youtube.js
  51. 0  {dev → }/test/qunit/.gitignore
  52. 0  {dev → }/test/qunit/README.md
  53. 0  {dev → }/test/qunit/addons/canvas/README.md
  54. 0  {dev → }/test/qunit/addons/canvas/canvas-test.js
  55. 0  {dev → }/test/qunit/addons/canvas/canvas.html
  56. 0  {dev → }/test/qunit/addons/canvas/qunit-canvas.js
  57. 0  {dev → }/test/qunit/addons/close-enough/README.md
  58. 0  {dev → }/test/qunit/addons/close-enough/close-enough-test.js
  59. 0  {dev → }/test/qunit/addons/close-enough/close-enough.html
  60. 0  {dev → }/test/qunit/addons/close-enough/qunit-close-enough.js
  61. 0  {dev → }/test/qunit/addons/composite/README.md
  62. 0  {dev → }/test/qunit/addons/composite/composite-demo-test.html
  63. 0  {dev → }/test/qunit/addons/composite/composite-test.html
  64. 0  {dev → }/test/qunit/addons/composite/composite-test.js
  65. 0  {dev → }/test/qunit/addons/composite/dummy-qunit-test.html
  66. 0  {dev → }/test/qunit/addons/composite/dummy-same-test.html
  67. 0  {dev → }/test/qunit/addons/composite/index.html
  68. 0  {dev → }/test/qunit/addons/composite/qunit-composite.css
  69. 0  {dev → }/test/qunit/addons/composite/qunit-composite.js
  70. 0  {dev → }/test/qunit/addons/step/README.md
  71. 0  {dev → }/test/qunit/addons/step/qunit-step.js
  72. 0  {dev → }/test/qunit/addons/step/step-test.js
  73. 0  {dev → }/test/qunit/addons/step/step.html
  74. 0  {dev → }/test/qunit/package.json
  75. 0  {dev → }/test/qunit/qunit/qunit.css
  76. 0  {dev → }/test/qunit/qunit/qunit.js
  77. 0  {dev → }/test/qunit/test/headless.html
  78. 0  {dev → }/test/qunit/test/index.html
  79. 0  {dev → }/test/qunit/test/logs.html
  80. 0  {dev → }/test/qunit/test/logs.js
  81. 0  {dev → }/test/qunit/test/same.js
  82. 0  {dev → }/test/qunit/test/test.js
  83. 0  {dev → }/test/test.html
  84. 0  {dev → }/test/test.js
  85. +0 −307 video-js.css
  86. BIN  video-js.swf
  87. +0 −3,284 video.js
View
148 README.md
@@ -2,6 +2,16 @@ VideoJS - [HTML5 Video Player](http://videojs.com)
==================================================
Version 3.0 BETA
+Visit the main site at [videojs.com](http://videojs.com) for download options and instructions.
+
+To build video-js from the latest version of the source, clone the source repository and run:
+sh build.sh
+in the video-js directory using the commnand-line/terminal of a unix-based system.
+
+Contributing
+------------
+You can use dev.html to test new code. It's simple HTML doc that includes all the source files. Send a pull request for any updates.
+
---
BETA NOTES
Version 3 is almost a complete rewrite of the previous versions of VideoJS. New features includes:
@@ -13,141 +23,3 @@ Version 3 is almost a complete rewrite of the previous versions of VideoJS. New
- No more embedding of Flash fallback within the video tag HTML.
---
-
-View [VideoJS.com](http://videojs.com) for a demo and overview.
-
-VideoJS is an HTML5 video player that uses the HTML5 video tag built into modern browsers, and uses javascript to add custom controls, new functionality, and to fix cross browser bugs. For browsers that don't support HTML5, it will fallback to a Flash player.
-
-View demo.html for an example of how to use it.
-
-Originally based on [this tutorial](http://blog.steveheffernan.com/2010/04/how-to-build-an-html5-video-player/).
-
-Contributors (Github Username)
-------------------------------
-heff, dz0ny, sentientbit, tvdeyen, brandonarbini, gordonbrander, Shraymonks, albertogasparin, sandaru1, nicholasbs, majornista, Fredust85, @wonderboymusic, ellis-, emirpprime, eirikb, mbrubeck
-
-
-Getting Started
----------------
-
-### Step 1: Include the VideoJS Javascript and CSS files in the head of your page.
-Change the file urls to point to the files on your server.
-
- <script src="video.js"></script>
- <link href="video-js.css" rel="stylesheet">
-
-
-### Step 2: Add an HTML5 video tag to your page.
-Use the video tag as normal, with a few extra pieces for VideoJS:
-
- 1. The 'data-setup' Atrribute tells VideoJS to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute.
- 2. The 'id' Attribute: Should be used and unique for every video on the same page.
- 3. The 'class' attribute contains two classes:
- - 'video-js' applies styles that are required for VideoJS functionality, like fullscreen and subtitles.
- - 'vjs-default-skin' applies the default skin to the HTML controls, and can be removed or overridden to create your own controls design.
-
-Otherwise include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video.
-
- <video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
- poster="http://video-js.zencoder.com/oceans-clip.png"
- data-setup='{"example_option":true}'>
- <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' />
- </video>
-
-
-### Step 3: Nada!
-That's all it take to get started. See the docs for more advanced uses.
-
-
-Coming Next
------------
-- Stable Release
-
-Changelog
----------
-3.0b
-
-- Complete rewrite in progress
-
-2.0.3
-
-- Feature: Made returning to the start at the end of the movie an option ("returnToStart").
-- Feature: Added loop option to loop movie ("loop").
-- Feature: Reorganized player API and listeners.
-- Feature: Added option to disable controls. controlsEnabled: false
-- Feature: Setup method now has a callback, so you can more easily work with the player after setup
-- Feature: Added listeners for enter/exit full screen/window.
-- Feature: Added a VideoJS.player(id) function for getting the player for a video ID
-- Changes: setupAllWhenReady is now just setupAll (backward compatible)
-- Fix: Check for Android browser now excludes firefox and opera
-
-2.0.2 (2010-12-10)
-
-- Feature: Rewrote and optimized subtitle code.
-- Feature: Protecting against volume ranges outside of 1 and 0.
-- Fix: Bug in Safari for Mac OS 10.5 (Leopard) that was breaking fullscreen.
-
-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.
-
-2.0.0 (2010-11-21)
-
-- Feature: Created "behaviors" concept for adding behaviors to elements
-- Feature: Switched back to divs for controls, for more portable styles
-- Feature: Created playerFallbackOrder array option. ["html5", "flash", "links"]
-- Feature: Created playerType concept, for initializing different platforms
-- Feature: Added play button for Android
-- Feature: Added spinner for iPad (non-fullscreen)
-- Feature: Split into multiple files for easier development
-- Feature: Combined VideoJS & _V_ into the same variable to reduce confusion
-- Fix: Checking for m3u8 files (Apple HTTP Streaming)
-- Fix: Catching error on localStorage full that safari seems to randomly throw
-- Fix: Scrubbing to end doesn't trigger onEnded
-
-1.1.5 (2010-11-09)
-
-- Feature: Switched to track method for setting subtitles. Now works like spec.
-- Feature: Created "players" concept for defining fallbacks and fallback order
-- Fix: Android playback bug.
-- Fix: Massive reorganization of code to make easier to navigate
-
-1.1.4 (2010-11-06)
-
-- Feature: Added loading spinner.
-- Feature: Improved styles loaded checking.
-- Feature: Added volume() function to get and set volume through the player.
-- Fix: Fix issue where FF would loop video in background when ended.
-- Fix: Bug in Chrome that shows poster & plays audio if you set currentTime too quickly.
-- Fix: Bug in Safari where waiting is triggered and shows spinner when not needed
-- Fix: Updated to show links if only unplayable sources and no Flash.
-- Fix: Issue where if play button was loaded after play, it wouldn't hide.
-
-1.1.3 (2010-10-19)
-
-- Feature: Width/Height functions for resizing the player
-- Feature: Made initial click & hold trigger new value on progress and volume
-- Feature: Made controls not hide when hovering over them
-- Feature: Added big play button as default starting control.
-- Fix: Removed trailing comma that was breaking IE7
-- Fix: Removed some vars from global scope
-- Fix: Changed a document.onmousemove to an eventListener to prevent conflicts
-- Fix: Added a unique ID to FlowPlayer demo object to fix a FlowPlayer bug. Thanks @emirpprime.
-- Fix: Safari error on unloaded video
-
-1.1.2 (2010-09-20)
-
-- Added a fix for the poster bug in iPad/iPhone
-- Added more specificity to styles
-
-1.1.1 (2010-09-14)
-
-- First Formally Versioned Release
-
-1.0.0 (2010-05-18)
-
-- First released
View
41 build.sh
@@ -0,0 +1,41 @@
+#! /bin/csh
+# Combines Source Files. In terminal, sh build.sh
+# It will put a new video.js file under dist/
+
+# FILES=../src/*
+# for f in $FILES
+# do
+# echo "Processing $f file..."
+# # take action on each file. $f store current file name
+# cat $f
+# done
+
+cat src/_begin.js > dist/video.js
+
+cat src/core.js >> dist/video.js
+cat src/lib.js >> dist/video.js
+cat src/ecma.js >> dist/video.js
+cat src/json.js >> dist/video.js
+cat src/events.js >> dist/video.js
+
+cat src/component.js >> dist/video.js
+cat src/player.js >> dist/video.js
+cat src/tech.js >> dist/video.js
+cat src/controls.js >> dist/video.js
+
+cat src/tracks.js >> dist/video.js
+
+# h5swf temporarily requires swfobject
+cat flash/swfobject.js >> dist/video.js
+
+cat src/_end.js >> dist/video.js
+
+
+# Copy Files
+cp design/video-js.css dist/video-js.css
+cp design/video-js.png dist/video-js.png
+cp flash/video-js.swf dist/video-js.swf
+
+cp build/files/README.md dist/README.md
+cp build/files/demo.html dist/demo.html
+cp LICENSE.txt dist/LICENSE.txt
View
0  dev/build/Create Release Notes.md → build/Create Release Notes.md
File renamed without changes
View
17 dev/build/combine_sources.sh → build/combine_sources.sh
@@ -2,6 +2,14 @@
# Combines Source Files. In terminal, sh combine_sources.sh
# It will put a new video.js file under dist/
+# FILES=../src/*
+# for f in $FILES
+# do
+# echo "Processing $f file..."
+# # take action on each file. $f store current file name
+# cat $f
+# done
+
cat ../src/_begin.js > ../dist/video.js
cat ../src/core.js >> ../dist/video.js
@@ -24,14 +32,7 @@ cat ../flash/swfobject.js >> ../dist/video.js
# So does Youtube
cat ../src/tech/youtube.js >> ../dist/video.js
-cat ../src/behaviors/behaviors.js >> ../dist/video.js
-cat ../src/behaviors/seekBar.js >> ../dist/video.js
-cat ../src/behaviors/texttrackdisplays.js >> ../dist/video.js
-cat ../src/behaviors/volume.js >> ../dist/video.js
-
-cat ../src/controls/bar.js >> ../dist/video.js
-cat ../src/controls/bigPlay.js >> ../dist/video.js
-cat ../src/controls/subtitlesBox.js >> ../dist/video.js
+cat ../src/components.js >> ../dist/video.js
cat ../src/autoload.js >> ../dist/video.js
View
153 build/files/README.md
@@ -0,0 +1,153 @@
+VideoJS - [HTML5 Video Player](http://videojs.com)
+==================================================
+Version 3.0 BETA
+
+---
+BETA NOTES
+Version 3 is almost a complete rewrite of the previous versions of VideoJS. New features includes:
+
+ - HTML/CSS Controls and API now work for both the HTML5 and Flash versions.
+ - Custom Super-lightweight Flash Fallback
+ - Embed Code is much simpler.
+ - No more "vjs-box" div required, just use the video tag.
+ - No more embedding of Flash fallback within the video tag HTML.
+
+---
+
+View [VideoJS.com](http://videojs.com) for a demo and overview.
+
+VideoJS is an HTML5 video player that uses the HTML5 video tag built into modern browsers, and uses javascript to add custom controls, new functionality, and to fix cross browser bugs. For browsers that don't support HTML5, it will fallback to a Flash player.
+
+View demo.html for an example of how to use it.
+
+Originally based on [this tutorial](http://blog.steveheffernan.com/2010/04/how-to-build-an-html5-video-player/).
+
+Contributors (Github Username)
+------------------------------
+heff, dz0ny, sentientbit, tvdeyen, brandonarbini, gordonbrander, Shraymonks, albertogasparin, sandaru1, nicholasbs, majornista, Fredust85, @wonderboymusic, ellis-, emirpprime, eirikb, mbrubeck
+
+
+Getting Started
+---------------
+
+### Step 1: Include the VideoJS Javascript and CSS files in the head of your page.
+Change the file urls to point to the files on your server.
+
+ <script src="video.js"></script>
+ <link href="video-js.css" rel="stylesheet">
+
+
+### Step 2: Add an HTML5 video tag to your page.
+Use the video tag as normal, with a few extra pieces for VideoJS:
+
+ 1. The 'data-setup' Atrribute tells VideoJS to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute.
+ 2. The 'id' Attribute: Should be used and unique for every video on the same page.
+ 3. The 'class' attribute contains two classes:
+ - 'video-js' applies styles that are required for VideoJS functionality, like fullscreen and subtitles.
+ - 'vjs-default-skin' applies the default skin to the HTML controls, and can be removed or overridden to create your own controls design.
+
+Otherwise include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video.
+
+ <video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
+ poster="http://video-js.zencoder.com/oceans-clip.png"
+ data-setup='{"example_option":true}'>
+ <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' />
+ </video>
+
+
+### Step 3: Nada!
+That's all it take to get started. See the docs for more advanced uses.
+
+
+Coming Next
+-----------
+- Stable Release
+
+Changelog
+---------
+3.0b
+
+- Complete rewrite in progress
+
+2.0.3
+
+- Feature: Made returning to the start at the end of the movie an option ("returnToStart").
+- Feature: Added loop option to loop movie ("loop").
+- Feature: Reorganized player API and listeners.
+- Feature: Added option to disable controls. controlsEnabled: false
+- Feature: Setup method now has a callback, so you can more easily work with the player after setup
+- Feature: Added listeners for enter/exit full screen/window.
+- Feature: Added a VideoJS.player(id) function for getting the player for a video ID
+- Changes: setupAllWhenReady is now just setupAll (backward compatible)
+- Fix: Check for Android browser now excludes firefox and opera
+
+2.0.2 (2010-12-10)
+
+- Feature: Rewrote and optimized subtitle code.
+- Feature: Protecting against volume ranges outside of 1 and 0.
+- Fix: Bug in Safari for Mac OS 10.5 (Leopard) that was breaking fullscreen.
+
+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.
+
+2.0.0 (2010-11-21)
+
+- Feature: Created "behaviors" concept for adding behaviors to elements
+- Feature: Switched back to divs for controls, for more portable styles
+- Feature: Created playerFallbackOrder array option. ["html5", "flash", "links"]
+- Feature: Created playerType concept, for initializing different platforms
+- Feature: Added play button for Android
+- Feature: Added spinner for iPad (non-fullscreen)
+- Feature: Split into multiple files for easier development
+- Feature: Combined VideoJS & _V_ into the same variable to reduce confusion
+- Fix: Checking for m3u8 files (Apple HTTP Streaming)
+- Fix: Catching error on localStorage full that safari seems to randomly throw
+- Fix: Scrubbing to end doesn't trigger onEnded
+
+1.1.5 (2010-11-09)
+
+- Feature: Switched to track method for setting subtitles. Now works like spec.
+- Feature: Created "players" concept for defining fallbacks and fallback order
+- Fix: Android playback bug.
+- Fix: Massive reorganization of code to make easier to navigate
+
+1.1.4 (2010-11-06)
+
+- Feature: Added loading spinner.
+- Feature: Improved styles loaded checking.
+- Feature: Added volume() function to get and set volume through the player.
+- Fix: Fix issue where FF would loop video in background when ended.
+- Fix: Bug in Chrome that shows poster & plays audio if you set currentTime too quickly.
+- Fix: Bug in Safari where waiting is triggered and shows spinner when not needed
+- Fix: Updated to show links if only unplayable sources and no Flash.
+- Fix: Issue where if play button was loaded after play, it wouldn't hide.
+
+1.1.3 (2010-10-19)
+
+- Feature: Width/Height functions for resizing the player
+- Feature: Made initial click & hold trigger new value on progress and volume
+- Feature: Made controls not hide when hovering over them
+- Feature: Added big play button as default starting control.
+- Fix: Removed trailing comma that was breaking IE7
+- Fix: Removed some vars from global scope
+- Fix: Changed a document.onmousemove to an eventListener to prevent conflicts
+- Fix: Added a unique ID to FlowPlayer demo object to fix a FlowPlayer bug. Thanks @emirpprime.
+- Fix: Safari error on unloaded video
+
+1.1.2 (2010-09-20)
+
+- Added a fix for the poster bug in iPad/iPhone
+- Added more specificity to styles
+
+1.1.1 (2010-09-14)
+
+- First Formally Versioned Release
+
+1.0.0 (2010-05-18)
+
+- First released
View
0  demo.html → build/files/demo.html
File renamed without changes
View
0  dev/compare/compare.css → compare/compare.css
File renamed without changes
View
6 dev/compare/compare.html → compare/compare.html
@@ -24,15 +24,17 @@
<script src="../src/events.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/tracks.js" type="text/javascript" charset="utf-8"></script>
+
+ <script src="../src/components.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/behaviors/behaviors.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/behaviors/seekBar.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/behaviors/volume.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/behaviors/texttrackdisplays.js" type="text/javascript" charset="utf-8"></script>
- <script src="../src/controls/bigPlay.js" type="text/javascript" charset="utf-8"></script>
+ <!-- <script src="../src/controls/bigPlay.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/controls/bar.js" type="text/javascript" charset="utf-8"></script>
- <script src="../src/controls/subtitlesBox.js" type="text/javascript" charset="utf-8"></script>
+ <script src="../src/controls/subtitlesBox.js" type="text/javascript" charset="utf-8"></script> -->
<script src="../src/tech/html5.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/tech/flowplayer.js" type="text/javascript" charset="utf-8"></script>
View
4 dev/compare/compare.js → compare/compare.js
@@ -1,6 +1,6 @@
$(function(){
var tech, i,
- techList = ["html5","h5swf"],
+ techList = ["html5","h5swf","youtube"],
props = "error,currentSrc,networkState,buffered,readyState,seeking,initialTime,duration,startOffsetTime,paused,played,seekable,ended,videoWidth,videoHeight,textTracks,preload,currentTime,defaultPlaybackRate,playbackRate,autoplay,loop,controls,volume,muted,defaultMuted,poster".split(","),
methods = "play,pause,src,load,canPlayType,addTextTrack",
notUsed = "mediaGroup,controller,videoTracks,audioTracks,defaultPlaybackRate";
@@ -11,7 +11,7 @@ $(function(){
var player = _V_("vid"+(i+1), { "techOrder":[tech] });
- _V_.each(_V_.html5Events, function(evt){
+ _V_.each(_V_.HTML5.events, function(evt){
player.addEvent(evt, _V_.proxy(tech, function(evt){
var eventsId = "#"+this+"_events",
type = evt.type,
View
0  dev/decisions.txt → decisions.txt
File renamed without changes
View
0  dev/demo-subtitles.srt → demo-subtitles.srt
File renamed without changes
View
0  dev/design/Icon Design.png → design/Icon Design.png
File renamed without changes
View
0  dev/design/skin.old.css → design/skin.old.css
File renamed without changes
View
0  dev/design/video-js.css → design/video-js.css
File renamed without changes
View
0  video-js.png → design/video-js.png
File renamed without changes
View
34 dev/dev.html → dev.html
@@ -10,40 +10,18 @@
<script src="https://getfirebug.com/releases/lite/1.3/firebug-lite.js"></script>
<!--<![endif]-->
- <!-- <script src="dist/video.js"></script> -->
-
<script src="src/core.js"></script>
<script src="src/lib.js"></script>
<script src="src/ecma.js"></script>
<script src="src/json.js"></script>
- <script src="src/log.js"></script>
-
- <script src="src/ui.js"></script>
-
- <script src="src/api.js"></script>
+ <script src="src/component.js"></script>
+ <script src="src/player.js"></script>
+ <script src="src/tech.js"></script>
+ <script src="src/controls.js"></script>
<script src="src/events.js"></script>
-
<script src="src/tracks.js"></script>
- <script src="src/behaviors/behaviors.js"></script>
- <script src="src/behaviors/seekBar.js"></script>
- <script src="src/behaviors/volume.js"></script>
- <script src="src/behaviors/texttrackdisplays.js"></script>
-
- <script src="src/controls/bigPlay.js"></script>
- <script src="src/controls/bar.js"></script>
- <script src="src/controls/subtitlesBox.js"></script>
-
- <script src="src/tech/html5.js"></script>
- <script src="src/tech/flowplayer.js"></script>
-
- <script src="src/tech/h5swf.js"></script>
-
- <script src="src/tech/youtube.js"></script>
-
- <script src="src/autoload.js"></script>
-
<script src="flash/swfobject.js"></script>
</head>
@@ -51,13 +29,13 @@
<video id="vid1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
- data-setup='{"techOrder":["html5","h5swf","youtube"]}'>
+ data-setup='{}'>
<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; codecs="theora, vorbis"'>
<source src="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" type='video/flv'>
<source src="http://www.youtube.com/watch?v=YjaZNYSt7o0&feature=related" type='video/youtube'>
- <!-- <track kind="subtitles" src="http://videojs.com/subtitles/demo-subtitles.srt" srclang="en-US" label="English"></track> -->
+ <track kind="subtitles" src="http://videojs.com/subtitles/demo-subtitles.srt" srclang="en-US" label="English"></track>
<!-- <track kind="subtitles" src="demo-subtitles.srt" srclang="en-US" label="English"></track> -->
</video>
View
BIN  dev/design/video-js.png
Deleted file not rendered
View
298 dev/src/api.js
@@ -1,298 +0,0 @@
-/* Player API
-================================================================================ */
-VideoJS.fn.extend({
-
- apiCall: function(method, arg){
- if (this.isReady) {
- if (this.api[method]) {
- return this.api[method].call(this, arg);
- } else {
- throw new Error("The '"+method+"' method is not available on the playback technology's API");
- }
- } else {
- throw new Error("The playback technology API is not ready yet. Use player.ready(myFunction).");
- }
- },
-
- /* Listener types: play, pause, timeupdate, bufferedupdate, ended, volumechange, error */
- addEvent: function(type, fn){
- return _V_.addEvent(this.box, type, _V_.proxy(this, fn));
- },
- removeEvent: function(type, fn){
- return _V_.removeEvent(this.box, type, fn);
- },
- triggerEvent: function(type, e){
- return _V_.triggerEvent(this.box, type, e);
- },
-
- play: function(){
- this.apiCall("play"); return this;
- },
- pause: function(){
- this.apiCall("pause"); return this;
- },
- paused: function(){
- return this.apiCall("paused");
- },
-
- currentTime: function(seconds){
- if (seconds !== undefined) {
- this.values.currentTime = seconds; // Cache the last set value for smoother scrubbing.
- this.apiCall("setCurrentTime", seconds);
- if (this.manualTimeUpdates) { this.triggerEvent("timeupdate"); }
- return this;
- }
- return this.apiCall("currentTime");
- },
- duration: function(){
- return this.apiCall("duration");
- },
- remainingTime: function(){
- return this.duration() - this.currentTime();
- },
-
- buffered: function(){
- var buffered = this.apiCall("buffered"),
- start = 0, end = this.values.bufferEnd = this.values.bufferEnd || 0,
- timeRange;
-
- if (buffered && buffered.length > 0 && buffered.end(0) > end) {
- end = buffered.end(0);
- // Storing values allows them be overridden by setBufferedFromProgress
- this.values.bufferEnd = end;
- }
-
- return _V_.createTimeRange(start, end);
- },
-
- // Calculates amount of buffer is full
- bufferedPercent: function(){
- return (this.duration()) ? this.buffered().end(0) / this.duration() : 0;
- },
-
- volume: function(percentAsDecimal){
- if (percentAsDecimal !== undefined) {
- var vol = Math.max(0, Math.min(1, parseFloat(percentAsDecimal))); // Force value to between 0 and 1
- this.values.volume = vol;
- this.apiCall("setVolume", vol);
- this.setLocalStorage("volume", vol);
- return this;
- }
- // if (this.values.volume) { return this.values.volume; }
- return this.apiCall("volume");
- },
- muted: function(muted){
- if (muted !== undefined) {
- this.apiCall("setMuted", muted);
- return this;
- }
- return this.apiCall("muted");
- },
-
- width: function(width, skipListeners){
- if (width !== undefined) {
- this.box.width = width;
- this.box.style.width = width+"px";
- if (!skipListeners) { this.triggerEvent("resize"); }
- return this;
- }
- return parseInt(this.box.getAttribute("width"));
- },
- height: function(height){
- if (height !== undefined) {
- this.box.height = height;
- this.box.style.height = height+"px";
- this.triggerEvent("resize");
- return this;
- }
- return parseInt(this.box.getAttribute("height"));
- },
- size: function(width, height){
- // Skip resize listeners on width for optimization
- return this.width(width, true).height(height);
- },
-
- supportsFullScreen: function(){ return this.apiCall("supportsFullScreen"); },
-
- // Turn on fullscreen (or window) mode
- enterFullScreen: function(){
- if (this.supportsFullScreen()) {
- this.apiCall("enterFullScreen");
- } else {
- this.enterFullWindow();
- }
- this.triggerEvent("enterFullScreen");
- return this;
- },
-
- exitFullScreen: function(){
- if (true || !this.supportsFullScreen()) {
- this.exitFullWindow();
- }
- this.triggerEvent("exitFullScreen");
-
- // Otherwise Shouldn't be called since native fullscreen uses own controls.
- return this;
- },
-
- enterFullWindow: function(){
- this.videoIsFullScreen = true;
-
- // Storing original doc overflow value to return to when fullscreen is off
- this.docOrigOverflow = document.documentElement.style.overflow;
-
- // Add listener for esc key to exit fullscreen
- _V_.addEvent(document, "keydown", _V_.proxy(this, this.fullWindowOnEscKey));
-
- // Hide any scroll bars
- document.documentElement.style.overflow = 'hidden';
-
- // Apply fullscreen styles
- _V_.addClass(document.body, "vjs-full-window");
- _V_.addClass(this.box, "vjs-fullscreen");
-
- this.triggerEvent("enterFullWindow");
- },
-
- fullWindowOnEscKey: function(event){
- if (event.keyCode == 27) {
- this.exitFullScreen();
- }
- },
-
- exitFullWindow: function(){
- this.videoIsFullScreen = false;
- _V_.removeEvent(document, "keydown", this.fullWindowOnEscKey);
-
- // Unhide scroll bars.
- document.documentElement.style.overflow = this.docOrigOverflow;
-
- // Remove fullscreen styles
- _V_.removeClass(document.body, "vjs-full-window");
- _V_.removeClass(this.box, "vjs-fullscreen");
-
- // Resize the box, controller, and poster to original sizes
- // this.positionAll();
- this.triggerEvent("exitFullWindow");
- },
-
- // src is a pretty powerful function
- // If you pass it an array of source objects, it will find the best source to play and use that object.src
- // If the new source requires a new playback technology, it will switch to that.
- // If you pass it an object, it will set the source to object.src
- // If you pass it anything else (url string) it will set the video source to that
- src: function(source){
- // Case: Array of source objects to choose from and pick the best to play
- if (source instanceof Array) {
-
- techLoop: // Named loop for breaking both loops
- // Loop through each playback technology in the options order
- for (var i=0,j=this.options.techOrder;i<j.length;i++) {
- var techName = j[i],
- tech = _V_.tech[techName];
-
- // Check if the browser supports this technology
- if (tech.supported()) {
-
- // Loop through each source object
- for (var a=0,b=this.options.sources;a<b.length;a++) {
- var source = b[a];
-
- // Check if source can be played with this technology
- if (tech.canPlaySource.call(this, source)) {
-
- // If this technology is already loaded, set source
- if (techName == this.currentTechName) {
- this.src(source); // Passing the source object
-
- // Otherwise load this technology with chosen source
- } else {
- this.loadTech(techName, source);
- }
-
- break techLoop; // Break both loops
- }
- }
- }
- }
-
- // Case: Source object { src: "", type: "" ... }
- } else if (source instanceof Object) {
- this.src(source.src);
-
- // Case: URL String (http://myvideo...)
- } else {
- this.apiCall("src", source);
- this.load();
- }
- return this;
- },
-
- // Begin loading the src data
- load: function(){
- this.apiCall("load");
- return this;
- },
- currentSrc: function(){
- return this.apiCall("currentSrc");
- },
-
- textTrackValue: function(kind, value){
- if (value !== undefined) {
- this.values[kind] = value;
- this.triggerEvent(kind+"update");
- return this;
- }
- return this.values[kind];
- },
-
- // Attributes/Options
- preload: function(value){
- if (value !== undefined) {
- this.apiCall("setPreload", value);
- this.options.preload = value;
- return this;
- }
- return this.apiCall("preload", value);
- },
- autoplay: function(value){
- if (value !== undefined) {
- this.apiCall("setAutoplay", value);
- this.options.autoplay = value;
- return this;
- }
- return this.apiCall("autoplay", value);
- },
- loop: function(value){
- if (value !== undefined) {
- this.apiCall("setLoop", value);
- this.options.loop = value;
- return this;
- }
- return this.apiCall("loop", value);
- },
-
- controls: function(){ return this.options.controls; },
- textTracks: function(){ return this.options.tracks; },
- poster: function(){ return this.apiCall("poster"); },
-
- error: function(){ return this.apiCall("error"); },
- networkState: function(){ return this.apiCall("networkState"); },
- readyState: function(){ return this.apiCall("readyState"); },
- seeking: function(){ return this.apiCall("seeking"); },
- initialTime: function(){ return this.apiCall("initialTime"); },
- startOffsetTime: function(){ return this.apiCall("startOffsetTime"); },
- played: function(){ return this.apiCall("played"); },
- seekable: function(){ return this.apiCall("seekable"); },
- ended: function(){ return this.apiCall("ended"); },
- videoTracks: function(){ return this.apiCall("videoTracks"); },
- audioTracks: function(){ return this.apiCall("audioTracks"); },
- videoWidth: function(){ return this.apiCall("videoWidth"); },
- videoHeight: function(){ return this.apiCall("videoHeight"); },
- defaultPlaybackRate: function(){ return this.apiCall("defaultPlaybackRate"); },
- playbackRate: function(){ return this.apiCall("playbackRate"); },
- // mediaGroup: function(){ return this.apiCall("mediaGroup"); },
- // controller: function(){ return this.apiCall("controller"); },
- controls: function(){ return this.apiCall("controls"); },
- defaultMuted: function(){ return this.apiCall("defaultMuted"); }
-});
View
37 dev/src/autoload.js
@@ -1,37 +0,0 @@
-_V_.loadPlayers = function(){
- var vids = document.getElementsByTagName("video"),
- options, vid;
- if (vids && vids.length > 0) {
- for (var i=0,j=vids.length; i<j; i++) {
- vid = vids[i];
- // Check if element exists, has getAttribute func.
- // IE seems to consider typeof el.getAttribute == "object" instead of "function" like expected, at least when loading the player immediately.
- if (vid && vid.getAttribute) {
- // Check if this video has already been set up by video.js.
- if (vid.player === undefined) {
- options = vid.getAttribute("data-setup");
- // Check if data-setup attr exists.
- // We only auto-setup if they've added the data-setup attr.
- if (options !== null) {
- // Parse options JSON
- // If empty string, make it a parsable json object.
- options = JSON.parse(options || "{}");
- // Create new video.js instance.
- new VideoJS(vid, options);
- }
- }
-
- // If getAttribute isn't defined, we need to wait for the DOM.
- } else {
- _V_.loadPlayerTimeout(1);
- break;
- }
- }
- } else {
- _V_.loadPlayerTimeout(1);
- }
-};
-_V_.loadPlayerTimeout = function(wait){
- setTimeout(_V_.loadPlayers, wait);
-};
-_V_.loadPlayerTimeout(1); // Let vjs javascript finish executing
View
312 dev/src/behaviors/behaviors.js
@@ -1,312 +0,0 @@
-/* Box Behaviors - The primary container element
-================================================================================ */
-VideoJS.fn.newBehavior("box",
- function(element){
- _V_.addClass(element, "vjs-paused");
- this.addEvent("play", this.boxOnVideoPlay);
- this.addEvent("pause", this.boxOnVideoPause);
- },
- function(){},
- {
- boxOnVideoPlay: function(){
- _V_.removeClass(this.box, "vjs-paused");
- _V_.addClass(this.box, "vjs-playing");
- },
- boxOnVideoPause: function(){
- _V_.removeClass(this.box, "vjs-playing");
- _V_.addClass(this.box, "vjs-paused");
- }
- }
-);
-
-/* Playback Technology Element Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("tech",
- function(element){
- // Need to add click event to video element instead of box, otherwise box will
- // catch clicks on all control buttons. (Could add stopPropagation to all, but don't want to if not needed yet.)
- _V_.addEvent(element, "click", _V_.proxy(this, this.onPlayToggleClick));
- },
- function(element){
- _V_.removeEvent(element, "click", this.onPlayToggleClick);
- },
- {}
-);
-
-/* Control Bar Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("controlBar",
- function(element){
- if (!this.bels.controlBars) {
- this.bels.controlBars = [];
- // this.addEvent("mouseover", this.showControlBars);
- // this.addEvent("mouseout", this.hideControlBars);
- }
- this.bels.controlBars.push(element);
- },
- function(element){},
- {
- showControlBars: function(){
- this.each(this.bels.controlBars, function(bar){
- bar.style.opacity = 1;
- // bar.style.display = "block";
- });
- },
- hideControlBars: function(){
- this.each(this.bels.controlBars, function(bar){
- bar.style.opacity = 0;
- // bar.style.display = "none";
- });
- }
- }
-);
-
-/* PlayToggle, PlayButton, PauseButton Behaviors
-================================================================================ */
-// Play Toggle
-VideoJS.fn.newBehavior("playToggle", function(element){
- if (!this.bels.playToggles) {
- this.bels.playToggles = [];
- this.addEvent("play", this.playTogglesOnPlay);
- this.addEvent("pause", this.playTogglesOnPause);
- }
- this.bels.playToggles.push(element);
- _V_.addEvent(element, "click", _V_.proxy(this, this.onPlayToggleClick));
- _V_.addEvent(element, "focus", _V_.proxy(this, this.onPlayToggleFocus));
- _V_.addEvent(element, "blur", _V_.proxy(this, this.onPlayToggleBlur));
- },
- function(){},
- {
- onPlayToggleClick: function(event){
- if (this.paused()) {
- this.play();
- } else {
- this.pause();
- }
- },
- playTogglesOnPlay: function(event){
- this.each(this.bels.playToggles, function(toggle){
- _V_.removeClass(toggle, "vjs-paused");
- _V_.addClass(toggle, "vjs-playing");
- });
- },
- playTogglesOnPause: function(event){
- this.each(this.bels.playToggles, function(toggle){
- _V_.removeClass(toggle, "vjs-playing");
- _V_.addClass(toggle, "vjs-paused");
- });
- },
- onPlayToggleFocus: function(event){
- _V_.addEvent(document, "keyup", _V_.proxy(this, this.onPlayToggleKey));
- },
- onPlayToggleKey: function(event){
- if (event.which == 32 || event.which == 13) {
- event.preventDefault();
- this.onPlayToggleClick();
- }
- },
- onPlayToggleBlur: function(event){
- _V_.removeEvent(document, "keyup", _V_.proxy(this, this.onPlayToggleKey));
- }
- }
-);
-// Play
-VideoJS.fn.newBehavior("playButton", function(element){
- _V_.addEvent(element, "click", _V_.proxy(this, this.onPlayButtonClick));
- },
- function(){},
- {
- onPlayButtonClick: function(event){ this.play(); }
- }
-);
-// Pause
-VideoJS.fn.newBehavior("pauseButton", function(element){
- _V_.addEvent(element, "click", _V_.proxy(this, this.onPauseButtonClick));
- },
- function(){},
- {
- onPauseButtonClick: function(event){ this.pause(); }
- }
-);
-
-/* Current Time Display Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("currentTimeDisplay", function(element){
- if (!this.bels.currentTimeDisplays) {
- this.bels.currentTimeDisplays = [];
- this.addEvent("timeupdate", this.updateCurrentTimeDisplays);
- }
- this.bels.currentTimeDisplays.push(element);
- },
- function(){},
- {
- // Update the displayed time (00:00)
- updateCurrentTimeDisplays: function(newTime){
- // Allows for smooth scrubbing, when player can't keep up.
- var time = (this.scrubbing) ? this.values.currentTime : this.currentTime();
- this.each(this.bels.currentTimeDisplays, function(dis){
- dis.innerHTML = _V_.formatTime(time, this.duration());
- });
- }
- }
-);
-
-/* Duration Display Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("durationDisplay", function(element){
- if (!this.bels.durationDisplays) {
- this.bels.durationDisplays = [];
- this.addEvent("timeupdate", this.updateDurationDisplays);
- }
- this.bels.durationDisplays.push(element);
- },
- function(){},
- {
- updateDurationDisplays: function(){
- this.each(this.bels.durationDisplays, function(dis){
- if (this.duration()) { dis.innerHTML = _V_.formatTime(this.duration()); }
- });
- }
- }
-);
-
-/* Duration Display Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("remainingTimeDisplay", function(element){
- if (!this.bels.remainingTimeDisplays) {
- this.bels.remainingTimeDisplays = [];
- this.addEvent("timeupdate", this.updateRemainingTimeDisplays);
- }
- this.bels.remainingTimeDisplays.push(element);
- },
- function(){},
- {
- updateRemainingTimeDisplays: function(){
- this.each(this.bels.remainingTimeDisplays, function(dis){
- if (this.duration()) { dis.innerHTML = "-"+_V_.formatTime(this.remainingTime()); }
- });
- }
- }
-);
-
-/* Time Left (remaining) Display Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("timeLeftDisplay", function(element){
- if (!this.bels.timeLeftDisplays) {
- this.bels.timeLeftDisplays = [];
- this.addEvent("timeupdate", this.updateTimeLeftDisplays);
- }
- this.bels.timeLeftDisplays.push(element);
- },
- function(){
- this.removeEvent("timeupdate", this.updateTimeLeftDisplays);
- delete this.bels.timeLeftDisplays;
- },
- {
- updateTimeLeftDisplays: function(){
- // Allows for smooth scrubbing, when player can't keep up.
- var time = (this.scrubbing) ? this.values.currentTime : this.currentTime();
- this.each(this.bels.timeLeftDisplays, function(dis){
- dis.innerHTML = "-" + _V_.formatTime(this.duration() - time);
- });
- }
- }
-);
-
-/* Volume Scrubber Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("volumeScrubber", function(element){
- // Binding with element as 'this' so the progress holder element can be retrieved in IE.
- // IE doesn't support the currentTarget event attr.
- var player = this;
- _V_.addEvent(element, "mousedown", _V_.proxy(element, function(e){
- player.onVolumeScrubberMouseDown(e, this);
- }));
- },
- function(){},
- {
- // Adjust the volume when the user drags on the volume control
- onVolumeScrubberMouseDown: function(event, scrubber){
- // event.preventDefault();
- _V_.blockTextSelection();
- this.currentScrubber = scrubber;
- this.setVolumeWithScrubber(event);
- _V_.addEvent(document, "mousemove", _V_.proxy(this, this.onVolumeScrubberMouseMove));
- _V_.addEvent(document, "mouseup", _V_.proxy(this, this.onVolumeScrubberMouseUp));
- },
- onVolumeScrubberMouseMove: function(event){
- this.setVolumeWithScrubber(event);
- },
- onVolumeScrubberMouseUp: function(event){
- this.setVolumeWithScrubber(event);
- _V_.unblockTextSelection();
- _V_.removeEvent(document, "mousemove", this.onVolumeScrubberMouseMove, false);
- _V_.removeEvent(document, "mouseup", this.onVolumeScrubberMouseUp, false);
- },
- setVolumeWithScrubber: function(event){
- var newVol = _V_.getRelativePosition(event.pageX, this.currentScrubber);
- this.volume(newVol);
- }
- }
-);
-
-/* Volume Display Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("volumeDisplay", function(element){
- if (!this.bels.volumeDisplays) {
- this.bels.volumeDisplays = [];
- this.addEvent("volumechange", this.updateVolumeDisplays);
- }
- this.bels.volumeDisplays.push(element);
- this.updateVolumeDisplay(element); // Set the display to the initial volume
- },
- function(){},
- {
- // Update the volume control display
- // Unique to these default controls. Uses borders to create the look of bars.
- updateVolumeDisplays: function(){
- if (!this.bels.volumeDisplays) { return; }
- this.each(this.bels.volumeDisplays, function(dis){
- this.updateVolumeDisplay(dis);
- });
- },
- updateVolumeDisplay: function(display){
- var volNum = Math.ceil(this.volume() * 6);
- this.each(display.children, function(child, num){
- if (num < volNum) {
- _V_.addClass(child, "vjs-volume-level-on");
- } else {
- _V_.removeClass(child, "vjs-volume-level-on");
- }
- });
- }
- }
-);
-
-/* Fullscreen Toggle Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("fullscreenToggle", function(element){
- _V_.addEvent(element, "click", _V_.proxy(this, this.onFullscreenToggleClick));
- },
- function(){},
- {
- // When the user clicks on the fullscreen button, update fullscreen setting
- onFullscreenToggleClick: function(event){
- if (!this.videoIsFullScreen) {
- this.enterFullScreen();
- } else {
- this.exitFullScreen();
- }
- },
-
- fullscreenOnWindowResize: function(event){ // Removeable
- // this.positionControlBars();
- },
- // Create listener for esc key while in full screen mode
- fullscreenOnEscKey: function(event){ // Removeable
- if (event.keyCode == 27) {
- this.exitFullScreen();
- }
- }
- }
-);
View
216 dev/src/behaviors/seekBar.js
@@ -1,216 +0,0 @@
-/* Seek Bar Behaviors (Current Time Scrubber)
-================================================================================ */
-VideoJS.fn.newBehavior("seekBar",
- function(element){
- if (!this.bels.seekBars) {
- this.bels.seekBars = [];
- this.addEvent("timeupdate", this.updateSeekBars);
- }
- this.bels.seekBars.push(element);
-
- // Get and store related child objects (progress bar & handle)
- var data = _V_.getData(element);
- this.each(element.childNodes, function(c){
- if (c.className) {
- if (c.className.indexOf("seek-handle") != -1) {
- data.seekHandle = c;
- } else if (c.className.indexOf("play-progress") != -1) {
- data.playProgress = c;
- }
- }
- });
-
- // Binding with element as 'this' so the progress holder element can be retrieved in IE.
- // IE doesn't support the currentTarget event attr.
- var player = this;
- _V_.addEvent(element, "mousedown", _V_.proxy(element, function(event){
- player.onSeekBarMouseDown(event, this);
- }));
- _V_.addEvent(element, "focus", _V_.proxy(this, this.onSeekBarFocus));
- _V_.addEvent(element, "blur", _V_.proxy(this, this.onSeekBarBlur));
- },
- function(){},
- {
- // Adjust the play position when the user drags on the progress bar
- onSeekBarMouseDown: function(event, currentTarget){
- event.preventDefault();
- _V_.blockTextSelection();
-
- this.currSeekBar = currentTarget;
- this.currHandle = _V_.getData(currentTarget).seekHandle || false;
-
- this.scrubbing = true;
-
- this.videoWasPlaying = !this.paused();
- this.pause();
-
- this.setCurrentTimeWithScrubber(event);
- _V_.addEvent(document, "mousemove", _V_.proxy(this, this.onSeekBarMouseMove));
- _V_.addEvent(document, "mouseup", _V_.proxy(this, this.onSeekBarMouseUp));
- },
- onSeekBarMouseMove: function(event){ // Removeable
- this.setCurrentTimeWithScrubber(event);
- },
- onSeekBarMouseUp: function(event){ // Removeable
- _V_.unblockTextSelection();
- _V_.removeEvent(document, "mousemove", this.onSeekBarMouseMove, false);
- _V_.removeEvent(document, "mouseup", this.onSeekBarMouseUp, false);
- this.scrubbing = false;
- if (this.videoWasPlaying) {
- this.play();
- }
- },
- setCurrentTimeWithScrubber: function(event){
- var bar = this.currSeekBar,
- barX = _V_.findPosX(bar),
- barW = bar.offsetWidth,
- handle = this.currHandle,
- handleW = (handle) ? handle.offsetWidth : 0;
-
- // Adjusted X and Width, so handle doesn't go outside the bar
- barAX = barX + (handleW / 2),
- barAW = barW - handleW,
- // Percent that the click is through the adjusted area
- percent = Math.max(0, Math.min(1, (event.pageX - barAX) / barAW)),
- // Percent translated to pixels
- percentPix = percent * barAW,
- // Percent translated to seconds
- newTime = percent * this.duration();
-
- // Don't let video end while scrubbing.
- if (newTime == this.duration()) { newTime = newTime - 0.1; }
-
- // Set new time (tell player to seek to new time)
- this.currentTime(newTime);
- },
- getSeekBarAdjustedWidth: function(bar, handle){
- var bar = this.currSeekBar,
- barX = _V_.findPosX(bar),
- barW = bar.offsetWidth,
- handle = this.currHandle,
- handleW = (handle) ? handle.offsetWidth : 0;
-
- // Adjusted X and Width, so handle doesn't go outside the bar
- barAX = barX + (handleW / 2),
- barAW = barW - handleW;
- },
- updateSeekBars: function(){
- // If scrubbing, use the cached currentTime value for speed
- var progress = /* (this.scrubbing) ? this.values.currentTime / this.duration() : */ this.currentTime() / this.duration();
- // Protect against no duration and other division issues
- if (isNaN(progress)) { progress = 0; }
-
- this.each(this.bels.seekBars, function(bar){
- var barData = _V_.getData(bar),
- barX = _V_.findPosX(bar),
- barW = bar.offsetWidth,
- handle = barData.seekHandle,
- progBar = barData.playProgress,
- handleW = (handle) ? handle.offsetWidth : 0;
-
- // Adjusted X and Width, so handle doesn't go outside the bar
- barAX = barX + (handleW / 2),
- barAW = barW - handleW;
- // Percent that the click is through the adjusted area
- // percent = Math.max(0, Math.min(1, (event.pageX - barAX) / barAW)),
- // Percent translated to pixels
- // percentPix = percent * barAW,
- // Percent translated to seconds
- // newTime = percent * this.duration();
-
-
- progBarProgress = _V_.round(progress * barAW + handleW / 2) + "px";
- if (progBar && progBar.style) { progBar.style.width = progBarProgress; }
-
- handle.style.left = _V_.round(progress * barAW)+"px";
- });
-
-
- // Update bar length
- // this.each(this.bels.playProgressBars, function(bar){
- // if (bar.style) { bar.style.width = _V_.round(progress * 100, 2) + "%"; }
- // });
-
- // Move Handle
- },
- onSeekBarFocus: function(event){
- _V_.addEvent(document, "keyup", _V_.proxy(this, this.onSeekBarKey));
- },
- onSeekBarKey: function(event){
- if (event.which == 37) {
- event.preventDefault();
- this.currentTime(this.currentTime() - 1);
- } else if (event.which == 39) {
- event.preventDefault();
- this.currentTime(this.currentTime() + 1);
- }
- },
- onSeekBarBlur: function(event){
- _V_.removeEvent(document, "keyup", _V_.proxy(this, this.onSeekBarKey));
- }
- }
-);
-/* Seek Handle Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("seekHandle",
- function(element){
- if (!this.bels.seekHandles) { this.bels.seekHandles = []; }
- this.bels.seekHandles.push(element);
-
- // Store references between seekbar and seekhandle
- _V_.getData(element).seekBar = element.parentNode;
- _V_.getData(element.parentNode).seekHandle = element;
- },
- function(){},
- {}
-);
-
-/*
-CHANGED TO SEEK BAR
-Play Progress Bar Behaviors
-================================================================================ */
-// VideoJS.fn.newBehavior("playProgressBar",
-// function(element){
-// if (!this.bels.playProgressBars) {
-// this.bels.playProgressBars = [];
-// this.addEvent("timeupdate", this.updatePlayProgressBars);
-// }
-// this.bels.playProgressBars.push(element);
-// },
-// function(){
-// // Remove
-// },
-// {
-// // Ajust the play progress bar's width based on the current play time
-// updatePlayProgressBars: function(){
-// // If scrubbing, use the cached currentTime value for speed
-// var progress = (this.scrubbing) ? this.values.currentTime / this.duration() : this.currentTime() / this.duration();
-// _V_.log("PROG", progress)
-// // Protect against no duration and other division issues
-// if (isNaN(progress)) { progress = 0; }
-// // Update bar length
-// this.each(this.bels.playProgressBars, function(bar){
-// if (bar.style) { bar.style.width = _V_.round(progress * 100, 2) + "%"; }
-// });
-// }
-// }
-// );
-
-/* Load Progress Bar Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("loadProgressBar",
- function(element){
- if (!this.bels.loadProgressBars) { this.bels.loadProgressBars = []; }
- this.bels.loadProgressBars.push(element);
- this.addEvent("progress", this.updateLoadProgressBars);
- },
- function(){},
- {
- updateLoadProgressBars: function(event){
- // log("updating progress bars", this.bufferedPercent());
- this.each(this.bels.loadProgressBars, function(bar){
- if (bar.style) { bar.style.width = _V_.round(this.bufferedPercent() * 100, 2) + "%"; }
- });
- }
- }
-);
View
43 dev/src/behaviors/texttrackdisplays.js
@@ -1,43 +0,0 @@
-/* Text Track Displays
-================================================================================ */
-// Create a behavior type for each text track type (subtitlesDisplay, captionsDisplay, etc.).
-// Then you can easily do something like.
-// player.addBehavior(myDiv, "subtitlesDisplay");
-// And the myDiv's content will be updated with the text change.
-_V_.each(["subtitles", "captions", "chapters", "descriptions"], function(type){
- var add, remove,
- name = type+"Display",
- plural = name+"s",
- updateFuncName = "update"+plural,
- funcs = {};
-
- // Add the behavior to an element
- add = function(element){
- if (!this.bels[plural]) {
- this.bels[plural] = [];
- this.addEvent(type+"update", this[updateFuncName]);
- }
- this.bels[plural].push(element);
- };
-
- // Remove the behavior from an element
- remove = function(element){
- if (this.bels[plural]) {
- _V_.remove(element, this.bels[plural]);
- if (this.bels[plural].length == 0) {
- this.removeEvent(type+"update", this[updateFuncName]);
- delete this.bels[plural];
- }
- }
- };
-
- // Addional needed funcitons (added directly to player)
- funcs[updateFuncName] = function(){
- var val = this.textTrackValue(type);
- this.each(this.bels[plural], function(display){
- display.innerHTML = val;
- });
- };
-
- VideoJS.fn.newBehavior(name, add, remove, funcs);
-});
View
177 dev/src/behaviors/volume.js
@@ -1,177 +0,0 @@
-/* Volume Behaviors
-================================================================================ */
-/* Seek Bar Behaviors (Current Time Scrubber)
-================================================================================ */
-VideoJS.fn.newBehavior("volumeBar",
- function(element){
- if (!this.bels.volumeBars) {
- this.bels.volumeBars = [];
- this.addEvent("volumechange", this.updateVolumeBars);
- }
- this.bels.volumeBars.push(element);
-
- // Get and store related child objects (level & handle)
- var data = _V_.getData(element);
- this.each(element.childNodes, function(c){
- if (c.className) {
- if (c.className.indexOf("volume-handle") != -1) {
- data.volumeHandle = c;
- } else if (c.className.indexOf("volume-level") != -1) {
- data.volumeLevel = c;
- }
- }
- });
-
- // Binding with element as 'this' so the holder element can be retrieved in IE.
- // IE doesn't support the currentTarget event attr.
- var player = this;
- _V_.addEvent(element, "mousedown", _V_.proxy(element, function(event){
- player.onVolumeBarMouseDown(event, this);
- }));
- // _V_.addEvent(element, "focus", _V_.proxy(this, this.onVolumeBarFocus));
- // _V_.addEvent(element, "blur", _V_.proxy(this, this.onVolumeBarBlur));
- },
- function(){},
- {
- // Adjust the play position when the user drags on the progress bar
- onVolumeBarMouseDown: function(event, currentTarget){
- event.preventDefault();
- _V_.blockTextSelection();
-
- this.currVolumeBar = currentTarget;
- this.currHandle = _V_.getData(currentTarget).volumeHandle || false;
-
- this.setVolumeWithSlider(event);
- _V_.addEvent(document, "mousemove", _V_.proxy(this, this.onVolumeBarMouseMove));
- _V_.addEvent(document, "mouseup", _V_.proxy(this, this.onVolumeBarMouseUp));
- },
- onVolumeBarMouseMove: function(event){ // Removeable
- this.setVolumeWithSlider(event);
- },
- onVolumeBarMouseUp: function(event){ // Removeable
- _V_.unblockTextSelection();
- _V_.removeEvent(document, "mousemove", this.onVolumeBarMouseMove, false);
- _V_.removeEvent(document, "mouseup", this.onVolumeBarMouseUp, false);
- },
- setVolumeWithSlider: function(event){
- var bar = this.currVolumeBar,
- barX = _V_.findPosX(bar),
- barW = bar.offsetWidth,
- handle = this.currHandle,
- handleW = (handle) ? handle.offsetWidth : 0;
-
- // Adjusted X and Width, so handle doesn't go outside the bar
- barAX = barX + (handleW / 2),
- barAW = barW - handleW,
- // Percent that the click is through the adjusted area
- percent = Math.max(0, Math.min(1, (event.pageX - barAX) / barAW)),
- // Percent translated to pixels
- percentPix = percent * barAW,
- // Percent translated to seconds
- newTime = percent * this.duration();
-
- this.volume(percent);
- },
- updateVolumeBars: function(){
- var vol = this.volume();
- this.each(this.bels.volumeBars, function(bar){
- var barData = _V_.getData(bar),
- barX = _V_.findPosX(bar),
- barW = bar.offsetWidth,
- handle = barData.volumeHandle,
- progBar = barData.volumeLevel,
- handleW = (handle) ? handle.offsetWidth : 0;
-
- // Adjusted X and Width, so handle doesn't go outside the bar
- barAX = barX + (handleW / 2),
- barAW = barW - handleW;
- // Percent that the click is through the adjusted area
- // percent = Math.max(0, Math.min(1, (event.pageX - barAX) / barAW)),
- // Percent translated to pixels
- // percentPix = percent * barAW,
- // Percent translated to seconds
- // newTime = percent * this.duration();
-
- progBarProgress = _V_.round(vol * barAW + handleW / 2) + "px";
- if (progBar && progBar.style) { progBar.style.width = progBarProgress; }
-
- handle.style.left = _V_.round(vol * barAW)+"px";
- });
-
-
- // Update bar length
- // this.each(this.bels.playProgressBars, function(bar){
- // if (bar.style) { bar.style.width = _V_.round(progress * 100, 2) + "%"; }
- // });
-
- // Move Handle
- }// ,
- // onVolumeBarFocus: function(event){
- // _V_.addEvent(document, "keyup", _V_.proxy(this, this.onVolumeBarKey));
- // },
- // onVolumeBarKey: function(event){
- // if (event.which == 37) {
- // event.preventDefault();
- // this.currentTime(this.currentTime() - 1);
- // } else if (event.which == 39) {
- // event.preventDefault();
- // this.currentTime(this.currentTime() + 1);
- // }
- // },
- // onVolumeBarBlur: function(event){
- // _V_.removeEvent(document, "keyup", _V_.proxy(this, this.onVolumeBarKey));
- // }
- }
-);
-
-/* Mute Toggle
-================================================================================ */
-VideoJS.fn.newBehavior("muteToggle", function(element){
- if (!this.bels.muteToggles) {
- this.bels.muteToggles = [];
- this.addEvent("volumechange", this.muteTogglesOnVolumeChange);
- }
- this.bels.muteToggles.push(element);
- _V_.addEvent(element, "click", _V_.proxy(this, this.onMuteToggleClick));
- // _V_.addEvent(element, "focus", _V_.proxy(this, this.onMuteToggleFocus));
- // _V_.addEvent(element, "blur", _V_.proxy(this, this.onMuteToggleBlur));
- },
- function(){},
- {
- onMuteToggleClick: function(event){
- this.muted( this.muted() ? false : true );
- },
- muteTogglesOnVolumeChange: function(event){
- var vol = this.volume(),
- level = 3;
-
- if (vol == 0 || this.muted()) {
- level = 0;
- } else if (vol < 0.33) {
- level = 1;
- } else if (vol < 0.67) {
- level = 2;
- }
-
- this.each(this.bels.muteToggles, function(toggle){
- /* TODO improve muted icon classes */
- _V_.each([0,1,2,3], function(i){
- _V_.removeClass(toggle, "vjs-vol-"+i);
- });
- _V_.addClass(toggle, "vjs-vol-"+level);
- });
- }//,
- // onMuteToggleFocus: function(event){
- // _V_.addEvent(document, "keyup", _V_.proxy(this, this.onMuteToggleKey));
- // },
- // onMuteToggleKey: function(event){
- // if (event.which == 32 || event.which == 13) {
- // event.preventDefault();
- // this.onMuteToggleClick();
- // }
- // },
- // onMuteToggleBlur: function(event){
- // _V_.removeEvent(document, "keyup", _V_.proxy(this, this.onMuteToggleKey));
- // }
- }
-);
View
153 dev/src/controls/bar.js
@@ -1,153 +0,0 @@
-_V_.controlSets.bar = {
- options: {},
- add: function(){
- /* See controls/controls.html to see the HTML this creates. */
-
- // Create a reference to the controls elements
- var bar = this.cels.bar = {};
-
- // Control Bar Main Div ("main")
- bar.main = _V_.createElement("div", { className: "vjs-controls" });
- // Add the controls to the video's container
- this.box.appendChild(bar.main);
- this.addBehavior(bar.main, "controlBar");
-
- // Play Control
- bar.playControl = _V_.createElement("div", {
- className: "vjs-play-control vjs-control",
- innerHTML: '<div><span class="vjs-control-text">Play</span></div>',
- role: "button", tabIndex: 0
- });
- bar.main.appendChild(bar.playControl);
- this.addBehavior(bar.playControl, "playToggle");
-
- /* Time -------------------------------------------------------------- */
- // Time Display
- bar.currentTime = _V_.createElement("div", {
- className: "vjs-current-time vjs-time-controls vjs-control"
- });
- bar.currentTimeDisplay = _V_.createElement("span", {
- className: "vjs-current-time-display",
- innerHTML: '0:00'
- });
- // Put display inside div, inside control div, to follow control scheme.
- bar.currentTime.appendChild(_V_.createElement("div").appendChild(bar.currentTimeDisplay));
- bar.main.appendChild(bar.currentTime);
- this.addBehavior(bar.currentTimeDisplay, "currentTimeDisplay");
-
- // Time Separator (Not used in main skin, but still available, and could be used as a 'spare element')
- bar.timeDivider = _V_.createElement("div", {
- className: "vjs-time-divider",
- innerHTML: '<div><span>/</span></div>'
- });
- bar.main.appendChild(bar.timeDivider);
-
- // Duration Display
- bar.duration = _V_.createElement("div", {
- className: "vjs-duration vjs-time-controls vjs-control"
- });
- bar.durationDisplay = _V_.createElement("span", {
- className: "vjs-duration-display",
- innerHTML: '0:00'
- });
- // Put display inside div, inside control div, to follow control scheme.
- bar.duration.appendChild(_V_.createElement("div").appendChild(bar.durationDisplay));
- bar.main.appendChild(bar.duration);
- this.addBehavior(bar.durationDisplay, "durationDisplay");
-
- // Duration Display
- bar.remainingTime = _V_.createElement("div", {
- className: "vjs-remaining-time vjs-time-controls vjs-control"
- });
- bar.remainingTimeDisplay = _V_.createElement("span", {
- className: "vjs-remaining-time-display",
- innerHTML: '-0:00'
- });
- // Put display inside div, inside control div, to follow control scheme.
- bar.remainingTime.appendChild(_V_.createElement("div").appendChild(bar.remainingTimeDisplay));
- bar.main.appendChild(bar.remainingTime);
- this.addBehavior(bar.remainingTime, "remainingTimeDisplay");
-
- /* Progress -------------------------------------------------------------- */
- // Progress Control: Seek, Load Progress, and Play Progress
- bar.progressControl = _V_.createElement("div", { className: "vjs-progress-control vjs-control" });
- bar.main.appendChild(bar.progressControl);
-
- // Seek Bar and holder for the progress bars
- bar.seekBar = _V_.createElement("div", { className: "vjs-progress-holder" });
- bar.progressControl.appendChild(bar.seekBar);
-
- // Load Progress Bar
- bar.loadProgressBar = _V_.createElement("div", {
- className: "vjs-load-progress",
- innerHTML: '<span class="vjs-control-text">Loaded: 0%</span>'
- });
- bar.seekBar.appendChild(bar.loadProgressBar);
- this.addBehavior(bar.loadProgressBar, "loadProgressBar");
-
- // Play Progress Bar
- bar.playProgressBar = _V_.createElement("div", {
- className: "vjs-play-progress",
- innerHTML: '<span class="vjs-control-text">Progress: 0%</span>'
- });
- bar.seekBar.appendChild(bar.playProgressBar);
-
- // Seek Handle
- bar.seekHandle = _V_.createElement("div", {
- className: "vjs-seek-handle",
- innerHTML: '<span class="vjs-control-text">00:00</span>',
- tabIndex: 0,
- role: "slider", "aria-valuenow": 0, "aria-valuemin": 0, "aria-valuemax": 100
- });
- bar.seekBar.appendChild(bar.seekHandle);
-
- // SeekBar Behavior includes play progress bar, and seek handle
- // Needed so it can determine seek position based on handle position/size
- this.addBehavior(bar.seekBar, "seekBar");
-
- /* Fullscreen -------------------------------------------------------------- */
- // Fullscreen Button
- bar.fullscreenControl = _V_.createElement("div", {
- className: "vjs-fullscreen-control vjs-control",
- innerHTML: '<div><span class="vjs-control-text">Fullscreen</span></div>',
- role: "button", tabIndex: 0
- });
- bar.main.appendChild(bar.fullscreenControl);
- this.addBehavior(bar.fullscreenControl, "fullscreenToggle");
-
- /* Volume -------------------------------------------------------------- */
- // Fullscreen Button
- bar.volumeControl = _V_.createElement("div", { className: "vjs-volume-control vjs-control" });
- bar.volumeBar = _V_.createElement("div", { className: "vjs-volume-bar" });
- bar.volumeLevel = _V_.createElement("div", {
- className: "vjs-volume-level",
- innerHTML: '<span class="vjs-control-text"></span>'
- });
- bar.volumeHandle = _V_.createElement("div", {
- className: "vjs-volume-handle",
- innerHTML: '<span class="vjs-control-text"></span>',
- tabindex: 0,
- role: "slider", "aria-valuenow": 0, "aria-valuemin": 0, "aria-valuemax": 100
- });
-
- bar.volumeBar.appendChild(bar.volumeLevel);
- bar.volumeBar.appendChild(bar.volumeHandle);
- bar.volumeControl.appendChild(bar.volumeBar);
- bar.main.appendChild(bar.volumeControl);
- this.addBehavior(bar.volumeBar, "volumeBar");
-
- // Mute Button
- bar.muteControl = _V_.createElement("div", {
- className: "vjs-mute-control vjs-control",
- innerHTML: '<div><span class="vjs-control-text">Mute</span></div>',
- role: "button", tabIndex: 0
- });
- bar.main.appendChild(bar.muteControl);
- this.addBehavior(bar.muteControl, "muteToggle");
- },
- remove: function(){
- this.box.removeChild(this.cels.bigPlayButton);
- delete this.cels.bigPlayButton;
- this.removeBehavior(this.cels.bigPlayButton, "bigPlayButton");
- }
-};
View
52 dev/src/controls/bigPlay.js
@@ -1,52 +0,0 @@
-_V_.controlSets.bigPlayButton = {
- options: {},
- add: function(){
- /* Creating this HTML
- <div class="vjs-big-play-button"><span></span></div>
- */
- this.cels.bigPlayButton = _V_.createElement("div", {
- className: "vjs-big-play-button",
- innerHTML: "<span></span>"
- });
- this.box.appendChild(this.cels.bigPlayButton);
- this.addBehavior(this.cels.bigPlayButton, "bigPlayButton");
- },
- remove: function(){
- this.removeBehavior(this.cels.bigPlayButton, "bigPlayButton");
- this.box.removeChild(this.cels.bigPlayButton);
- delete this.cels.bigPlayButton;
- }
-};
-
-/* Big Play Button Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("bigPlayButton",
- // Add Big Play Button Behavior
- function(element){
- if (!this.bels.bigPlayButtons) {
- this.bels.bigPlayButtons = [];
- this.addEvent("play", this.hideBigPlayButtons);
- this.addEvent("ended", this.showBigPlayButtons);
- }
- this.bels.bigPlayButtons.push(element);
- this.addBehavior(element, "playButton");
- },
- // Remove Big Play Button Behavior
- function(element){
-
- },
- // Needed functions (added directly to player (this))
- {
- showBigPlayButtons: function(){
- if (!this.options.controlsEnabled) { return; }
- this.each(this.bels.bigPlayButtons, function(element){
- element.style.display = "block";
- });
- },
- hideBigPlayButtons: function(){
- this.each(this.bels.bigPlayButtons, function(element){
- element.style.display = "none";
- });
- }
- }
-);
View
157 dev/src/controls/controls.html
@@ -1,157 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8" />
- <title>Controls HTML</title>
- <link rel="stylesheet" href="../video-js.css" type="text/css">
-</head>
-<body>
-
-<div class="video-js vjs-default-skin" style="width: 640px; height: 270px;">
- <video id="vid1" class="" preload="none" width="640" height="264" data-setup="" poster="http://video-js.zencoder.com/oceans-clip.png">
- <source src="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" type='video/flv'>
- <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; codecs="vp8, vorbis"'>
- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
- </video>
-
- <div class="vjs-controls">
-
- <!-- Play/Pause Button -->
- <div class="vjs-play-control vjs-control" role="button" tabindex="0">
- <div>
- <span class="vjs-control-text">Play</span>
- </div>
- </div>
-
- <!-- Current Time Display -->
- <div class="vjs-current-time vjs-time-controls vjs-control">
- <div>
- <span class="vjs-current-time-display">00:00</span>
- </div>
- </div>
-
- <!-- Optional Divider for Time -->
- <div class="vjs-time-divider">
- <div>
- <span>/</span>
- </div>
- </div>
-
- <!-- Duration Display -->
- <div class="vjs-duration vjs-time-controls vjs-control">
- <div>
- <span class="vjs-duration-display">00:00</span>
- </div>
- </div>
-
- <!-- Remaining Time Display -->
- <div class="vjs-remaining-time vjs-time-controls vjs-control">
- <div>
- <span class="vjs-remaining-time-display">00:00</span>
- </div>
- </div>
-
- <!-- Seek Slider and Load & Play Progress Bars -->
- <div class="vjs-progress-control vjs-control" role="slider" tabindex="0" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
-
- <!-- Seek Slider + Holds both progress bars. -->
- <div class="vjs-progress-holder">
-
- <!-- Load Progress -->
- <div class="vjs-load-progress" title="Load Progress">
- <span class="vjs-control-text">Loaded: 0%</span><!-- Support Multiple Load Progress Bars -->
- </div>
-
- <!-- Play Progress -->
- <div class="vjs-play-progress" title="Play Progress">
- <span class="vjs-control-text">Progress: 0%</span>
- </div>
- </div>
-
- <!-- Seek Handle -->
- <div class="vjs-seek-handle" title="Current Time">
- <div>
- <span class="vjs-control-text">00:00</span>
- </div>
- </div>
- </div>
-
- <!-- Fullscreen Control -->
- <div class="vjs-fullscreen-control vjs-control" role="button" tabindex="0">
- <div>
- <span class="vjs-control-text">Fullscreen</span>
- </div>
- </div>
-
- <!-- Volume Control -->
- <div class="vjs-volume-control vjs-control">
-
- <div class="vjs-volume-bar">
- <!-- Volume Bar -->
- <div class="vjs-volume-level">
- <span class="vjs-control-text"></span>
- </div>
-
- <!-- Volume Handle -->
- <div class="vjs-volume-handle" tabindex="0" role="slider" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
- <span class="vjs-control-text"></span>
- </div>
- </div>
-
- </div>
-
- <!-- Mute Button -->
- <div class="vjs-mute-control" role="button" tabindex="0">
- <div>
- <span class="vjs-control-text">Mute</span>
- </div>
- </div>
-
- <!-- Rewind Button -->
- <!-- <div class="vjs-rewind-control vjs-control" title="Rewind" role="button" tabindex="0">
- <div>
- <span class="vjs-control-text">Rewind</span>
- </div>
- </div> -->
-
- <!-- Fast Forward Button -->
- <!-- <div class="vjs-forward-control" title="Fast Forward" role="button" tabindex="0">
- <div>
- <span>Fast Forward</span>
- </div>
- </div> -->
-
- <!-- Previous Video Button -->
- <!-- <div class="vjs-previous-control" title="Previous Video" role="button" tabindex="0">
- <div>
- <span>Previous Video</span>
- </div>
- </div> -->
-
- <!-- Next Video Button -->
- <!-- <div class="vjs-next-control" title="Next Video" role="button" tabindex="0">
- <div>
- <span>Next Video</span>
- </div>
- </div> -->
-
- <!-- Subtitles Button -->
- <!-- <div class="vjs-subtitles-control" title="Subtitles On/Off" role="button" tabindex="0">
- <div>
- <span>Closed Captions</span>
- </div>
- </div> -->
-
- <!-- Captions Button -->
- <!-- <div class="vjs-captions-control" title="Captions On/Off" role="button" tabindex="0">
- <div>
- <span>Closed Captions</span>
- </div>
- </div> -->
- </div>
-
-</div>
-
-</body>
-</html>
View
134 dev/src/controls/main.js
@@ -1,134 +0,0 @@
-/* OLD VERSION OF CONTROL BAR */
-_V_.controlSets.main = {
- options: {},
- add: function(){
- /* Creating this HTML
- <div class="vjs-controls">
- <div class="vjs-play-control">
- <span></span>
- </div>
- <div class="vjs-progress-control">
- <div class="vjs-progress-holder">
- <div class="vjs-load-progress"></div>
- <div class="vjs-play-progress"></div>
- </div>
- </div>
- <div class="vjs-time-control">
- <span class="vjs-current-time-display">00:00</span><span> / </span><span class="vjs-duration-display">00:00</span>
- </div>
- <div class="vjs-volume-control">
- <div>
- <span></span><span></span><span></span><span></span><span></span><span></span>
- </div>
- </div>
- <div class="vjs-fullscreen-control">
- <div>
- <span></span><span></span><span></span><span></span>
- </div>
- </div>
- </div>
- */
-
- this.cels.main = {};
-
- // Create a div to hold the different controls
- this.cels.main.bar = _V_.createElement("div", { className: "vjs-controls" });
- // Add the controls to the video's container
- this.box.appendChild(this.cels.main.bar);
- this.addBehavior(this.cels.main.bar, "controlBar");
-
- // Build the play control
- this.cels.main.playControl = _V_.createElement("div", { className: "vjs-play-control vjs-control", innerHTML: "<span></span>" });
- this.cels.main.bar.appendChild(this.cels.main.playControl);
- this.addBehavior(this.cels.main.playControl, "playToggle");
-
- // Build the progress control
- this.cels.main.progressControl = _V_.createElement("div", { className: "vjs-progress-control vjs-control" });
- this.cels.main.bar.appendChild(this.cels.main.progressControl);
-
- // Create a holder for the progress bars
- this.cels.main.progressHolder = _V_.createElement("div", { className: "vjs-progress-holder" });
- this.cels.main.progressControl.appendChild(this.cels.main.progressHolder);
- this.addBehavior(this.cels.main.progressHolder, "seekBar");
-
- // Create the loading progress display
- this.cels.main.loadProgressBar = _V_.createElement("div", { className: "vjs-load-progress" });
- this.cels.main.progressHolder.appendChild(this.cels.main.loadProgressBar);
- this.addBehavior(this.cels.main.loadProgressBar, "loadProgressBar");
-
- // Create the playing progress display
- this.cels.main.playProgressBar = _V_.createElement("div", { className: "vjs-play-progress" });
- this.cels.main.progressHolder.appendChild(this.cels.main.playProgressBar);
- this.addBehavior(this.cels.main.playProgressBar, "playProgressBar");
-
- // Create the progress time display (00:00 / 00:00)
- this.cels.main.timeControl = _V_.createElement("div", { className: "vjs-time-control vjs-control" });
- this.cels.main.bar.appendChild(this.cels.main.timeControl);
-
- // // Create the current play time display
- this.cels.main.currentTimeDisplay = _V_.createElement("span", { className: "vjs-current-time-display", innerHTML: "00:00" });
- this.cels.main.timeControl.appendChild(this.cels.main.currentTimeDisplay);
- this.addBehavior(this.cels.main.currentTimeDisplay, "currentTimeDisplay");
-
- // Add time separator
- this.cels.main.timeSeparator = _V_.createElement("span", { innerHTML: " / " });
- this.cels.main.timeControl.appendChild(this.cels.main.timeSeparator);
-
- // Create the total duration display
- this.cels.main.durationDisplay = _V_.createElement("span", { className: "vjs-duration-display", innerHTML: "00:00" });
- this.cels.main.timeControl.appendChild(this.cels.main.durationDisplay);
- this.addBehavior(this.cels.main.durationDisplay, "durationDisplay");
-
- // Create the volumne control
- this.cels.main.volumeControl = _V_.createElement("div", {
- className: "vjs-volume-control vjs-control",
- innerHTML: '<div><span class="vjs-vc-1"></span><span class="vjs-vc-2"></span><span class="vjs-vc-3"></span><span class="vjs-vc-4"></span><span class="vjs-vc-5"></span><span class="vjs-vc-6"></span></div>'
- });
- this.cels.main.bar.appendChild(this.cels.main.volumeControl);
- this.addBehavior(this.cels.main.volumeControl, "volumeScrubber");
-
- this.cels.main.volumeDisplay = this.cels.main.volumeControl.children[0];
- this.addBehavior(this.cels.main.volumeDisplay, "volumeDisplay");
-
- // Crete the fullscreen control
- this.cels.main.fullscreenControl = _V_.createElement("div", {
- className: "vjs-fullscreen-control vjs-control",
- innerHTML: '<div><span class="vjs-fc-1"></span><span class="vjs-fc-2"></span><span class="vjs-fc-3"></span><span class="vjs-fc-4"></span></div>'
- });
- this.cels.main.bar.appendChild(this.cels.main.fullscreenControl);
- this.addBehavior(this.cels.main.fullscreenControl, "fullscreenToggle");
- },
- remove: function(){
- this.box.removeChild(this.cels.bigPlayButton);
- delete this.cels.bigPlayButton;
- this.removeBehavior(this.cels.bigPlayButton, "bigPlayButton");
- }
-}
-
-/* Control Bar Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("controlBar",
- function(element){
- if (!this.bels.controlBars) {
- this.bels.controlBars = [];
- // this.addEvent("mouseover", this.showControlBars);
- // this.addEvent("mouseout", this.hideControlBars);
- }
- this.bels.controlBars.push(element);
- },
- function(element){},
- {
- showControlBars: function(){
- this.each(this.bels.controlBars, function(bar){
- // bar.style.opacity = 1;
- bar.style.display = "block";
- });
- },
- hideControlBars: function(){
- this.each(this.bels.controlBars, function(bar){
- // bar.style.opacity = 0;
- bar.style.display = "none";
- });
- }
- }
-);
View
22 dev/src/controls/subtitlesBox.js
@@ -1,22 +0,0 @@
-_V_.controlSets.subtitlesBox = {
- options: {},
- add: function(){
- /* Creating this HTML
-
- <div class="vjs-subtitles"></div>
-
- */
-
- // Create a reference to the element
- var subs = this.cels.subtitlesBox = _V_.createElement("div", { className: "vjs-subtitles" });
-
- // Add the controls to the video's container
- this.box.appendChild(subs);
- this.addBehavior(subs, "subtitlesDisplay");
- },
- remove: function(){
- this.removeBehavior(this.cels.subtitlesBox, "subtitlesDisplay");
- this.box.removeChild(this.cels.subtitlesBox);
- delete this.cels.subtitlesBox;
- }
-};
View
451 dev/src/core.js
@@ -1,451 +0,0 @@
-// HTML5 Shiv. Must be in <head>.
-document.createElement("video");document.createElement("audio");
-
-var VideoJS = _V_ = function(id, addOptions, ready){
-
- // If player has already been created for ID, return player.
- if (_V_.players[id]) {
- return _V_.players[id];
- }
-
- // Allow for element or ID to be passed in.
- var tag = (typeof id == "string" ? _V_.el(id) : id);
- if (!tag || !tag.nodeName) { // Could be a box div also
- throw new TypeError("The element or ID supplied is not valid. (video.js)"); // Returns
- }
-
- // Check if (not) using "new" operator before the function to create new instance
- if (!(this instanceof arguments.callee)) {
- // Return the player attr on the element if it exists
- // Otherwise set up a new player.
- return tag.player || new VideoJS(id, addOptions, ready);
- }
-
- this.tag = tag; // Store the original tag used to set options
-
- var box = this.box = _V_.createElement("div"), // Div to contain video and controls
- options = this.options = {},
- width = options.width = tag.width,
- height = options.height = tag.height,
-
- // Browsers default to 300x150 if there's no width/height or video size data.
- initWidth = width || 300,
- initHeight = height || 150,
-
- // If the HTML5 video is already playing, we'll adjust
- paused = tag.paused;
-
- // Make player findable on elements
- tag.player = box.player = this;
-
- // Wrap video tag in div (box) container
- tag.parentNode.insertBefore(box, tag);
- box.appendChild(tag); // Breaks iPhone, fixed in HTML5 setup.
-
- // Safari (5.1.1) and Chrome (15) both have issues when you use autoplay and a poster and no controls.
- // Chrome just hides the video. Safari hides the video if you move it in the DOM like VJS does.
- // This fixes the Safari issue by removing the poster, which is currently never used again after
- // the video starts playing.
- if (!paused) {
- options.poster = tag.poster
- tag.poster = null;
- tag.play();
- }
-
- // Give video tag properties to box
- box.id = this.id = tag.id; // ID will now reference box, not the video tag
- box.className = tag.className;
- // Update tag id/class for use as HTML5 playback tech
- tag.id += "_html5_api";
- tag.className = "vjs-tech";
-
- // Make player easily findable by ID
- _V_.players[box.id] = this
-
- // Make box use width/height of tag, or default 300x150
- box.setAttribute("width", initWidth);
- box.setAttribute("height", initHeight);
- // Enforce with CSS since width/height attrs don't work on divs
- box.style.width = initWidth+"px";
- box.style.height = initHeight+"px";
- // Remove width/height attrs from tag so CSS can make it 100% width/height
- tag.removeAttribute("width");
- tag.removeAttribute("height");
-
- // Store controls setting, and then remove immediately so native controls don't flash.
- options.controls = tag.getAttribute("controls") !== null;
- tag.removeAttribute("controls");
-
- // Set Options
- _V_.merge(options, _V_.options); // Copy Global Defaults
- _V_.merge(options, this.getVideoTagSettings()); // Override with Video Tag Options
- _V_.merge(options, addOptions); // Override/extend with options from setup call