From ef321a807237ee512af0ec3ab16d6b9e378b7b37 Mon Sep 17 00:00:00 2001 From: Steve Heffernan Date: Tue, 29 Nov 2011 11:40:05 -0800 Subject: [PATCH] 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. --- README.md | 148 +- build.sh | 41 + {dev/build => build}/Create Release Notes.md | 0 {dev/build => build}/combine_sources.sh | 17 +- build/files/README.md | 153 + demo.html => build/files/demo.html | 0 {dev/compare => compare}/compare.css | 0 {dev/compare => compare}/compare.html | 6 +- {dev/compare => compare}/compare.js | 4 +- dev/decisions.txt => decisions.txt | 0 dev/demo-subtitles.srt => demo-subtitles.srt | 0 {dev/design => design}/Icon Design.png | Bin {dev/design => design}/skin.old.css | 0 {dev/design => design}/video-js.css | 0 {dev/design => design}/video-js.png | Bin dev/dev.html => dev.html | 34 +- dev/src/api.js | 298 -- dev/src/autoload.js | 37 - dev/src/behaviors/behaviors.js | 312 -- dev/src/behaviors/seekBar.js | 216 -- dev/src/behaviors/texttrackdisplays.js | 43 - dev/src/behaviors/volume.js | 177 - dev/src/controls/bar.js | 153 - dev/src/controls/bigPlay.js | 52 - dev/src/controls/controls.html | 157 - dev/src/controls/main.js | 134 - dev/src/controls/subtitlesBox.js | 22 - dev/src/core.js | 451 --- dev/src/log.js | 15 - dev/src/tech/h5swf.js | 153 - dev/src/tech/html5.js | 170 - dev/src/ui.js | 262 -- {dev/flash => flash}/swfobject.js | 0 dev/flash/VideoJS.swf => flash/video-js.swf | Bin {dev/src => src}/_begin.js | 0 {dev/src => src}/_end.js | 3 + src/component.js | 183 + src/controls.js | 725 ++++ src/core.js | 146 + {dev/src => src}/ecma.js | 0 {dev/src => src}/events.js | 2 +- {dev/src => src}/json.js | 0 {dev/src => src}/lib.js | 50 +- src/player.js | 607 +++ src/tech.js | 382 ++ {dev/src => src}/tracks.js | 3 +- {dev/src/tech => tech}/flowplayer.js | 2 + {dev/src/tech => tech}/youtube.html | 0 {dev/src/tech => tech}/youtube.js | 2 + {dev/test => test}/qunit/.gitignore | 0 {dev/test => test}/qunit/README.md | 0 .../qunit/addons/canvas/README.md | 0 .../qunit/addons/canvas/canvas-test.js | 0 .../qunit/addons/canvas/canvas.html | 0 .../qunit/addons/canvas/qunit-canvas.js | 0 .../qunit/addons/close-enough/README.md | 0 .../addons/close-enough/close-enough-test.js | 0 .../addons/close-enough/close-enough.html | 0 .../addons/close-enough/qunit-close-enough.js | 0 .../qunit/addons/composite/README.md | 0 .../addons/composite/composite-demo-test.html | 0 .../addons/composite/composite-test.html | 0 .../qunit/addons/composite/composite-test.js | 0 .../addons/composite/dummy-qunit-test.html | 0 .../addons/composite/dummy-same-test.html | 0 .../qunit/addons/composite/index.html | 0 .../addons/composite/qunit-composite.css | 0 .../qunit/addons/composite/qunit-composite.js | 0 .../test => test}/qunit/addons/step/README.md | 0 .../qunit/addons/step/qunit-step.js | 0 .../qunit/addons/step/step-test.js | 0 .../test => test}/qunit/addons/step/step.html | 0 {dev/test => test}/qunit/package.json | 0 {dev/test => test}/qunit/qunit/qunit.css | 0 {dev/test => test}/qunit/qunit/qunit.js | 0 {dev/test => test}/qunit/test/headless.html | 0 {dev/test => test}/qunit/test/index.html | 0 {dev/test => test}/qunit/test/logs.html | 0 {dev/test => test}/qunit/test/logs.js | 0 {dev/test => test}/qunit/test/same.js | 0 {dev/test => test}/qunit/test/test.js | 0 {dev/test => test}/test.html | 0 {dev/test => test}/test.js | 0 video-js.css | 307 -- video-js.png | Bin 7460 -> 0 bytes video-js.swf | Bin 9388 -> 0 bytes video.js | 3284 ----------------- 87 files changed, 2315 insertions(+), 6436 deletions(-) create mode 100755 build.sh rename {dev/build => build}/Create Release Notes.md (100%) rename {dev/build => build}/combine_sources.sh (69%) create mode 100644 build/files/README.md rename demo.html => build/files/demo.html (100%) rename {dev/compare => compare}/compare.css (100%) rename {dev/compare => compare}/compare.html (95%) rename {dev/compare => compare}/compare.js (95%) rename dev/decisions.txt => decisions.txt (100%) rename dev/demo-subtitles.srt => demo-subtitles.srt (100%) rename {dev/design => design}/Icon Design.png (100%) rename {dev/design => design}/skin.old.css (100%) rename {dev/design => design}/video-js.css (100%) rename {dev/design => design}/video-js.png (100%) rename dev/dev.html => dev.html (59%) delete mode 100644 dev/src/api.js delete mode 100644 dev/src/autoload.js delete mode 100644 dev/src/behaviors/behaviors.js delete mode 100644 dev/src/behaviors/seekBar.js delete mode 100644 dev/src/behaviors/texttrackdisplays.js delete mode 100644 dev/src/behaviors/volume.js delete mode 100644 dev/src/controls/bar.js delete mode 100644 dev/src/controls/bigPlay.js delete mode 100644 dev/src/controls/controls.html delete mode 100644 dev/src/controls/main.js delete mode 100644 dev/src/controls/subtitlesBox.js delete mode 100644 dev/src/core.js delete mode 100644 dev/src/log.js delete mode 100644 dev/src/tech/h5swf.js delete mode 100644 dev/src/tech/html5.js delete mode 100644 dev/src/ui.js rename {dev/flash => flash}/swfobject.js (100%) rename dev/flash/VideoJS.swf => flash/video-js.swf (100%) rename {dev/src => src}/_begin.js (100%) rename {dev/src => src}/_end.js (70%) create mode 100644 src/component.js create mode 100644 src/controls.js create mode 100644 src/core.js rename {dev/src => src}/ecma.js (100%) rename {dev/src => src}/events.js (99%) rename {dev/src => src}/json.js (100%) rename {dev/src => src}/lib.js (84%) create mode 100644 src/player.js create mode 100644 src/tech.js rename {dev/src => src}/tracks.js (98%) rename {dev/src/tech => tech}/flowplayer.js (99%) rename {dev/src/tech => tech}/youtube.html (100%) rename {dev/src/tech => tech}/youtube.js (99%) rename {dev/test => test}/qunit/.gitignore (100%) rename {dev/test => test}/qunit/README.md (100%) rename {dev/test => test}/qunit/addons/canvas/README.md (100%) rename {dev/test => test}/qunit/addons/canvas/canvas-test.js (100%) rename {dev/test => test}/qunit/addons/canvas/canvas.html (100%) rename {dev/test => test}/qunit/addons/canvas/qunit-canvas.js (100%) rename {dev/test => test}/qunit/addons/close-enough/README.md (100%) rename {dev/test => test}/qunit/addons/close-enough/close-enough-test.js (100%) rename {dev/test => test}/qunit/addons/close-enough/close-enough.html (100%) rename {dev/test => test}/qunit/addons/close-enough/qunit-close-enough.js (100%) rename {dev/test => test}/qunit/addons/composite/README.md (100%) rename {dev/test => test}/qunit/addons/composite/composite-demo-test.html (100%) rename {dev/test => test}/qunit/addons/composite/composite-test.html (100%) rename {dev/test => test}/qunit/addons/composite/composite-test.js (100%) rename {dev/test => test}/qunit/addons/composite/dummy-qunit-test.html (100%) rename {dev/test => test}/qunit/addons/composite/dummy-same-test.html (100%) rename {dev/test => test}/qunit/addons/composite/index.html (100%) rename {dev/test => test}/qunit/addons/composite/qunit-composite.css (100%) rename {dev/test => test}/qunit/addons/composite/qunit-composite.js (100%) rename {dev/test => test}/qunit/addons/step/README.md (100%) rename {dev/test => test}/qunit/addons/step/qunit-step.js (100%) rename {dev/test => test}/qunit/addons/step/step-test.js (100%) rename {dev/test => test}/qunit/addons/step/step.html (100%) rename {dev/test => test}/qunit/package.json (100%) rename {dev/test => test}/qunit/qunit/qunit.css (100%) rename {dev/test => test}/qunit/qunit/qunit.js (100%) rename {dev/test => test}/qunit/test/headless.html (100%) rename {dev/test => test}/qunit/test/index.html (100%) rename {dev/test => test}/qunit/test/logs.html (100%) rename {dev/test => test}/qunit/test/logs.js (100%) rename {dev/test => test}/qunit/test/same.js (100%) rename {dev/test => test}/qunit/test/test.js (100%) rename {dev/test => test}/test.html (100%) rename {dev/test => test}/test.js (100%) delete mode 100644 video-js.css delete mode 100644 video-js.png delete mode 100644 video-js.swf delete mode 100644 video.js diff --git a/README.md b/README.md index 33b7ebf33..b2146dc76 100644 --- a/README.md +++ b/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. - - - - - -### 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. - - - - -### 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 diff --git a/build.sh b/build.sh new file mode 100755 index 000000000..44bc3bbc4 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/dev/build/Create Release Notes.md b/build/Create Release Notes.md similarity index 100% rename from dev/build/Create Release Notes.md rename to build/Create Release Notes.md diff --git a/dev/build/combine_sources.sh b/build/combine_sources.sh similarity index 69% rename from dev/build/combine_sources.sh rename to build/combine_sources.sh index 1377079ef..1c2f6dcfd 100755 --- a/dev/build/combine_sources.sh +++ b/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 diff --git a/build/files/README.md b/build/files/README.md new file mode 100644 index 000000000..33b7ebf33 --- /dev/null +++ b/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. + + + + + +### 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. + + + + +### 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 diff --git a/demo.html b/build/files/demo.html similarity index 100% rename from demo.html rename to build/files/demo.html diff --git a/dev/compare/compare.css b/compare/compare.css similarity index 100% rename from dev/compare/compare.css rename to compare/compare.css diff --git a/dev/compare/compare.html b/compare/compare.html similarity index 95% rename from dev/compare/compare.html rename to compare/compare.html index b6fd36862..b6accc08c 100644 --- a/dev/compare/compare.html +++ b/compare/compare.html @@ -24,15 +24,17 @@ + + - + diff --git a/dev/compare/compare.js b/compare/compare.js similarity index 95% rename from dev/compare/compare.js rename to compare/compare.js index cf19670b0..f129fe05b 100644 --- a/dev/compare/compare.js +++ b/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, diff --git a/dev/decisions.txt b/decisions.txt similarity index 100% rename from dev/decisions.txt rename to decisions.txt diff --git a/dev/demo-subtitles.srt b/demo-subtitles.srt similarity index 100% rename from dev/demo-subtitles.srt rename to demo-subtitles.srt diff --git a/dev/design/Icon Design.png b/design/Icon Design.png similarity index 100% rename from dev/design/Icon Design.png rename to design/Icon Design.png diff --git a/dev/design/skin.old.css b/design/skin.old.css similarity index 100% rename from dev/design/skin.old.css rename to design/skin.old.css diff --git a/dev/design/video-js.css b/design/video-js.css similarity index 100% rename from dev/design/video-js.css rename to design/video-js.css diff --git a/dev/design/video-js.png b/design/video-js.png similarity index 100% rename from dev/design/video-js.png rename to design/video-js.png diff --git a/dev/dev.html b/dev.html similarity index 59% rename from dev/dev.html rename to dev.html index e9f57cf19..b39a8dbf3 100644 --- a/dev/dev.html +++ b/dev.html @@ -10,40 +10,18 @@ - - - - - - - + + + + - - - - - - - - - - - - - - - - - - - @@ -51,13 +29,13 @@ diff --git a/dev/src/api.js b/dev/src/api.js deleted file mode 100644 index 7617d827e..000000000 --- a/dev/src/api.js +++ /dev/null @@ -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 0) { - for (var i=0,j=vids.length; iPlay', - 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: '
/
' - }); - 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: 'Loaded: 0%' - }); - bar.seekBar.appendChild(bar.loadProgressBar); - this.addBehavior(bar.loadProgressBar, "loadProgressBar"); - - // Play Progress Bar - bar.playProgressBar = _V_.createElement("div", { - className: "vjs-play-progress", - innerHTML: 'Progress: 0%' - }); - bar.seekBar.appendChild(bar.playProgressBar); - - // Seek Handle - bar.seekHandle = _V_.createElement("div", { - className: "vjs-seek-handle", - innerHTML: '00:00', - 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: '
Fullscreen
', - 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: '' - }); - bar.volumeHandle = _V_.createElement("div", { - className: "vjs-volume-handle", - innerHTML: '', - 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: '
Mute
', - 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"); - } -}; diff --git a/dev/src/controls/bigPlay.js b/dev/src/controls/bigPlay.js deleted file mode 100644 index 936d15bd1..000000000 --- a/dev/src/controls/bigPlay.js +++ /dev/null @@ -1,52 +0,0 @@ -_V_.controlSets.bigPlayButton = { - options: {}, - add: function(){ - /* Creating this HTML -
- */ - this.cels.bigPlayButton = _V_.createElement("div", { - className: "vjs-big-play-button", - innerHTML: "" - }); - 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"; - }); - } - } -); diff --git a/dev/src/controls/controls.html b/dev/src/controls/controls.html deleted file mode 100644 index 42f7188a1..000000000 --- a/dev/src/controls/controls.html +++ /dev/null @@ -1,157 +0,0 @@ - - - - - Controls HTML - - - - -
- - -
- - -
-
- Play -
-
- - -
-
- 00:00 -
-
- - -
-
- / -
-
- - -
-
- 00:00 -
-
- - -
-
- 00:00 -
-
- - -
- - -
- - -
- Loaded: 0% -
- - -
- Progress: 0% -
-
- - -
-
- 00:00 -
-
-
- - -
-
- Fullscreen -
-
- - -
- -
- -
- -
- - -
- -
-
- -
- - -
-
- Mute -
-
- - - - - - - - - - - - - - - - - - -
- -
- - - diff --git a/dev/src/controls/main.js b/dev/src/controls/main.js deleted file mode 100644 index c242e1e81..000000000 --- a/dev/src/controls/main.js +++ /dev/null @@ -1,134 +0,0 @@ -/* OLD VERSION OF CONTROL BAR */ -_V_.controlSets.main = { - options: {}, - add: function(){ - /* Creating this HTML -
-
- -
-
-
-
-
-
-
-
- 00:00 / 00:00 -
-
-
- -
-
-
-
- -
-
-
- */ - - 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: "" }); - 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: '
' - }); - 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: '
' - }); - 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"; - }); - } - } -); diff --git a/dev/src/controls/subtitlesBox.js b/dev/src/controls/subtitlesBox.js deleted file mode 100644 index cd156a143..000000000 --- a/dev/src/controls/subtitlesBox.js +++ /dev/null @@ -1,22 +0,0 @@ -_V_.controlSets.subtitlesBox = { - options: {}, - add: function(){ - /* Creating this HTML - -
- - */ - - // 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; - } -}; diff --git a/dev/src/core.js b/dev/src/core.js deleted file mode 100644 index 7b0812e28..000000000 --- a/dev/src/core.js +++ /dev/null @@ -1,451 +0,0 @@ -// HTML5 Shiv. Must be in . -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 - - // Empty video tag sources and tracks so the built in player doesn't use them also. - if (tag.hasChildNodes()) { - for (var i=0,j=tag.childNodes;i 0) { - // Call all functions in ready queue - this.each(this.readyQueue, function(fn){ - fn.call(this); - }); - - // Reset Ready Queue - this.readyQueue = []; - } - }, - - /* Behaviors - Make elements act like specific controls or displays - ================================================================================ */ - /* TODO - Make behavior classes. Use JR's simple inheritance for sub-classing. */ - behaviors: {}, - // New Behavior. Gets called in prototype scope (_V_.fn.newBehavior), so added to all instances. - newBehavior: function(name, add, remove, functions){ - this.behaviors[name] = { add: add, remove: remove }; - this.extend(functions); - }, - addBehavior: function(element, behavior){ - // Allow passing and ID string - if (typeof element == "string") { element = _V_.el(element); } - this.behaviors[behavior].add.call(this, element); - }, - removeBehavior: function(element, behavior){ - if (typeof element == "string") { element = _V_.el(element); } - this.behaviors[behavior].remove.call(this, element); - }, - - appendUI: function(nameORobj){ - var name, uiClass, options, ui; - - if (typeof set == "string") { - name = nameORobj; - - // Assume name of set is a lowercased name of the UI Class (PlayButton, etc.) - uiClass = _V_.capitalize(nameORobj); - - // Can also pass in object to define a different class than the name and add other options - } else { - name = nameORobj.name; - uiClass = nameORobj.uiClass; - options = nameORobj.options; - } - - // Create a new object & element for this controls set - ui = this.ui[name] = new _V_[uiClass](this); - - // Add the UI object's element to the container div (box) - this.box.appendChild(ui.el); - }, - - /* Fallbacks for unsupported event types - ================================================================================ */ - // Manually trigger progress events based on changes to the buffered amount - // Many flash players and older HTML5 browsers don't send progress or progress-like events - manualProgressOn: function(){ - this.manualProgress = true; - // Trigger progress watching when a source begins loading - // this.addEvent("loadstart", _V_.proxy(this, this.trackProgress)); - this.trackProgress(); - - // Set variables of closure - var tech = _V_.tech[this.currentTechName], - el = this.tels[this.currentTechName]; - - // Watch for native progress event - _V_.addEvent(el, "progress", _V_.proxy(this, function(){ - // Remove this listener from the element - _V_.removeEvent(el, "progress", arguments.callee); - // Update known progress support for this playback technology - _V_.updateTechSupport(tech, "event", "progress", true); - // Turn off manual progress tracking - this.manualProgressOff(); - })); - }, - manualProgressOff: function(){ - this.manualProgress = false; - this.removeEvent("loadstart", _V_.proxy(this, this.trackProgress)); - this.stopTrackingProgress(); - }, - - trackProgress: function(){ - this.progressInterval = setInterval(_V_.proxy(this, function(){ - // Don't trigger unless buffered amount is greater than last time - // log(this.values.bufferEnd, this.buffered().end(0), this.duration()) - /* TODO: update for multiple buffered regions */ - if (this.values.bufferEnd < this.buffered().end(0)) { - this.triggerEvent("progress"); - } else if (this.bufferedPercent() == 1) { - this.stopTrackingProgress(); - this.triggerEvent("progress"); // Last update - } - }), 500); - }, - stopTrackingProgress: function(){ clearInterval(this.progressInterval); }, - - /* Time Tracking -------------------------------------------------------------- */ - manualTimeUpdatesOn: function(){ - this.manualTimeUpdates = true; - - this.addEvent("play", this.trackCurrentTime); - this.addEvent("pause", this.stopTrackingCurrentTime); - // timeupdate is also called by .currentTime whenever current time is set - - // Set variables of closure - var tech = _V_.tech[this.currentTechName], - el = this.tels[this.currentTechName]; - - // Watch for native timeupdate event - _V_.addEvent(el, "timeupdate", _V_.proxy(this, function(){ - - // Remove this listener from the element - _V_.removeEvent(el, "timeupdate", arguments.callee); - - // Update known progress support for this playback technology - _V_.updateTechSupport(tech, "event", "timeupdate", true); - - // Turn off manual progress tracking - this.manualTimeUpdatesOff(); - })); - }, - manualTimeUpdatesOff: function(){ - this.manualTimeUpdates = false; - this.stopTrackingCurrentTime(); - this.removeEvent("play", this.trackCurrentTime); - this.removeEvent("pause", this.stopTrackingCurrentTime); - }, - - trackCurrentTime: function(){ - if (this.currentTimeInterval) { this.stopTrackingCurrentTime(); } - this.currentTimeInterval = setInterval(_V_.proxy(this, function(){ - this.triggerEvent("timeupdate"); - }), 250); // 42 = 24 fps // 250 is what Webkit uses // FF uses 15 - }, - // Turn off play progress tracking (when paused or dragging) - stopTrackingCurrentTime: function(){ clearInterval(this.currentTimeInterval); }, - - /* Player event handlers (how the player reacts to certain events) - ================================================================================ */ - handleEnded: function(){ - if (this.options.loop) { - this.currentTime(0); - this.play(); - } else { - // this.pause(); - // this.currentTime(0); - // this.pause(); - } - }, - - /* Utility - ================================================================================ */ - each: function(arr, fn){ - if (!arr || arr.length === 0) { return; } - for (var i=0,j=arr.length; iPlay' - }); - }, - - onClick: function(){ - this.player.play(); - } - -}); - -/* Pause Button -================================================================================ */ -_V_.PauseButton = _V_.Button.extend({ - - createElement: function(){ - return this._super("div", { - className: "vjs-pause-button vjs-control", - innerHTML: '
Pause
' - }); - }, - - onClick: function(){ - this.player.pause(); - } - -}); - -/* Play Toggle - Play or Pause Media -================================================================================ */ -_V_.PlayToggle = _V_.Button.extend({ - - init: function(player, options){ - - player.addEvent("play", _V_.proxy(this, this.onPlay)); - player.addEvent("pause", _V_.proxy(this, this.onPause)); - - return this._super(player, options); - }, - - createElement: function(){ - return this._super("div", { - className: "vjs-play-control vjs-control", - innerHTML: '
Play
' - }); - }, - - // OnClick - Toggle between play and pause - onClick: function(){ - if (this.player.paused()) { - this.player.play(); - } else { - this.player.pause(); - } - }, - - // OnPlay - Add the vjs-playing class to the element so it can change appearance - onPlay: function(){ - _V_.removeClass(this.el, "vjs-paused"); - _V_.addClass(this.el, "vjs-playing"); - }, - - // OnPause - Add the vjs-paused class to the element so it can change appearance - onPause: function(){ - _V_.removeClass(this.el, "vjs-playing"); - _V_.addClass(this.el, "vjs-paused"); - } - -}); - - -/* Fullscreen Toggle Behaviors -================================================================================ */ -_V_.FullscreenToggle = _V_.Button.extend({ - - createElement: function(){ - return this._super("div", { - className: "vjs-fullscreen-control vjs-control", - innerHTML: '
Fullscreen
' - }); - }, - - onClick: function(){ - if (!this.player.videoIsFullScreen) { - this.player.enterFullScreen(); - } else { - this.player.exitFullScreen(); - } - } -}); - -/* Big Play Button -================================================================================ */ -_V_.BigPlayButton = _V_.Button.extend({ - init: function(player){ - - player.addEvent("play", _V_.proxy(this, this.hide)); - player.addEvent("ended", _V_.proxy(this, this.show)); - - return this._super(player); - }, - - createElement: function(){ - return this._super("div", { - className: "vjs-big-play-button", - innerHTML: "" - }); - }, - - onClick: function(){ - this.player.play(); - } -}); - -/* Control Bar -================================================================================ */ -_V_.ControlBar = _V_.UIComponent.extend({ - init: function(player, options){ - this.player = player; - this.el = this.createElement(); - this.children = []; - - player.addEvent("mouseover", _V_.proxy(this, this.show)); - player.addEvent("mouseout", _V_.proxy(this, this.hide)); - - _V_.each(options.children, function(child){ - this.appendUI(child) - }); - - var pt = this.children["playToggle"] = new _V_.PlayToggle(player); - this.el.appendChild(pt.el); - - var ft = this.children["fullscreenToggle"] = new _V_.FullscreenToggle(player); - this.el.appendChild(ft.el); - }, - - createElement: function(){ - return _V_.createElement("div", { - className: "vjs-controls" - }); - }, - - appendUI: function(name){ - var component = this.children[name] = new _V_.PlayToggle(player); - this.el.appendChild(pt.el); - }, - - show: function(){ - // Used for transitions (fading out) - this.el.style.opacity = 1; - // bar.style.display = "block"; - }, - hide: function(){ - this.el.style.opacity = 0; - // bar.style.display = "none"; - } -}); \ No newline at end of file diff --git a/dev/flash/swfobject.js b/flash/swfobject.js similarity index 100% rename from dev/flash/swfobject.js rename to flash/swfobject.js diff --git a/dev/flash/VideoJS.swf b/flash/video-js.swf similarity index 100% rename from dev/flash/VideoJS.swf rename to flash/video-js.swf diff --git a/dev/src/_begin.js b/src/_begin.js similarity index 100% rename from dev/src/_begin.js rename to src/_begin.js diff --git a/dev/src/_end.js b/src/_end.js similarity index 70% rename from dev/src/_end.js rename to src/_end.js index 38b22840a..3b207b034 100644 --- a/dev/src/_end.js +++ b/src/_end.js @@ -2,5 +2,8 @@ // Expose to global window.VideoJS = window._V_ = VideoJS; +// Run Auto-load players +_V_.autoSetup(); + // End self-executing function })(window); \ No newline at end of file diff --git a/src/component.js b/src/component.js new file mode 100644 index 000000000..8efb142a9 --- /dev/null +++ b/src/component.js @@ -0,0 +1,183 @@ +// Using John Resig's Class implementation http://ejohn.org/blog/simple-javascript-inheritance/ +// (function(){var initializing=false, fnTest=/xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; _V_.Class = function(){}; _V_.Class.extend = function(prop) { var _super = this.prototype; initializing = true; var prototype = new this(); initializing = false; for (var name in prop) { prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name]) ? (function(name, fn){ return function() { var tmp = this._super; this._super = _super[name]; var ret = fn.apply(this, arguments); this._super = tmp; return ret; }; })(name, prop[name]) : prop[name]; } function Class() { if ( !initializing && this.init ) this.init.apply(this, arguments); } Class.prototype = prototype; Class.constructor = Class; Class.extend = arguments.callee; return Class;};})(); +(function(){ + var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; + _V_.Class = function(){}; + _V_.Class.extend = function(prop) { + var _super = this.prototype; + initializing = true; + var prototype = new this(); + initializing = false; + for (var name in prop) { + prototype[name] = typeof prop[name] == "function" && + typeof _super[name] == "function" && fnTest.test(prop[name]) ? + (function(name, fn){ + return function() { + var tmp = this._super; + this._super = _super[name]; + var ret = fn.apply(this, arguments); + this._super = tmp; + return ret; + }; + })(name, prop[name]) : + prop[name]; + } + function Class() { + if ( !initializing && this.init ) { + return this.init.apply(this, arguments); + + // Attempting to recreate accessing function form of class. + } else if (!initializing) { + return arguments.callee.prototype.init() + } + } + Class.prototype = prototype; + Class.constructor = Class; + Class.extend = arguments.callee; + return Class; + }; +})(); + +/* Player Component- Base class for all UI objects +================================================================================ */ +_V_.Component = _V_.Class.extend({ + + init: function(player, options){ + this.player = player; + + if (options && options.el) { + this.el = options.el; + } else { + this.el = this.createElement(); + } + + // Array of sub-components + if (options && options.components) { + _V_.each.call(this, options.components, function(comp){ + this.addComponent(comp); + }); + } + }, + + destroy: function(){}, + + createElement: function(type, options){ + options = _V_.merge({ + /* Standar Options */ + }, options || {}); + return _V_.createElement(type || "div", options); + }, + + buildCSSClass: function(){ + // Child classes can include a function that does: + // return "CLASS NAME" + this._super(); + return ""; + }, + + // Add child components to this component. + // Will generate a new child component and then append child component's element to this component's element. + // Takes either the name of the UI component class, or an object that contains a name, UI Class, and options. + addComponent: function(nameORobj){ + var name, componentClass, options, component; + + if (typeof nameORobj == "string") { + name = nameORobj; + + // Can also pass in object to define a different class than the name and add other options + } else { + name = nameORobj.name; + componentClass = nameORobj.componentClass; + options = nameORobj.options; + } + + if (!componentClass) { + // Assume name of set is a lowercased name of the UI Class (PlayButton, etc.) + componentClass = _V_.capitalize(name); + } + + // Create a new object & element for this controls set + // If there's no .player, this is a player + component = new _V_[componentClass](this.player || this, options); + + if (this.components === undefined) { + this.components = []; + } + this.components.push(component); + + // Add the UI object's element to the container div (box) + this.el.appendChild(component.el); + }, + + /* Display + ================================================================================ */ + show: function(){ + this.el.style.display = "block"; + }, + + hide: function(){ + this.el.style.display = "none"; + }, + + addClass: function(classToAdd){ + _V_.addClass(this.el, classToAdd); + }, + + removeClass: function(classToRemove){ + _V_.removeClass(this.el, classToRemove); + }, + + /* Events + ================================================================================ */ + addEvent: function(type, fn){ + return _V_.addEvent(this.el, type, _V_.proxy(this, fn)); + }, + removeEvent: function(type, fn){ + return _V_.removeEvent(this.el, type, fn); + }, + triggerEvent: function(type, e){ + return _V_.triggerEvent(this.el, type, e); + }, + + /* Ready - Trigger functions when component is ready + ================================================================================ */ + ready: function(fn){ + if (this.isReady) { + fn.call(this); + } else { + if (this.readyQueue !== undefined) { + this.readyQueue = []; + } + this.readyQueue.push(fn); + } + }, + + triggerReady: function(){ + if (this.isReady) return; + this.isReady = true; + if (this.readyQueue.length > 0) { + // Call all functions in ready queue + this.each(this.readyQueue, function(fn){ + fn.call(this); + }); + + // Reset Ready Queue + this.readyQueue = []; + } + }, + + /* Utility + ================================================================================ */ + each: function(arr, fn){ + if (!arr || arr.length === 0) { return; } + for (var i=0,j=arr.length; i' + (this.buttonText || "Need Text") + '' + }); + }, + + // Click - Override with specific functionality for button + onClick: function(){}, + + // Focus - Add keyboard functionality to element + onFocus: function(){ + _V_.addEvent(document, "keyup", _V_.proxy(this, this.onKeyPress)); + }, + + // KeyPress (document level) - Trigger click when keys are pressed + onKeyPress: function(event){ + // Check for space bar (32) or enter (13) keys + if (event.which == 32 || event.which == 13) { + event.preventDefault(); + this.onClick(); + } + }, + + // Blur - Remove keyboard triggers + onBlur: function(){ + _V_.removeEvent(document, "keyup", _V_.proxy(this, this.onKeyPress)); + } + +}); + +/* Play Button +================================================================================ */ +_V_.PlayButton = _V_.Button.extend({ + + buttonText: "Play", + + buildCSSClass: function(){ + return "vjs-play-button " + this._super(); + }, + + onClick: function(){ + this.player.play(); + } + +}); + +/* Pause Button +================================================================================ */ +_V_.PauseButton = _V_.Button.extend({ + + buttonText: "Pause", + + buildCSSClass: function(){ + return "vjs-pause-button " + this._super(); + }, + + onClick: function(){ + this.player.pause(); + } + +}); + +/* Play Toggle - Play or Pause Media +================================================================================ */ +_V_.PlayToggle = _V_.Button.extend({ + + buttonText: "Play", + + init: function(player, options){ + this._super(player, options); + + player.addEvent("play", _V_.proxy(this, this.onPlay)); + player.addEvent("pause", _V_.proxy(this, this.onPause)); + }, + + buildCSSClass: function(){ + return "vjs-play-control " + this._super(); + }, + + // OnClick - Toggle between play and pause + onClick: function(){ + if (this.player.paused()) { + this.player.play(); + } else { + this.player.pause(); + } + }, + + // OnPlay - Add the vjs-playing class to the element so it can change appearance + onPlay: function(){ + _V_.removeClass(this.el, "vjs-paused"); + _V_.addClass(this.el, "vjs-playing"); + }, + + // OnPause - Add the vjs-paused class to the element so it can change appearance + onPause: function(){ + _V_.removeClass(this.el, "vjs-playing"); + _V_.addClass(this.el, "vjs-paused"); + } + +}); + + +/* Fullscreen Toggle Behaviors +================================================================================ */ +_V_.FullscreenToggle = _V_.Button.extend({ + + buttonText: "Fullscreen", + + buildCSSClass: function(){ + return "vjs-fullscreen-control " + this._super(); + }, + + onClick: function(){ + if (!this.player.videoIsFullScreen) { + this.player.enterFullScreen(); + } else { + this.player.exitFullScreen(); + } + } + +}); + +/* Big Play Button +================================================================================ */ +_V_.BigPlayButton = _V_.Button.extend({ + init: function(player, options){ + this._super(player, options); + + player.addEvent("play", _V_.proxy(this, this.hide)); + player.addEvent("ended", _V_.proxy(this, this.show)); + }, + + createElement: function(){ + return this._super("div", { + className: "vjs-big-play-button", + innerHTML: "" + }); + }, + + onClick: function(){ + this.player.play(); + } +}); + +/* Control Bar +================================================================================ */ +_V_.ControlBar = _V_.Component.extend({ + init: function(player, options){ + this._super(player, options); + + // player.addEvent("mouseover", _V_.proxy(this, this.show)); + // player.addEvent("mouseout", _V_.proxy(this, this.hide)); + }, + + createElement: function(){ + return _V_.createElement("div", { + className: "vjs-controls" + }); + }, + + show: function(){ + // Used for transitions (fading out) + this.el.style.opacity = 1; + // bar.style.display = "block"; + }, + + hide: function(){ + this.el.style.opacity = 0; + // bar.style.display = "none"; + } +}); + +/* Time +================================================================================ */ +_V_.CurrentTimeDisplay = _V_.Component.extend({ + + init: function(player, options){ + this._super(player, options); + + player.addEvent("timeupdate", _V_.proxy(this, this.updateContent)); + }, + + createElement: function(){ + var el = this._super("div", { + className: "vjs-current-time vjs-time-controls vjs-control" + }); + + this.content = _V_.createElement("div", { + className: "vjs-current-time-display", + innerHTML: '0:00' + }); + + el.appendChild(_V_.createElement("div").appendChild(this.content)); + return el; + }, + + updateContent: function(){ + // Allows for smooth scrubbing, when player can't keep up. + var time = (this.player.scrubbing) ? this.player.values.currentTime : this.player.currentTime(); + this.content.innerHTML = _V_.formatTime(time, this.player.duration()); + } + +}); + +_V_.DurationDisplay = _V_.Component.extend({ + + init: function(player, options){ + this._super(player, options); + + player.addEvent("timeupdate", _V_.proxy(this, this.updateContent)); + }, + + createElement: function(){ + var el = this._super("div", { + className: "vjs-duration vjs-time-controls vjs-control" + }); + + this.content = _V_.createElement("div", { + className: "vjs-duration-display", + innerHTML: '0:00' + }); + + el.appendChild(_V_.createElement("div").appendChild(this.content)); + return el; + }, + + updateContent: function(){ + if (this.player.duration()) { this.content.innerHTML = _V_.formatTime(this.player.duration()); } + } + +}); + +// Time Separator (Not used in main skin, but still available, and could be used as a 'spare element') +_V_.TimeDivider = _V_.Component.extend({ + + createElement: function(){ + return this._super("div", { + className: "vjs-time-divider", + innerHTML: '
/
' + }); + } + +}); + +_V_.RemainingTimeDisplay = _V_.Component.extend({ + + init: function(player, options){ + this._super(player, options); + + player.addEvent("timeupdate", _V_.proxy(this, this.updateContent)); + }, + + createElement: function(){ + var el = this._super("div", { + className: "vjs-remaining-time vjs-time-controls vjs-control" + }); + + this.content = _V_.createElement("div", { + className: "vjs-remaining-time-display", + innerHTML: '-0:00' + }); + + el.appendChild(_V_.createElement("div").appendChild(this.content)); + return el; + }, + + updateContent: function(){ + if (this.player.duration()) { this.content.innerHTML = "-"+_V_.formatTime(this.player.remainingTime()); } + + // Allows for smooth scrubbing, when player can't keep up. + // var time = (this.player.scrubbing) ? this.player.values.currentTime : this.player.currentTime(); + // this.content.innerHTML = _V_.formatTime(time, this.player.duration()); + } + +}); + +/* Progress +================================================================================ */ + +// Progress Control: Seek, Load Progress, and Play Progress +_V_.ProgressControl = _V_.Component.extend({ + + createElement: function(){ + return this._super("div", { + className: "vjs-progress-control vjs-control" + }); + } + +}); + +// Seek Bar and holder for the progress bars +_V_.SeekBar = _V_.Component.extend({ + + init: function(player, options){ + this._super(player, options); + + _V_.each.call(this, this.components, function(comp){ + if (comp instanceof _V_.PlayProgressBar) { + this.playProgressBar = comp; + } else if (comp instanceof _V_.SeekHandle) { + this.seekHandle = comp; + } + }); + + player.addEvent("timeupdate", _V_.proxy(this, this.update)); + + _V_.addEvent(this.el, "mousedown", _V_.proxy(this, this.onMouseDown)); + _V_.addEvent(this.el, "focus", _V_.proxy(this, this.onFocus)); + _V_.addEvent(this.el, "blur", _V_.proxy(this, this.onBlur)); + + // _V_.addEvent(element, "mousedown", _V_.proxy(element, function(event){ + // player.onSeekBarMouseDown(event, this); + // })); + }, + + createElement: function(){ + return this._super("div", { + className: "vjs-progress-holder" + }); + }, + + update: function(){ + // If scrubbing, use the cached currentTime value for speed + var progress = /* (this.player.scrubbing) ? this.player.values.currentTime / this.player.duration() : */ this.player.currentTime() / this.player.duration(); + // Protect against no duration and other division issues + if (isNaN(progress)) { progress = 0; } + + var // barData = _V_.getData(bar), + barX = _V_.findPosX(this.el), + barW = this.el.offsetWidth, + handle = this.seekHandle, + progBar = this.playProgressBar, + handleW = (handle) ? handle.el.offsetWidth : 0; + + // Adjusted X and Width, so handle doesn't go outside the bar + barAX = barX + (handleW / 2), + barAW = barW - handleW, + progBarProgress = _V_.round(progress * barAW + handleW / 2) + "px"; + + if (progBar && progBar.el.style) { + progBar.el.style.width = progBarProgress; + } + + if (handle) { + handle.el.style.left = _V_.round(progress * barAW)+"px"; + } + }, + + onMouseDown: function(event){ + event.preventDefault(); + _V_.blockTextSelection(); + + this.player.currSeekBar = this; + this.player.currHandle = this.seekHandle || false; + + this.player.scrubbing = true; + + this.player.videoWasPlaying = !this.player.paused(); + this.player.pause(); + + this.setCurrentTimeWithScrubber(event); + _V_.addEvent(document, "mousemove", _V_.proxy(this, this.onMouseMove)); + _V_.addEvent(document, "mouseup", _V_.proxy(this, this.onMouseUp)); + }, + + setCurrentTimeWithScrubber: function(event){ + var bar = this.el, + barX = _V_.findPosX(bar), + barW = bar.offsetWidth, + handle = this.player.currHandle.el, + 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.player.duration(); + + // Don't let video end while scrubbing. + if (newTime == this.player.duration()) { newTime = newTime - 0.1; } + + // Set new time (tell player to seek to new time) + this.player.currentTime(newTime); + }, + + onMouseMove: function(event){ // Removeable + this.setCurrentTimeWithScrubber(event); + }, + onMouseUp: function(event){ // Removeable + _V_.unblockTextSelection(); + _V_.removeEvent(document, "mousemove", this.onMouseMove, false); + _V_.removeEvent(document, "mouseup", this.onMouseUp, false); + this.player.scrubbing = false; + if (this.player.videoWasPlaying) { + this.player.play(); + } + }, + + onFocus: function(event){ + _V_.addEvent(document, "keyup", _V_.proxy(this, this.onKeyPress)); + }, + onKeyPress: function(event){ + if (event.which == 37) { + event.preventDefault(); + this.player.currentTime(this.player.currentTime() - 1); + } else if (event.which == 39) { + event.preventDefault(); + this.player.currentTime(this.player.currentTime() + 1); + } + }, + onBlur: function(event){ + _V_.removeEvent(document, "keyup", _V_.proxy(this, this.onKeyPress)); + } + +}); + +// Load Progress Bar +_V_.LoadProgressBar = _V_.Component.extend({ + + init: function(player, options){ + this._super(player, options); + player.addEvent("progress", _V_.proxy(this, this.update)); + }, + + createElement: function(){ + return this._super("div", { + className: "vjs-load-progress", + innerHTML: 'Loaded: 0%' + }); + }, + + update: function(){ + if (this.el.style) { this.el.style.width = _V_.round(this.player.bufferedPercent() * 100, 2) + "%"; } + } + +}); + +// Play Progress Bar +_V_.PlayProgressBar = _V_.Component.extend({ + + createElement: function(){ + return this._super("div", { + className: "vjs-play-progress", + innerHTML: 'Progress: 0%' + }); + } + +}); + +// Seek Handle +// SeekBar Behavior includes play progress bar, and seek handle +// Needed so it can determine seek position based on handle position/size +_V_.SeekHandle = _V_.Component.extend({ + + createElement: function(){ + return this._super("div", { + className: "vjs-seek-handle", + innerHTML: '00:00', + tabIndex: 0, + role: "slider", "aria-valuenow": 0, "aria-valuemin": 0, "aria-valuemax": 100 + }); + } + +}); + +/* Volume Scrubber +================================================================================ */ +// Progress Control: Seek, Load Progress, and Play Progress +_V_.VolumeControl = _V_.Component.extend({ + + createElement: function(){ + return this._super("div", { + className: "vjs-volume-control vjs-control" + }); + } + +}); + +_V_.VolumeBar = _V_.Component.extend({ + + init: function(player, options){ + this._super(player, options); + + _V_.each.call(this, this.components, function(comp){ + if (comp instanceof _V_.VolumeLevel) { + this.volumeLevel = comp; + } else if (comp instanceof _V_.VolumeHandle) { + this.volumeHandle = comp; + } + }); + + player.addEvent("volumechange", _V_.proxy(this, this.update)); + + _V_.addEvent(this.el, "mousedown", _V_.proxy(this, this.onMouseDown)); + // _V_.addEvent(this.el, "focus", _V_.proxy(this, this.onFocus)); + // _V_.addEvent(this.el, "blur", _V_.proxy(this, this.onBlur)); + }, + + createElement: function(){ + return this._super("div", { + className: "vjs-volume-bar" + }); + }, + + onMouseDown: function(event){ + event.preventDefault(); + _V_.blockTextSelection(); + + this.player.currVolumeBar = this; + this.player.currHandle = this.volumeHandle || false; + + this.setVolumeWithSlider(event); + _V_.addEvent(document, "mousemove", _V_.proxy(this, this.onMouseMove)); + _V_.addEvent(document, "mouseup", _V_.proxy(this, this.onMouseUp)); + }, + onMouseMove: function(event){ // Removeable + this.setVolumeWithSlider(event); + }, + onMouseUp: function(event){ // Removeable + _V_.unblockTextSelection(); + _V_.removeEvent(document, "mousemove", this.onMouseMove, false); + _V_.removeEvent(document, "mouseup", this.onMouseUp, false); + }, + + setVolumeWithSlider: function(event){ + var bar = this.el, + barX = _V_.findPosX(bar), + barW = bar.offsetWidth, + handle = (this.player.currHandle) ? this.player.currHandle.el : false, + 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.player.duration(); + + this.player.volume(percent); + }, + + update: function(){ + var vol = this.player.volume(); + + var bar = this.el; + barX = _V_.findPosX(bar), + barW = bar.offsetWidth, + handle = (this.volumeHandle) ? this.volumeHandle.el : false, + level = (this.volumeLevel) ? this.volumeLevel.el : false, + handleW = (handle) ? handle.offsetWidth : 0; + + // Adjusted X and Width, so handle doesn't go outside the bar + barAX = barX + (handleW / 2), + barAW = barW - handleW, + progBarProgress = _V_.round(vol * barAW + handleW / 2) + "px"; + + if (level) { + level.style.width = progBarProgress; + } + + if (handle) { + handle.style.left = _V_.round(vol * barAW)+"px"; + } + } + +}); + +_V_.VolumeLevel = _V_.Component.extend({ + + createElement: function(){ + return this._super("div", { + className: "vjs-volume-level", + innerHTML: '' + }); + } + +}); + +_V_.VolumeHandle = _V_.Component.extend({ + + createElement: function(){ + return this._super("div", { + className: "vjs-volume-handle", + innerHTML: '', + tabindex: 0, + role: "slider", "aria-valuenow": 0, "aria-valuemin": 0, "aria-valuemax": 100 + }); + } + +}); + +_V_.MuteToggle = _V_.Button.extend({ + + init: function(player, options){ + this._super(player, options); + + player.addEvent("volumechange", _V_.proxy(this, this.update)); + }, + + createElement: function(){ + return this._super("div", { + className: "vjs-mute-control vjs-control", + innerHTML: '
Mute
' + }); + }, + + onClick: function(event){ + this.player.muted( this.player.muted() ? false : true ); + }, + + update: function(event){ + var vol = this.player.volume(), + level = 3; + + if (vol == 0 || this.player.muted()) { + level = 0; + } else if (vol < 0.33) { + level = 1; + } else if (vol < 0.67) { + level = 2; + } + + /* TODO improve muted icon classes */ + _V_.each.call(this, [0,1,2,3], function(i){ + _V_.removeClass(this.el, "vjs-vol-"+i); + }); + _V_.addClass(this.el, "vjs-vol-"+level); + } + +}); + + +/* 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. + +// Base class for all track displays. Should not be instantiated on its own. +_V_.TextTrackDisplay = _V_.Component.extend({ + + init: function(player, options){ + this._super(player, options); + + player.addEvent(this.trackType + "update", _V_.proxy(this, this.update)); + }, + + createElement: function(){ + return this._super("div", { + className: "vjs-" + this.trackType, + }); + }, + + update: function(){ + this.el.innerHTML = this.player.textTrackValue(this.trackType); + } + +}); + +_V_.SubtitlesDisplay = _V_.TextTrackDisplay.extend({ + + trackType: "subtitles" + +}); +_V_.CaptionsDisplay = _V_.TextTrackDisplay.extend({ + + trackType: "captions" + +}); +_V_.ChaptersDisplay = _V_.TextTrackDisplay.extend({ + + trackType: "chapters" + +}); +_V_.DescriptionsDisplay = _V_.TextTrackDisplay.extend({ + + trackType: "descriptions" + +}); \ No newline at end of file diff --git a/src/core.js b/src/core.js new file mode 100644 index 000000000..58cf5a716 --- /dev/null +++ b/src/core.js @@ -0,0 +1,146 @@ +// HTML5 Shiv. Must be in to support older browsers. +document.createElement("video");document.createElement("audio"); + +var VideoJS = function(id, addOptions, ready){ + + var tag; + + // Allow for element or ID to be passed in + // String ID + if (typeof id == "string") { + + // Adjust for jQuery ID syntax + if (id.indexOf("#") === 0) { + id = id.slice(1); + } + + // If a player instance has already been created for this ID return it. + if (_V_.players[id]) { + return _V_.players[id]; + + // Otherwise get element for ID + } else { + tag = _V_.el(id) + } + + // ID is a media element + } else { + tag = id; + } + + // Check for a useable element + if (!tag || !tag.nodeName) { // re: nodeName, could be a box div also + throw new TypeError("The element or ID supplied is not valid. (video.js)"); // Returns + } + + // Element may have a player attr referring to an already created player instance. + // If not, set up a new player and return the instance. + return tag.player || new _V_.Player(id, addOptions, ready); +}, + +// Shortcut +_V_ = VideoJS; + +VideoJS.players = {}; + +VideoJS.options = { + + // Default order of fallback technology + techOrder: ["HTML5","H5swf"], + // techOrder: ["H5swf","HTML5"], + + // Default of web browser is 300x150. Should rely on source width/height. + width: "auto", + height: "auto", + + // Included control sets + components: [ + "bigPlayButton", + { name: "controlBar", options: { + components: [ + "playToggle", + "fullscreenToggle", + "currentTimeDisplay", + "timeDivider", + "durationDisplay", + "remainingTimeDisplay", + { name: "progressControl", options: { + components: [ + { name: "seekBar", options: { + components: [ + "loadProgressBar", + "playProgressBar", + "seekHandle" + ]} + } + ]} + }, + { name: "volumeControl", options: { + components: [ + { name: "volumeBar", options: { + components: [ + "volumeLevel", + "volumeHandle" + ]} + } + ]} + }, + "muteToggle" + ] + }}, + "subtitlesDisplay"/*, "replay"*/ + ] +}; + +// Automatically set up any tags that have a data-setup attribute +_V_.autoSetup = function(){ + var vids = document.getElementsByTagName("video"), + options, vid, player; + + // Check if any media elements exist + if (vids && vids.length > 0) { + + for (var i=0,j=vids.length; i 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); + _V_.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.el.width = width; + this.el.style.width = width+"px"; + if (!skipListeners) { this.triggerEvent("resize"); } + return this; + } + return parseInt(this.el.getAttribute("width")); + }, + height: function(height){ + if (height !== undefined) { + this.el.height = height; + this.el.style.height = height+"px"; + this.triggerEvent("resize"); + return this; + } + return parseInt(this.el.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.el, "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.el, "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 or */ -.video-js .vjs-tech { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } - -/* Fullscreen Styles */ -body.vjs-full-window { - padding: 0; margin: 0; - height: 100%; overflow-y: auto; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */ -} -.video-js.vjs-fullscreen { - position: fixed; overflow: hidden; z-index: 1000; left: 0; top: 0; bottom: 0; right: 0; width: 100% !important; height: 100% !important; - _position: absolute; /* IE6 Full-window (underscore hack) */ -} - -/* Subtiles Style */ -.video-js .vjs-subtitles { color: #fff; font-size: 20px; text-align: center; position: absolute; bottom: 40px; left: 0; right: 0; } - -/* DEFAULT SKIN (override in another file) -================================================================================ -Instead of editing this file, I recommend creating your own skin CSS file to be included after this file, -so you can upgrade to newer versions easier. You can remove all these styles by removing the 'vjs-default-skin' class from the tag. */ - -/* The default control bar. Created by bar.js */ -.vjs-default-skin .vjs-controls { - position: absolute; - bottom: 0; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */ - left: 0; right: 0; /* 100% width of div */ - opacity: 0.85; display: block; /* Start hidden */ - margin: 0; padding: 0; /* Controls are absolutely position, so no padding necessary */ - height: 2.6em; /* Including any margin you want above or below control items */ - color: #fff; border-top: 1px solid #404040; - - /* CSS Gradient */ - /* Can use the Ultimate CSS Gradient Generator: http://www.colorzilla.com/gradient-editor/ */ - background: #242424; /* Old browsers */ - background: -moz-linear-gradient(top, #242424 50%, #1f1f1f 50%, #171717 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(50%,#242424), color-stop(50%,#1f1f1f), color-stop(100%,#171717)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Opera11.10+ */ - background: -ms-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* IE10+ */ - /* Filter was causing a lot of weird issues in IE. Elements would stop showing up, or other styles would break. */ - /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#171717',GradientType=0 );*/ /* IE6-9 */ - background: linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* W3C */ - - /* Fade-in using CSS Transitions */ - -webkit-transition: opacity 0.3s linear; - -moz-transition: opacity 0.3s linear; - -o-transition: opacity 0.3s linear; - -ms-transition: opacity 0.3s linear; - transition: opacity 0.3s linear; -} - -/* General styles for individual controls. */ -.vjs-default-skin .vjs-control { - position: relative; float: left; - text-align: center; margin: 0; padding: 0; - height: 2.6em; width: 2.6em; -} - -.vjs-default-skin .vjs-control:focus { - outline: 0; -} - -/* Hide control text visually, but have it available for screenreaders: h5bp.com/v */ -.vjs-default-skin .vjs-control-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } - - -/* Play/Pause --------------------------------------------------------------------------------- */ -.vjs-default-skin .vjs-play-control { width: 5em; cursor: pointer !important; } -/* Play Icon */ -.vjs-default-skin.vjs-paused .vjs-play-control div { width: 15px; height: 17px; background: url('video-js.png'); margin: 0.5em auto 0; } -.vjs-default-skin.vjs-playing .vjs-play-control div { width: 15px; height: 17px; background: url('video-js.png') -25px 0; margin: 0.5em auto 0; } - -/* Rewind --------------------------------------------------------------------------------- */ -.vjs-default-skin .vjs-rewind-control { width: 5em; cursor: pointer !important; } -.vjs-default-skin .vjs-rewind-control div { width: 19px; height: 16px; background: url('video-js.png'); margin: 0.5em auto 0; } - -/* Volume/Mute --------------------------------------------------------------------------------- */ -.vjs-default-skin .vjs-mute-control { width: 3.8em; cursor: pointer !important; float: right; } -.vjs-default-skin .vjs-mute-control div { width: 22px; height: 16px; background: url('video-js.png') -75px -25px; margin: 0.5em auto 0; } -.vjs-default-skin .vjs-mute-control.vjs-vol-0 div { background: url('video-js.png') 0 -25px; } -.vjs-default-skin .vjs-mute-control.vjs-vol-1 div { background: url('video-js.png') -25px -25px; } -.vjs-default-skin .vjs-mute-control.vjs-vol-2 div { background: url('video-js.png') -50px -25px; } - - -.vjs-default-skin .vjs-volume-control { width: 5em; float: right; } -.vjs-default-skin .vjs-volume-bar { - position: relative; width: 5em; height: 0.6em; margin: 1em auto 0; cursor: pointer !important; - - -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; - - background: #666; - background: -moz-linear-gradient(top, #333, #666); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#666)); - background: -webkit-linear-gradient(top, #333, #666); - background: -o-linear-gradient(top, #333, #666); - background: -ms-linear-gradient(top, #333, #666); - background: linear-gradient(top, #333, #666); -} -.vjs-default-skin .vjs-volume-level { - position: absolute; top: 0; left: 0; height: 0.6em; - - -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; - - background: #fff; - background: -moz-linear-gradient(top, #fff, #ccc); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ccc)); - background: -webkit-linear-gradient(top, #fff, #ccc); - background: -o-linear-gradient(top, #fff, #ccc); - background: -ms-linear-gradient(top, #fff, #ccc); - background: linear-gradient(top, #fff, #ccc); -} -.vjs-default-skin .vjs-volume-handle { - position: absolute; top: -0.2em; width: 0.8em; height: 0.8em; background: #ccc; left: 0; - border: 1px solid #fff; - -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em; -} - -/* Progress --------------------------------------------------------------------------------- */ -.vjs-default-skin div.vjs-progress-control { - position: absolute; - left: 4.8em; right: 4.8em; /* Leave room for time displays. */ - height: 1.0em; width: auto; - top: -1.3em; /* Set above the rest of the controls. And leave room for 2px of borders (progress bottom and controls top). */ - border-bottom: 1px solid #1F1F1F; - border-top: 1px solid #222; - - /* CSS Gradient */ - background: #333; - background: -moz-linear-gradient(top, #333, #222); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#222)); - background: -webkit-linear-gradient(top, #333, #222); - background: -o-linear-gradient(top, #333, #222); - background: -ms-linear-gradient(top, #333, #222); - background: linear-gradient(top, #333, #222); - - /* 1px top shadow */ -/* -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/ -} - -/* Box containing play and load progresses. Also acts as seek scrubber. */ -.vjs-default-skin .vjs-progress-holder { - position: relative; cursor: pointer !important; /*overflow: hidden;*/ - padding: 0; margin: 0; /* Placement within the progress control item */ - height: 1.0em; - -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em; - - /* CSS Gradient */ - background: #111; - background: -moz-linear-gradient(top, #111, #262626); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111), to(#262626)); - background: -webkit-linear-gradient(top, #111, #262626); - background: -o-linear-gradient(top, #111, #262626); - background: -ms-linear-gradient(top, #111, #262626); - background: linear-gradient(top, #111, #262626); -} -.vjs-default-skin .vjs-progress-holder .vjs-play-progress, -.vjs-default-skin .vjs-progress-holder .vjs-load-progress { /* Progress Bars */ - position: absolute; display: block; height: 1.0em; margin: 0; padding: 0; - left: 0; top: 0; /*Needed for IE6*/ - -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em; - - /*width: 0;*/ -} - -.vjs-default-skin .vjs-play-progress { - /* CSS Gradient. */ - background: #fff; /* Old browsers */ - background: -moz-linear-gradient(top, #fff 0%, #d6d6d6 50%, #fff 100%); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#fff), color-stop(50%,#d6d6d6), color-stop(100%,#fff)); - background: -webkit-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%); - background: -o-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%); - background: -ms-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%); - background: linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%); - - background: #efefef; - background: -moz-linear-gradient(top, #efefef 0%, #f5f5f5 50%, #dbdbdb 50%, #f1f1f1 100%); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#efefef), color-stop(50%,#f5f5f5), color-stop(50%,#dbdbdb), color-stop(100%,#f1f1f1)); - background: -webkit-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%); - background: -o-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%); - background: -ms-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f1f1f1',GradientType=0 ); - background: linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%); -} -.vjs-default-skin .vjs-load-progress { - opacity: 0.8; - - /* CSS Gradient */ - background: #666; - background: -moz-linear-gradient(top, #666, #333); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#333)); - background: -webkit-linear-gradient(top, #666, #333); - background: -o-linear-gradient(top, #666, #333); - background: -ms-linear-gradient(top, #666, #333); - background: linear-gradient(top, #666, #333); -} - -.vjs-default-skin div.vjs-seek-handle { - position: absolute; - width: 16px; height: 16px; /* Match img pixles */ - margin-top: -0.3em; - left: 0; top: 0; /*Needed for IE6*/ - - background: url('video-js.png') 0 -50px; - /* CSS Curved Corners. Needed to make shadows curved. */ - -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; border-radius: 0.8em; - /* CSS Shadows */ - -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000; -} -/* Time Display --------------------------------------------------------------------------------- */ -.vjs-default-skin .vjs-time-controls { - position: absolute; - right: 0; - height: 1.0em; width: 4.8em; - top: -1.3em; - border-bottom: 1px solid #1F1F1F; - border-top: 1px solid #222; - background-color: #333; - - font-size: 1em; line-height: 1.0em; font-weight: normal; font-family: Helvetica, Arial, sans-serif; - - background: #333; - background: -moz-linear-gradient(top, #222, #333); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333)); - background: -webkit-linear-gradient(top, #222, #333); - background: -o-linear-gradient(top, #333, #222); - background: -ms-linear-gradient(top, #333, #222); - background: linear-gradient(top, #333, #222); - - /* 1px top shadow */ -/* -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/ -} - -.vjs-default-skin .vjs-current-time { left: 0; } - -.vjs-default-skin .vjs-duration { right: 0; display: none; } -.vjs-default-skin .vjs-remaining-time { right: 0; } - -.vjs-time-divider { display:none; } - -.vjs-default-skin .vjs-time-control { font-size: 1em; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; } -.vjs-default-skin .vjs-time-control span { line-height: 25px; /* Centering vertically */ } - -/* Fullscreen --------------------------------------------------------------------------------- */ -.vjs-secondary-controls { float: right; } - -.vjs-default-skin .vjs-fullscreen-control { width: 3.8em; cursor: pointer !important; float: right; } -.vjs-default-skin .vjs-fullscreen-control div { width: 16px; height: 16px; background: url('video-js.png') -50px 0; margin: 0.5em auto 0; } - -.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control div { background: url('video-js.png') -75px 0; } - - -/* Big Play Button (at start) ----------------------------------------------------------*/ -.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; - -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; - - background: #454545; - background: -moz-linear-gradient(top, #454545 0%, #232323 50%, #161616 50%, #3f3f3f 100%); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#454545), color-stop(50%,#232323), color-stop(50%,#161616), color-stop(100%,#3f3f3f)); - background: -webkit-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%); - background: -o-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%); - background: -ms-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#3f3f3f',GradientType=0 ); - background: linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%); - - /* CSS Shadows */ - -webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000; box-shadow: 4px 4px 8px #000; -} - -.vjs-default-skin div.vjs-big-play-button:hover { - -webkit-box-shadow: 0 0 80px #fff; -moz-box-shadow: 0 0 80px #fff; box-shadow: 0 0 80px #fff; -} - -.vjs-default-skin div.vjs-big-play-button span { - position: absolute; top: 50%; left: 50%; - display: block; width: 35px; height: 42px; - margin: -20px 0 0 -15px; /* Using negative margin to center image. */ - background: url('video-js.png') -100px 0; -} \ No newline at end of file diff --git a/video-js.png b/video-js.png deleted file mode 100644 index c692d12322ab64229ea74a827db11c8745c09afc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7460 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 diff --git a/video.js b/video.js deleted file mode 100644 index 8e8d75a22..000000000 --- a/video.js +++ /dev/null @@ -1,3284 +0,0 @@ -// Self-executing function to prevent global vars and help with minification -;(function(window, undefined){ - var document = window.document; - -// HTML5 Shiv. Must be in . -document.createElement("video");document.createElement("audio"); - -var VideoJS = _V_ = function(id, options){ - - // 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)"); - return; - } - - // 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, options); - } - - this.tag = tag; - var box = this.box = _V_.createElement("div"), - width = tag.width || 300, - height = tag.height || 150; - - // 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. - - // Give video tag properties to box - box.id = tag.id; // ID will now reference box, not the video tag - box.className = tag.className; - box.setAttribute("width", width); - box.setAttribute("height", height); - box.style.width = width+"px"; - box.style.height = height+"px"; - - // Strip tag of basic properties - tag.id += "_html5_api"; - tag.className = "vjs-tech"; - tag.removeAttribute("width"); - tag.removeAttribute("height"); - tag.removeAttribute("controls"); - - // Same id for player/box - this.id = box.id; - - // Default Options - this.options = _V_.options; // Global Defaults - _V_.merge(this.options, this.getVideoTagSettings()); // Override with Video Tag Options - _V_.merge(this.options, options); // Override/extend with options from setup call - - // Empty video tag sources and tracks so the built in player doesn't use them also. - if (tag.hasChildNodes()) { - for (var i=0,j=tag.childNodes;i 0) { - // Call all functions in ready queue - this.each(this.readyQueue, function(fn){ - fn.call(this); - }); - - // Reset Ready Queue - this.readyQueue = []; - } - }, - - /* Behaviors - Make elements act like specific controls or displays - ================================================================================ */ - /* TODO - Make behavior classes. Use JR's simple inheritance for sub-classing. */ - behaviors: {}, - // New Behavior. Gets called in prototype scope (_V_.fn.newBehavior), so added to all instances. - newBehavior: function(name, add, remove, functions){ - this.behaviors[name] = { add: add, remove: remove }; - this.extend(functions); - }, - addBehavior: function(element, behavior){ - // Allow passing and ID string - if (typeof element == "string") { element = _V_.el(element); } - this.behaviors[behavior].add.call(this, element); - }, - removeBehavior: function(element, behavior){ - if (typeof element == "string") { element = _V_.el(element); } - this.behaviors[behavior].remove.call(this, element); - }, - - /* Fallbacks for unsupported event types - ================================================================================ */ - // Manually trigger progress events based on changes to the buffered amount - // Many flash players and older HTML5 browsers don't send progress or progress-like events - manualProgressOn: function(){ - this.manualProgress = true; - // Trigger progress watching when a source begins loading - // this.addEvent("loadstart", _V_.proxy(this, this.trackProgress)); - this.trackProgress(); - - // Set variables of closure - var tech = _V_.tech[this.currentTechName], - el = this.tels[this.currentTechName]; - - // Watch for native progress event - _V_.addEvent(el, "progress", _V_.proxy(this, function(){ - // Remove this listener from the element - _V_.removeEvent(el, "progress", arguments.callee); - // Update known progress support for this playback technology - _V_.updateTechSupport(tech, "event", "progress", true); - // Turn off manual progress tracking - this.manualProgressOff(); - })); - }, - manualProgressOff: function(){ - this.manualProgress = false; - this.removeEvent("loadstart", _V_.proxy(this, this.trackProgress)); - this.stopTrackingProgress(); - }, - - trackProgress: function(){ - this.progressInterval = setInterval(_V_.proxy(this, function(){ - // Don't trigger unless buffered amount is greater than last time - // log(this.values.bufferEnd, this.buffered().end(0), this.duration()) - /* TODO: update for multiple buffered regions */ - if (this.values.bufferEnd < this.buffered().end(0)) { - this.triggerEvent("progress"); - } else if (this.bufferedPercent() == 1) { - this.stopTrackingProgress(); - this.triggerEvent("progress"); // Last update - } - }), 500); - }, - stopTrackingProgress: function(){ clearInterval(this.progressInterval); }, - - /* Time Tracking -------------------------------------------------------------- */ - manualTimeUpdatesOn: function(){ - this.manualTimeUpdates = true; - - this.addEvent("play", this.trackCurrentTime); - this.addEvent("pause", this.stopTrackingCurrentTime); - // timeupdate is also called by .currentTime whenever current time is set - - // Set variables of closure - var tech = _V_.tech[this.currentTechName], - el = this.tels[this.currentTechName]; - - // Watch for native timeupdate event - _V_.addEvent(el, "timeupdate", _V_.proxy(this, function(){ - - // Remove this listener from the element - _V_.removeEvent(el, "timeupdate", arguments.callee); - - // Update known progress support for this playback technology - _V_.updateTechSupport(tech, "event", "timeupdate", true); - - // Turn off manual progress tracking - this.manualTimeUpdatesOff(); - })); - }, - manualTimeUpdatesOff: function(){ - this.manualTimeUpdates = false; - this.stopTrackingCurrentTime(); - this.removeEvent("play", this.trackCurrentTime); - this.removeEvent("pause", this.stopTrackingCurrentTime); - }, - - trackCurrentTime: function(){ - if (this.currentTimeInterval) { this.stopTrackingCurrentTime(); } - this.currentTimeInterval = setInterval(_V_.proxy(this, function(){ - this.triggerEvent("timeupdate"); - }), 250); // 42 = 24 fps // 250 is what Webkit uses // FF uses 15 - }, - // Turn off play progress tracking (when paused or dragging) - stopTrackingCurrentTime: function(){ clearInterval(this.currentTimeInterval); }, - - /* Player event handlers (how the player reacts to certain events) - ================================================================================ */ - handleEnded: function(){ - if (this.options.loop) { - this.currentTime(0); - this.play(); - } else { - this.currentTime(0); - this.pause(); - } - }, - - /* Utility - ================================================================================ */ - each: function(arr, fn){ - if (!arr || arr.length === 0) { return; } - for (var i=0,j=arr.length; i 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 (false && this.supportsFullScreen()) { - this.api("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.fullscreenOnEscKey)); - - // Add listener for a window resize - _V_.addEvent(window, "resize", _V_.proxy(this, this.fullscreenOnWindowResize)); - - // 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"); - }, - - exitFullWindow: function(){ - this.videoIsFullScreen = false; - _V_.removeEvent(document, "keydown", this.fullscreenOnEscKey); - _V_.removeEvent(window, "resize", this.fullscreenOnWindowResize); - - // 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 0 || gh > 0) ? h + ":" : ""; - - // If hours are showing, we may need to add a leading zero. - // Always show at least one digit of minutes. - m = (((h || gm >= 10) && m < 10) ? "0" + m : m) + ":"; - - // Check if leading zero is need for seconds - s = (s < 10) ? "0" + s : s; - - return h + m + s; - }, - - // Return the relative horizonal position of an event as a value from 0-1 - getRelativePosition: function(x, relativeElement){ - return Math.max(0, Math.min(1, (x - _V_.findPosX(relativeElement)) / relativeElement.offsetWidth)); - }, - // Get an objects position on the page - findPosX: function(obj) { - var curleft = obj.offsetLeft; - while(obj = obj.offsetParent) { - curleft += obj.offsetLeft; - } - return curleft; - }, - getComputedStyleValue: function(element, style){ - return window.getComputedStyle(element, null).getPropertyValue(style); - }, - - trim: function(string){ return string.toString().replace(/^\s+/, "").replace(/\s+$/, ""); }, - round: function(num, dec) { - if (!dec) { dec = 0; } - return Math.round(num*Math.pow(10,dec))/Math.pow(10,dec); - }, - - isEmpty: function(object) { - for (var prop in object) { - return false; - } - return true; - }, - - // Mimic HTML5 TimeRange Spec. - createTimeRange: function(start, end){ - return { - length: 1, - start: function() { return start; }, - end: function() { return end; } - }; - }, - - /* Element Data Store. Allows for binding data to an element without putting it directly on the element. - Ex. Event listneres are stored here. - (also from jsninja.com) - ================================================================================ */ - cache: {}, // Where the data is stored - guid: 1, // Unique ID for the element - expando: "vdata" + (new Date).getTime(), // Unique attribute to store element's guid in - - // Returns the cache object where data for the element is stored - getData: function(elem){ - var id = elem[_V_.expando]; - if (!id) { - id = elem[_V_.expando] = _V_.guid++; - _V_.cache[id] = {}; - } - return _V_.cache[id]; - }, - // Delete data for the element from the cache and the guid attr from element - removeData: function(elem){ - var id = elem[_V_.expando]; - if (!id) { return; } - // Remove all stored data - delete _V_.cache[id]; - // Remove the expando property from the DOM node - try { - delete elem[_V_.expando]; - } catch(e) { - if (elem.removeAttribute) { - elem.removeAttribute(_V_.expando); - } else { - // IE doesn't appear to support removeAttribute on the document element - elem[_V_.expando] = null; - } - } - }, - - /* Proxy (a.k.a Bind or Context). A simple method for changing the context of a function - It also stores a unique id on the function so it can be easily removed from events - ================================================================================ */ - proxy: function(context, fn) { - // Make sure the function has a unique ID - if (!fn.guid) { fn.guid = _V_.guid++; } - // Create the new function that changes the context - var ret = function() { - return fn.apply(context, arguments); - }; - - // Give the new function the same ID - // (so that they are equivalent and can be easily removed) - ret.guid = fn.guid; - - return ret; - }, - - get: function(url, onSuccess, onError){ - // if (netscape.security.PrivilegeManager.enablePrivilege) { - // netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); - // } - - var local = (url.indexOf("file:") == 0 || (window.location.href.indexOf("file:") == 0 && url.indexOf("http:") == -1)); - - if (typeof XMLHttpRequest == "undefined") { - XMLHttpRequest = function () { - try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {} - try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (f) {} - try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (g) {} - throw new Error("This browser does not support XMLHttpRequest."); - }; - } - - var request = new XMLHttpRequest(); - - try { - request.open("GET", url); - } catch(e) { - _V_.log(e); - // onError(e); - return false; - } - - request.onreadystatechange = _V_.proxy(this, function() { - if (request.readyState == 4) { - if (request.status == 200 || local && request.status == 0) { - onSuccess(request.responseText); - } else { - onError(); - } - } - }); - - try { - request.send(); - } catch(e) { - _V_.log(e); - onError(e); - } - } - -}); - -// /* Function Context Allows for binding context to functions when using in event listeners -// ================================================================================ */ -// Function.prototype.context = function(obj){ -// var method = this, -// temp = function(){ -// return method.apply(obj, arguments); -// }; -// return temp; -// }; -// usage: log('inside coolFunc', this, arguments); -// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/ -_V_.log = function(){ - _V_.log.history = _V_.log.history || [];// store logs to an array for reference - _V_.log.history.push(arguments); - if(window.console) { - arguments.callee = arguments.callee.caller; - var newarr = [].slice.call(arguments); - (typeof console.log === 'object' ? _V_.log.apply.call(console.log, console, newarr) : console.log.apply(console, newarr)); - } -}; - -// make it safe to use console.log always -(function(b){function c(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,timeStamp,profile,profileEnd,time,timeEnd,trace,warn".split(","),a;a=d.pop();){b[a]=b[a]||c}})((function(){try -{console.log();return window.console;}catch(err){return window.console={};}})()); -// ECMA-262 is the standard for javascript. -// The following methods are impelemented EXACTLY as described in the standard (according to Mozilla Docs), and do not override the default method if one exists. -// This may conflict with other libraries that modify the array prototype, but those libs should update to use the standard. - -// [].indexOf -// https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/indexOf -if (!Array.prototype.indexOf) { - Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) { - "use strict"; - if (this === void 0 || this === null) { - throw new TypeError(); - } - var t = Object(this); - var len = t.length >>> 0; - if (len === 0) { - return -1; - } - var n = 0; - if (arguments.length > 0) { - n = Number(arguments[1]); - if (n !== n) { // shortcut for verifying if it's NaN - n = 0; - } else if (n !== 0 && n !== (1 / 0) && n !== -(1 / 0)) { - n = (n > 0 || -1) * Math.floor(Math.abs(n)); - } - } - if (n >= len) { - return -1; - } - var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0); - for (; k < len; k++) { - if (k in t && t[k] === searchElement) { - return k; - } - } - return -1; - } -} - -// NOT NEEDED YET -// [].lastIndexOf -// https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/lastIndexOf -// if (!Array.prototype.lastIndexOf) -// { -// Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) -// { -// "use strict"; -// -// if (this === void 0 || this === null) -// throw new TypeError(); -// -// var t = Object(this); -// var len = t.length >>> 0; -// if (len === 0) -// return -1; -// -// var n = len; -// if (arguments.length > 1) -// { -// n = Number(arguments[1]); -// if (n !== n) -// n = 0; -// else if (n !== 0 && n !== (1 / 0) && n !== -(1 / 0)) -// n = (n > 0 || -1) * Math.floor(Math.abs(n)); -// } -// -// var k = n >= 0 -// ? Math.min(n, len - 1) -// : len - Math.abs(n); -// -// for (; k >= 0; k--) -// { -// if (k in t && t[k] === searchElement) -// return k; -// } -// return -1; -// }; -// } - - -// NOT NEEDED YET -// Array forEach per ECMA standard https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/array/foreach -// Production steps of ECMA-262, Edition 5, 15.4.4.18 -// Reference: http://es5.github.com/#x15.4.4.18 -// if ( !Array.prototype.forEach ) { -// -// Array.prototype.forEach = function( callback, thisArg ) { -// -// var T, k; -// -// if ( this == null ) { -// throw new TypeError( " this is null or not defined" ); -// } -// -// // 1. Let O be the result of calling ToObject passing the |this| value as the argument. -// var O = Object(this); -// -// // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length". -// // 3. Let len be ToUint32(lenValue). -// var len = O.length >>> 0; -// -// // 4. If IsCallable(callback) is false, throw a TypeError exception. -// // See: http://es5.github.com/#x9.11 -// if ( {}.toString.call(callback) != "[object Function]" ) { -// throw new TypeError( callback + " is not a function" ); -// } -// -// // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. -// if ( thisArg ) { -// T = thisArg; -// } -// -// // 6. Let k be 0 -// k = 0; -// -// // 7. Repeat, while k < len -// while( k < len ) { -// -// var kValue; -// -// // a. Let Pk be ToString(k). -// // This is implicit for LHS operands of the in operator -// // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk. -// // This step can be combined with c -// // c. If kPresent is true, then -// if ( k in O ) { -// -// // i. Let kValue be the result of calling the Get internal method of O with argument Pk. -// kValue = O[ Pk ]; -// -// // ii. Call the Call internal method of callback with T as the this value and -// // argument list containing kValue, k, and O. -// callback.call( T, kValue, k, O ); -// } -// // d. Increase k by 1. -// k++; -// } -// // 8. return undefined -// }; -// } - - -// NOT NEEDED YET -// https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/map -// Production steps of ECMA-262, Edition 5, 15.4.4.19 -// Reference: http://es5.github.com/#x15.4.4.19 -// if (!Array.prototype.map) { -// Array.prototype.map = function(callback, thisArg) { -// -// var T, A, k; -// -// if (this == null) { -// throw new TypeError(" this is null or not defined"); -// } -// -// // 1. Let O be the result of calling ToObject passing the |this| value as the argument. -// var O = Object(this); -// -// // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length". -// // 3. Let len be ToUint32(lenValue). -// var len = O.length >>> 0; -// -// // 4. If IsCallable(callback) is false, throw a TypeError exception. -// // See: http://es5.github.com/#x9.11 -// if ({}.toString.call(callback) != "[object Function]") { -// throw new TypeError(callback + " is not a function"); -// } -// -// // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. -// if (thisArg) { -// T = thisArg; -// } -// -// // 6. Let A be a new array created as if by the expression new Array(len) where Array is -// // the standard built-in constructor with that name and len is the value of len. -// A = new Array(len); -// -// // 7. Let k be 0 -// k = 0; -// -// // 8. Repeat, while k < len -// while(k < len) { -// -// var kValue, mappedValue; -// -// // a. Let Pk be ToString(k). -// // This is implicit for LHS operands of the in operator -// // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk. -// // This step can be combined with c -// // c. If kPresent is true, then -// if (k in O) { -// -// // i. Let kValue be the result of calling the Get internal method of O with argument Pk. -// kValue = O[ k ]; -// -// // ii. Let mappedValue be the result of calling the Call internal method of callback -// // with T as the this value and argument list containing kValue, k, and O. -// mappedValue = callback.call(T, kValue, k, O); -// -// // iii. Call the DefineOwnProperty internal method of A with arguments -// // Pk, Property Descriptor {Value: mappedValue, Writable: true, Enumerable: true, Configurable: true}, -// // and false. -// -// // In browsers that support Object.defineProperty, use the following: -// // Object.defineProperty(A, Pk, { value: mappedValue, writable: true, enumerable: true, configurable: true }); -// -// // For best browser support, use the following: -// A[ k ] = mappedValue; -// } -// // d. Increase k by 1. -// k++; -// } -// -// // 9. return A -// return A; -// }; -// } -// Javascript JSON implementation -// (Parse Method Only) -// https://github.com/douglascrockford/JSON-js/blob/master/json2.js - -var JSON; -if (!JSON) { JSON = {}; } - -(function(){ - var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g; - - if (typeof JSON.parse !== 'function') { - JSON.parse = function (text, reviver) { - var j; - - function walk(holder, key) { - var k, v, value = holder[key]; - if (value && typeof value === 'object') { - for (k in value) { - if (Object.prototype.hasOwnProperty.call(value, k)) { - v = walk(value, k); - if (v !== undefined) { - value[k] = v; - } else { - delete value[k]; - } - } - } - } - return reviver.call(holder, key, value); - } - text = String(text); - cx.lastIndex = 0; - if (cx.test(text)) { - text = text.replace(cx, function (a) { - return '\\u' + - ('0000' + a.charCodeAt(0).toString(16)).slice(-4); - }); - } - - if (/^[\],:{}\s]*$/ - .test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@') - .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']') - .replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) { - - j = eval('(' + text + ')'); - - return typeof reviver === 'function' ? - walk({'': j}, '') : j; - } - - throw new SyntaxError('JSON.parse'); - }; - } -}()); -// Event System (J.Resig - Secrets of a JS Ninja http://jsninja.com/ [Go buy it, really]) -// (Book version isn't completely usable, so fixed some things and borrowed from jQuery where it's working) -// -// This should work very similarly to jQuery's events, however it's based off the book version which isn't as -// robust as jquery's, so there's probably some differences. -// -// When you add an event listener using _V_.addEvent, -// it stores the handler function in seperate cache object, -// and adds a generic handler to the element's event, -// along with a unique id (guid) to the element. - -_V_.extend({ - - // Add an event listener to element - // It stores the handler function in a separate cache object - // and adds a generic handler to the element's event, - // along with a unique id (guid) to the element. - addEvent: function(elem, type, fn){ - var data = _V_.getData(elem), handlers; - - // We only need to generate one handler per element - if (data && !data.handler) { - // Our new meta-handler that fixes the event object and the context - data.handler = function(event){ - event = _V_.fixEvent(event); - var handlers = _V_.getData(elem).events[event.type]; - // Go through and call all the real bound handlers - if (handlers) { - - // Copy handlers so if handlers are added/removed during the process it doesn't throw everything off. - var handlersCopy = []; - _V_.each(handlers, function(handler, i){ - handlersCopy[i] = handler; - }) - - for (var i = 0, l = handlersCopy.length; i < l; i++) { - handlersCopy[i].call(elem, event); - } - } - }; - } - - // We need a place to store all our event data - if (!data.events) { data.events = {}; } - - // And a place to store the handlers for this event type - handlers = data.events[type]; - - if (!handlers) { - handlers = data.events[ type ] = []; - - // Attach our meta-handler to the element, since one doesn't exist - if (document.addEventListener) { - elem.addEventListener(type, data.handler, false); - } else if (document.attachEvent) { - elem.attachEvent("on" + type, data.handler); - } - } - - if (!fn.guid) { fn.guid = _V_.guid++; } - - handlers.push(fn); - }, - - removeEvent: function(elem, type, fn) { - var data = _V_.getData(elem), handlers; - // If no events exist, nothing to unbind - if (!data.events) { return; } - - // Are we removing all bound events? - if (!type) { - for (type in data.events) { - _V_.cleanUpEvents(elem, type); - } - return; - } - - // And a place to store the handlers for this event type - handlers = data.events[type]; - - // If no handlers exist, nothing to unbind - if (!handlers) { return; } - - // See if we're only removing a single handler - if (fn && fn.guid) { - for (var i = 0; i < handlers.length; i++) { - // We found a match (don't stop here, there could be a couple bound) - if (handlers[i].guid === fn.guid) { - // Remove the handler from the array of handlers - handlers.splice(i--, 1); - } - } - } - - _V_.cleanUpEvents(elem, type); - }, - - cleanUpEvents: function(elem, type) { - var data = _V_.getData(elem); - // Remove the events of a particular type if there are none left - - if (data.events[type].length === 0) { - delete data.events[type]; - - // Remove the meta-handler from the element - if (document.removeEventListener) { - elem.removeEventListener(type, data.handler, false); - } else if (document.detachEvent) { - elem.detachEvent("on" + type, data.handler); - } - } - - // Remove the events object if there are no types left - if (_V_.isEmpty(data.events)) { - delete data.events; - delete data.handler; - } - - // Finally remove the expando if there is no data left - if (_V_.isEmpty(data)) { - _V_.removeData(elem); - } - }, - - fixEvent: function(event) { - if (event[_V_.expando]) { return event; } - // store a copy of the original event object - // and "clone" to set read-only properties - var originalEvent = event; - event = new _V_.Event(originalEvent); - - for ( var i = _V_.Event.props.length, prop; i; ) { - prop = _V_.Event.props[ --i ]; - event[prop] = originalEvent[prop]; - } - - // Fix target property, if necessary - if (!event.target) { event.target = event.srcElement || document; } - - // check if target is a textnode (safari) - if (event.target.nodeType === 3) { event.target = event.target.parentNode; } - - // Add relatedTarget, if necessary - if (!event.relatedTarget && event.fromElement) { - event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement; - } - - // Calculate pageX/Y if missing and clientX/Y available - if ( event.pageX == null && event.clientX != null ) { - var eventDocument = event.target.ownerDocument || document, - doc = eventDocument.documentElement, - body = eventDocument.body; - - event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0); - event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0); - } - - // Add which for key events - if (event.which == null && (event.charCode != null || event.keyCode != null)) { - event.which = event.charCode != null ? event.charCode : event.keyCode; - } - - // Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs) - if ( !event.metaKey && event.ctrlKey ) { - event.metaKey = event.ctrlKey; - } - - // Add which for click: 1 === left; 2 === middle; 3 === right - // Note: button is not normalized, so don't use it - if ( !event.which && event.button !== undefined ) { - event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) )); - } - - return event; - }, - - triggerEvent: function(elem, event) { - var data = _V_.getData(elem), - parent = elem.parentNode || elem.ownerDocument, - type = event.type || event, - handler; - - if (data) { handler = data.handler } - - // Added in attion to book. Book code was broke. - event = typeof event === "object" ? - event[_V_.expando] ? - event : - new _V_.Event(type, event) : - new _V_.Event(type); - - event.type = type; - if (handler) { - handler.call(elem, event); - } - - // Clean up the event in case it is being reused - event.result = undefined; - event.target = elem; - - // Bubble the event up the tree to the document, - // Unless it's been explicitly stopped - // if (parent && !event.isPropagationStopped()) { - // _V_.triggerEvent(parent, event); - // - // // We're at the top document so trigger the default action - // } else if (!parent && !event.isDefaultPrevented()) { - // // log(type); - // var targetData = _V_.getData(event.target); - // // log(targetData); - // var targetHandler = targetData.handler; - // // log("2"); - // if (event.target[event.type]) { - // // Temporarily disable the bound handler, - // // don't want to execute it twice - // if (targetHandler) { - // targetData.handler = function(){}; - // } - // - // // Trigger the native event (click, focus, blur) - // event.target[event.type](); - // - // // Restore the handler - // if (targetHandler) { - // targetData.handler = targetHandler; - // } - // } - // } - } -}); - -// Custom Event object for standardizing event objects between browsers. -_V_.Event = function(src, props){ - // Event object - if (src && src.type) { - this.originalEvent = src; - this.type = src.type; - - // Events bubbling up the document may have been marked as prevented - // by a handler lower down the tree; reflect the correct value. - this.isDefaultPrevented = (src.defaultPrevented || src.returnValue === false || - src.getPreventDefault && src.getPreventDefault()) ? returnTrue : returnFalse; - - // Event type - } else { - this.type = src; - } - - // Put explicitly provided properties onto the event object - if (props) { _V_.merge(this, props); } - - this.timeStamp = (new Date).getTime(); - - // Mark it as fixed - this[_V_.expando] = true; -}; - -_V_.Event.prototype = { - preventDefault: function() { - this.isDefaultPrevented = returnTrue; - - var e = this.originalEvent; - if (!e) { return; } - - // if preventDefault exists run it on the original event - if (e.preventDefault) { - e.preventDefault(); - // otherwise set the returnValue property of the original event to false (IE) - } else { - e.returnValue = false; - } - }, - stopPropagation: function() { - this.isPropagationStopped = returnTrue; - - var e = this.originalEvent; - if (!e) { return; } - // if stopPropagation exists run it on the original event - if (e.stopPropagation) { e.stopPropagation(); } - // otherwise set the cancelBubble property of the original event to true (IE) - e.cancelBubble = true; - }, - stopImmediatePropagation: function() { - this.isImmediatePropagationStopped = returnTrue; - this.stopPropagation(); - }, - isDefaultPrevented: returnFalse, - isPropagationStopped: returnFalse, - isImmediatePropagationStopped: returnFalse -}; -_V_.Event.props = "altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode layerX layerY metaKey newValue offsetX offsetY pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "); - -function returnTrue(){ return true; } -function returnFalse(){ return false; } -_V_.Track = function(attributes, player){ - // Store reference to the parent player - this.player = player; - - this.src = attributes.src; - this.kind = attributes.kind; - this.srclang = attributes.srclang; - this.label = attributes.label; - this["default"] = attributes["default"]; - this.title = attributes.title; - - this.cues = []; - this.currentCue = false; - this.lastCueIndex = 0; - - // Update current cue on timeupdate - player.addEvent("timeupdate", _V_.proxy(this, this.update)) - // Reset cue time on media end - player.addEvent("ended", _V_.proxy(this, function() { this.lastCueIndex = 0; })); - - // Load Track File - _V_.get(attributes.src, _V_.proxy(this, this.parseCues)); -}; - -_V_.Track.prototype = { - - parseCues: function(srcContent) { - var cue, time, text, - lines = srcContent.split("\n"), - line = ""; - - for (var i=0; i "); - cue.startTime = this.parseCueTime(time[0]); - cue.endTime = this.parseCueTime(time[1]); - - // Additional lines - Cue Text - text = []; - for (var j=i; j'); - - // Add this cue - this.cues.push(cue); - } - } - }, - - parseCueTime: function(timeText) { - var parts = timeText.split(':'), - time = 0; - // hours => seconds - time += parseFloat(parts[0])*60*60; - // minutes => seconds - time += parseFloat(parts[1])*60; - // get seconds - var seconds = parts[2].split(/\.|,/); // Either . or , - time += parseFloat(seconds[0]); - // add miliseconds - ms = parseFloat(seconds[1]); - if (ms) { time += ms/1000; } - return time; - }, - - update: function(){ - // Assuming all cues are in order by time, and do not overlap - if (this.cues && this.cues.length > 0) { - var time = this.player.currentTime(); - // If current cue should stay showing, don't do anything. Otherwise, find new cue. - if (!this.currentCue || this.currentCue.startTime >= time || this.currentCue.endTime < time) { - var newSubIndex = false, - // Loop in reverse if lastCue is after current time (optimization) - // Meaning the user is scrubbing in reverse or rewinding - reverse = (this.cues[this.lastCueIndex].startTime > time), - // If reverse, step back 1 becase we know it's not the lastCue - i = this.lastCueIndex - (reverse) ? 1 : 0; - while (true) { // Loop until broken - if (reverse) { // Looping in reverse - // Stop if no more, or this cue ends before the current time (no earlier cues should apply) - if (i < 0 || this.cues[i].endTime < time) { break; } - // End is greater than time, so if start is less, show this cue - if (this.cues[i].startTime < time) { - newSubIndex = i; - break; - } - i--; - } else { // Looping forward - // Stop if no more, or this cue starts after time (no later cues should apply) - if (i >= this.cues.length || this.cues[i].startTime > time) { break; } - // Start is less than time, so if end is later, show this cue - if (this.cues[i].endTime > time) { - newSubIndex = i; - break; - } - i++; - } - } - - // Set or clear current cue - if (newSubIndex !== false) { - this.currentCue = this.cues[newSubIndex]; - this.lastCueIndex = newSubIndex; - this.updatePlayer(this.currentCue.text); - } else if (this.currentCue) { - this.currentCue = false; - this.updatePlayer(""); - } - } - } - }, - - // Update the stored value for the current track kind - // and trigger an event to update all text track displays. - updatePlayer: function(text){ - this.player.textTrackValue(this.kind, text); - } -}; -// Setup an API for the HTML5 playback technology -VideoJS.tech.html5 = { - supported: function(){ - return !!document.createElement("video").canPlayType; - }, - canPlaySource: function(srcObj){ - return this.tag.canPlayType(srcObj.type); // Switch to global check - // Check Type - // If no Type, check ext - // Check Media Type - }, - init: function(sourceObj){ - var tag = this.tag, // Reuse original tag for HTML5 playback technology element - html5 = _V_.tech.html5, - options = this.options; - - // Check if this browser supports moving the element into the box. - // On the iPhone video will break if you move the element, - // So we have to create a brand new element. - if (html5.supports.movingElementInDOM === false) { - var newTag = _V_.createElement("video", { - id: tag.id, - className: tag.className - }); - - this.box.removeChild(this.tag); - tag = this.tag = newTag; - this.box.appendChild(tag); - } - - // Store reference to playback element - this.tels.html5 = tag; - - // Update tag settings, in case they were overridden - _V_.each(["autoplay","preload","loop","muted","poster"], function(attr){ - tag[attr] = options[attr]; - }, this); - - if (tag.currentSrc != sourceObj.src) { - tag.src = sourceObj.src; - } else { - this.triggerEvent("loadstart"); - } - this.triggerEvent("techready"); - }, - supports: { - /* Will hold support info as it's discovered */ - }, - api: { - setupTriggers: function(){ - // Make video events trigger player events - // May seem verbose here, but makes other APIs possible. - - // ["play", "playing", "pause", "ended", "volumechange", "error", "progress", "seeking", "timeupdate"] - var types = _V_.html5Events, - i; - for (i = 0;i. - * - * Date: 2010-08-25 12:48:46 +0000 (Wed, 25 Aug 2010) - * Revision: 551 - */ -(function(){function g(o){console.log("$f.fireEvent",[].slice.call(o))}function k(q){if(!q||typeof q!="object"){return q}var o=new q.constructor();for(var p in q){if(q.hasOwnProperty(p)){o[p]=k(q[p])}}return o}function m(t,q){if(!t){return}var o,p=0,r=t.length;if(r===undefined){for(o in t){if(q.call(t[o],o,t[o])===false){break}}}else{for(var s=t[0];p1){var t=arguments[1],q=(arguments.length==3)?arguments[2]:{};if(typeof t=="string"){t={src:t}}t=i({bgcolor:"#000000",version:[9,0],expressInstall:"http://static.flowplayer.org/swf/expressinstall.swf",cachebusting:true},t);if(typeof o=="string"){if(o.indexOf(".")!=-1){var s=[];m(n(o),function(){s.push(new b(this,k(t),k(q)))});return new d(s)}else{var r=c(o);return new b(r!==null?r:o,t,q)}}else{if(o){return new b(o,t,q)}}}return null};i(window.$f,{fireEvent:function(){var o=[].slice.call(arguments);var q=$f(o[0]);return q?q._fireEvent(o.slice(1)):null},addPlugin:function(o,p){b.prototype[o]=p;return $f},each:m,extend:i});if(typeof jQuery=="function"){jQuery.fn.flowplayer=function(q,p){if(!arguments.length||typeof arguments[0]=="number"){var o=[];this.each(function(){var r=$f(this);if(r){o.push(r)}});return arguments.length?o[arguments[0]]:new d(o)}return this.each(function(){$f(this,k(q),p?k(p):{})})}}})();(function(){var h=document.all,j="http://www.adobe.com/go/getflashplayer",c=typeof jQuery=="function",e=/(\d+)[^\d]+(\d+)[^\d]*(\d*)/,b={width:"100%",height:"100%",id:"_"+(""+Math.random()).slice(9),allowfullscreen:true,allowscriptaccess:"always",quality:"high",version:[3,0],onFail:null,expressInstall:null,w3c:false,cachebusting:false};if(window.attachEvent){window.attachEvent("onbeforeunload",function(){__flash_unloadHandler=function(){};__flash_savedUnloadHandler=function(){}})}function i(m,l){if(l){for(var f in l){if(l.hasOwnProperty(f)){m[f]=l[f]}}}return m}function a(f,n){var m=[];for(var l in f){if(f.hasOwnProperty(l)){m[l]=n(f[l])}}return m}window.flashembed=function(f,m,l){if(typeof f=="string"){f=document.getElementById(f.replace("#",""))}if(!f){return}if(typeof m=="string"){m={src:m}}return new d(f,i(i({},b),m),l)};var g=i(window.flashembed,{conf:b,getVersion:function(){var m,f;try{f=navigator.plugins["Shockwave Flash"].description.slice(16)}catch(o){try{m=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");f=m&&m.GetVariable("$version")}catch(n){try{m=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");f=m&&m.GetVariable("$version")}catch(l){}}}f=e.exec(f);return f?[f[1],f[3]]:[0,0]},asString:function(l){if(l===null||l===undefined){return null}var f=typeof l;if(f=="object"&&l.push){f="array"}switch(f){case"string":l=l.replace(new RegExp('(["\\\\])',"g"),"\\$1");l=l.replace(/^\s?(\d+\.?\d+)%/,"$1pct");return'"'+l+'"';case"array":return"["+a(l,function(o){return g.asString(o)}).join(",")+"]";case"function":return'"function()"';case"object":var m=[];for(var n in l){if(l.hasOwnProperty(n)){m.push('"'+n+'":'+g.asString(l[n]))}}return"{"+m.join(",")+"}"}return String(l).replace(/\s/g," ").replace(/\'/g,'"')},getHTML:function(o,l){o=i({},o);var n=''}o.width=o.height=o.id=o.w3c=o.src=null;o.onFail=o.version=o.expressInstall=null;for(var m in o){if(o[m]){n+=''}}var p="";if(l){for(var f in l){if(l[f]){var q=l[f];p+=f+"="+(/function|object/.test(typeof q)?g.asString(q):q)+"&"}}p=p.slice(0,-1);n+='"}n+="";return n},isSupported:function(f){return k[0]>f[0]||k[0]==f[0]&&k[1]>=f[1]}});var k=g.getVersion();function d(f,n,m){if(g.isSupported(n.version)){f.innerHTML=g.getHTML(n,m)}else{if(n.expressInstall&&g.isSupported([6,65])){f.innerHTML=g.getHTML(i(n,{src:n.expressInstall}),{MMredirectURL:location.href,MMplayerType:"PlugIn",MMdoctitle:document.title})}else{if(!f.innerHTML.replace(/\s/g,"")){f.innerHTML="

Flash version "+n.version+" or greater is required

"+(k[0]>0?"Your version is "+k:"You have no flash plugin installed")+"

"+(f.tagName=="A"?"

Click here to download latest version

":"

Download latest version from here

");if(f.tagName=="A"){f.onclick=function(){location.href=j}}}if(n.onFail){var l=n.onFail.call(this);if(typeof l=="string"){f.innerHTML=l}}}}if(h){window[n.id]=document.getElementById(n.id)}i(this,{getRoot:function(){return f},getOptions:function(){return n},getConf:function(){return m},getApi:function(){return f.firstChild}})}if(c){jQuery.tools=jQuery.tools||{version:"3.2.4"};jQuery.tools.flashembed={conf:b};jQuery.fn.flashembed=function(l,f){return this.each(function(){$(this).data("flashembed",flashembed(this,l,f))})}}})(); -VideoJS.tech.h5swf = { - // swf: "flash/VideoJS.swf", - swf: "https://s3.amazonaws.com/video-js/3.0b/video-js.swf", - // swf: "http://video-js.zencoder.com/3.0b/video-js.swf", - supported: function(){ - /* TODO Check for flash, etc. */ - return true; - }, - canPlaySource: function(sourceObj){ - if (sourceObj.type in _V_.tech.h5swf.supports.format) { return "maybe"; } - }, - supports: { - format: { - "video/flv": "FLV", - "video/x-flv": "FLV", - "video/mp4": "MP4", - "video/m4v": "MP4" - }, - - // Optional events that we can manually mimic with timers - event: { - progress: false, - timeupdate: false - } - }, - - // Init the swf object - init: function(sourceObj){ - var player = this, - placeHolder = _V_.createElement("div", { id: player.box.id + "_temp_h5swf" }), - objId = player.box.id+"_h5swf_api", - h5swf = VideoJS.tech.h5swf, - - flashvars = { - readyFunction: "_V_.tech.h5swf.onSWFReady", - eventProxyFunction: "_V_.tech.h5swf.onSWFEvent", - errorEventProxyFunction: "_V_.tech.h5swf.onSWFErrorEvent", - src: sourceObj.src, - autoplay: this.options.autoplay, - preload: this.options.preload, - loop: this.options.loop, - muted: this.options.muted - }, - - params = { - allowScriptAccess: "always", - wmode: "opaque", - bgcolor: "#000000" - }, - - attributes = { - id: objId, - name: objId, - 'class': 'vjs-tech' - }; - - player.box.appendChild(placeHolder); - - swfobject.embedSWF(_V_.tech.h5swf.swf, placeHolder.id, "480", "270", "9.0.124", "", flashvars, params, attributes); - }, - onSWFReady: function(currSwf){ - // Flash seems to be catching errors, so raising them manally - try { - // Delay for real swf ready. - setTimeout(function(){ - var el = _V_.el(currSwf), - player = el.parentNode.player; // Get player from box - - el.player = player; - - // Update reference to playback technology element - player.tels.h5swf = el; - - player.ready(function(){ - // this.src("http://video-js.zencoder.com/oceans-clip.mp4"); - }); - player.triggerEvent("techready"); - - },0); - } catch(err) { - _V_.log(err); - } - }, - - onSWFEvent: function(swfID, eventName, other){ - try { - var player = _V_.el(swfID).player; - if (player) { - player.triggerEvent(eventName); - } - } catch(err) { - _V_.log(err); - } - }, - - onSWFErrorEvent: function(swfID, eventName){ - _V_.log("Error", eventName); - }, - - api: { - setupTriggers: function(){ - // Using global onSWFEvent func to distribute events - }, - - play: function(){ this.tels.h5swf.vjs_play(); }, - pause: function(){ this.tels.h5swf.vjs_pause(); }, - src: function(src){ this.tels.h5swf.vjs_src(src); }, - load: function(){ this.tels.h5swf.vjs_load(); }, - - buffered: function(){ - return _V_.createTimeRange(0, this.tels.h5swf.vjs_getProperty("buffered")); - }, - - supportsFullScreen: function(){ - return false; // Flash does not allow fullscreen through javascript - }, - enterFullScreen: function(){ return false; } - } -}; - -// Create setters and getters for attributes -(function(){ - var api = VideoJS.tech.h5swf.api, - readWrite = "src,preload,currentTime,defaultPlaybackRate,playbackRate,autoplay,loop,mediaGroup,controller,controls,volume,muted,defaultMuted".split(","), - readOnly = "error,currentSrc,networkState,readyState,seeking,initialTime,duration,startOffsetTime,paused,played,seekable,ended,videoTracks,audioTracks,videoWidth,videoHeight,textTracks".split(","), - callOnly = "load,play,pause".split(","); - // Overridden: buffered - - createSetter = function(attr){ - var attrUpper = attr.charAt(0).toUpperCase() + attr.slice(1); - api["set"+attrUpper] = function(val){ return this.tels.h5swf.vjs_setProperty(attr, val); }; - }, - - createGetter = function(attr){ - api[attr] = function(){ return this.tels.h5swf.vjs_getProperty(attr); }; - }; - - // Create getter and setters for all read/write attributes - _V_.each(readWrite, function(attr){ - createGetter(attr); - createSetter(attr); - }); - - // Create getters for read-only attributes - _V_.each(readOnly, function(attr){ - createGetter(attr); - }); -})(); -// Special -// canPlayType -// addTextTrack -// textTracks -/* SWFObject v2.1 - Copyright (c) 2007-2008 Geoff Stearns, Michael Williams, and Bobby van der Sluis - This software is released under the MIT License -*/ -var swfobject=function(){var b="undefined",Q="object",n="Shockwave Flash",p="ShockwaveFlash.ShockwaveFlash",P="application/x-shockwave-flash",m="SWFObjectExprInst",j=window,K=document,T=navigator,o=[],N=[],i=[],d=[],J,Z=null,M=null,l=null,e=false,A=false;var h=function(){var v=typeof K.getElementById!=b&&typeof K.getElementsByTagName!=b&&typeof K.createElement!=b,AC=[0,0,0],x=null;if(typeof T.plugins!=b&&typeof T.plugins[n]==Q){x=T.plugins[n].description;if(x&&!(typeof T.mimeTypes!=b&&T.mimeTypes[P]&&!T.mimeTypes[P].enabledPlugin)){x=x.replace(/^.*\s+(\S+\s+\S+$)/,"$1");AC[0]=parseInt(x.replace(/^(.*)\..*$/,"$1"),10);AC[1]=parseInt(x.replace(/^.*\.(.*)\s.*$/,"$1"),10);AC[2]=/r/.test(x)?parseInt(x.replace(/^.*r(.*)$/,"$1"),10):0}}else{if(typeof j.ActiveXObject!=b){var y=null,AB=false;try{y=new ActiveXObject(p+".7")}catch(t){try{y=new ActiveXObject(p+".6");AC=[6,0,21];y.AllowScriptAccess="always"}catch(t){if(AC[0]==6){AB=true}}if(!AB){try{y=new ActiveXObject(p)}catch(t){}}}if(!AB&&y){try{x=y.GetVariable("$version");if(x){x=x.split(" ")[1].split(",");AC=[parseInt(x[0],10),parseInt(x[1],10),parseInt(x[2],10)]}}catch(t){}}}}var AD=T.userAgent.toLowerCase(),r=T.platform.toLowerCase(),AA=/webkit/.test(AD)?parseFloat(AD.replace(/^.*webkit\/(\d+(\.\d+)?).*$/,"$1")):false,q=false,z=r?/win/.test(r):/win/.test(AD),w=r?/mac/.test(r):/mac/.test(AD);/*@cc_on q=true;@if(@_win32)z=true;@elif(@_mac)w=true;@end@*/return{w3cdom:v,pv:AC,webkit:AA,ie:q,win:z,mac:w}}();var L=function(){if(!h.w3cdom){return }f(H);if(h.ie&&h.win){try{K.write("