web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-25 11:13:52 +02:00
Code Releases Activity

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.

Browse Source 
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.
This commit is contained in:
Steve Heffernan 2011-11-29 11:40:05 -08:00
parent a314c0a242
commit ef321a8072
87 changed files with 2315 additions and 6436 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
README.md
View File

@ -2,6 +2,16 @@ VideoJS - [HTML5 Video Player](http://videojs.com)
==================================================
Version 3.0 BETA
Visit the main site at [videojs.com](http://videojs.com) for download options and instructions.
To build video-js from the latest version of the source, clone the source repository and run:
sh build.sh
in the video-js directory using the commnand-line/terminal of a unix-based system.
Contributing
------------
You can use dev.html to test new code. It's simple HTML doc that includes all the source files. Send a pull request for any updates.
---
BETA NOTES
Version 3 is almost a complete rewrite of the previous versions of VideoJS. New features includes:
@ -13,141 +23,3 @@ Version 3 is almost a complete rewrite of the previous versions of VideoJS. New
- No more embedding of Flash fallback within the video tag HTML.
---
View [VideoJS.com](http://videojs.com) for a demo and overview.
VideoJS is an HTML5 video player that uses the HTML5 video tag built into modern browsers, and uses javascript to add custom controls, new functionality, and to fix cross browser bugs. For browsers that don't support HTML5, it will fallback to a Flash player.
View demo.html for an example of how to use it.
Originally based on [this tutorial](http://blog.steveheffernan.com/2010/04/how-to-build-an-html5-video-player/).
Contributors (Github Username)
------------------------------
heff, dz0ny, sentientbit, tvdeyen, brandonarbini, gordonbrander, Shraymonks, albertogasparin, sandaru1, nicholasbs, majornista, Fredust85, @wonderboymusic, ellis-, emirpprime, eirikb, mbrubeck
Getting Started
---------------
### Step 1: Include the VideoJS Javascript and CSS files in the head of your page.
Change the file urls to point to the files on your server.
<script src="video.js"></script>
<link href="video-js.css" rel="stylesheet">
### Step 2: Add an HTML5 video tag to your page.
Use the video tag as normal, with a few extra pieces for VideoJS:
1. The 'data-setup' Atrribute tells VideoJS to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute.
2. The 'id' Attribute: Should be used and unique for every video on the same page.
3. The 'class' attribute contains two classes:
- 'video-js' applies styles that are required for VideoJS functionality, like fullscreen and subtitles.
- 'vjs-default-skin' applies the default skin to the HTML controls, and can be removed or overridden to create your own controls design.
Otherwise include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video.
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
</video>
### Step 3: Nada!
That's all it take to get started. See the docs for more advanced uses.
Coming Next
-----------
- Stable Release
Changelog
---------
3.0b
- Complete rewrite in progress
2.0.3
- Feature: Made returning to the start at the end of the movie an option ("returnToStart").
- Feature: Added loop option to loop movie ("loop").
- Feature: Reorganized player API and listeners.
- Feature: Added option to disable controls. controlsEnabled: false
- Feature: Setup method now has a callback, so you can more easily work with the player after setup
- Feature: Added listeners for enter/exit full screen/window.
- Feature: Added a VideoJS.player(id) function for getting the player for a video ID
- Changes: setupAllWhenReady is now just setupAll (backward compatible)
- Fix: Check for Android browser now excludes firefox and opera
2.0.2 (2010-12-10)
- Feature: Rewrote and optimized subtitle code.
- Feature: Protecting against volume ranges outside of 1 and 0.
- Fix: Bug in Safari for Mac OS 10.5 (Leopard) that was breaking fullscreen.
2.0.1 (2010-11-22)
- Fix: Issue with big play button when multiple videos are on the page.
- Fix: Optimized play progress tracking.
- Fix: Optimized buffer progress checking.
- Fix: Firefox not showing Flash fallback object.
2.0.0 (2010-11-21)
- Feature: Created "behaviors" concept for adding behaviors to elements
- Feature: Switched back to divs for controls, for more portable styles
- Feature: Created playerFallbackOrder array option. ["html5", "flash", "links"]
- Feature: Created playerType concept, for initializing different platforms
- Feature: Added play button for Android
- Feature: Added spinner for iPad (non-fullscreen)
- Feature: Split into multiple files for easier development
- Feature: Combined VideoJS & _V_ into the same variable to reduce confusion
- Fix: Checking for m3u8 files (Apple HTTP Streaming)
- Fix: Catching error on localStorage full that safari seems to randomly throw
- Fix: Scrubbing to end doesn't trigger onEnded
1.1.5 (2010-11-09)
- Feature: Switched to track method for setting subtitles. Now works like spec.
- Feature: Created "players" concept for defining fallbacks and fallback order
- Fix: Android playback bug.
- Fix: Massive reorganization of code to make easier to navigate
1.1.4 (2010-11-06)
- Feature: Added loading spinner.
- Feature: Improved styles loaded checking.
- Feature: Added volume() function to get and set volume through the player.
- Fix: Fix issue where FF would loop video in background when ended.
- Fix: Bug in Chrome that shows poster & plays audio if you set currentTime too quickly.
- Fix: Bug in Safari where waiting is triggered and shows spinner when not needed
- Fix: Updated to show links if only unplayable sources and no Flash.
- Fix: Issue where if play button was loaded after play, it wouldn't hide.
1.1.3 (2010-10-19)
- Feature: Width/Height functions for resizing the player
- Feature: Made initial click & hold trigger new value on progress and volume
- Feature: Made controls not hide when hovering over them
- Feature: Added big play button as default starting control.
- Fix: Removed trailing comma that was breaking IE7
- Fix: Removed some vars from global scope
- Fix: Changed a document.onmousemove to an eventListener to prevent conflicts
- Fix: Added a unique ID to FlowPlayer demo object to fix a FlowPlayer bug. Thanks @emirpprime.
- Fix: Safari error on unloaded video
1.1.2 (2010-09-20)
- Added a fix for the poster bug in iPad/iPhone
- Added more specificity to styles
1.1.1 (2010-09-14)
- First Formally Versioned Release
1.0.0 (2010-05-18)
- First released

41
build.sh Executable file
View File

@ -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

0
dev/build/Create Release Notes.md → build/Create Release Notes.md
View File

17
dev/build/combine_sources.sh → build/combine_sources.sh
View File

@ -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

153
build/files/README.md Normal file
View File

@ -0,0 +1,153 @@
VideoJS - [HTML5 Video Player](http://videojs.com)
==================================================
Version 3.0 BETA
---
BETA NOTES
Version 3 is almost a complete rewrite of the previous versions of VideoJS. New features includes:
- HTML/CSS Controls and API now work for both the HTML5 and Flash versions.
- Custom Super-lightweight Flash Fallback
- Embed Code is much simpler.
- No more "vjs-box" div required, just use the video tag.
- No more embedding of Flash fallback within the video tag HTML.
---
View [VideoJS.com](http://videojs.com) for a demo and overview.
VideoJS is an HTML5 video player that uses the HTML5 video tag built into modern browsers, and uses javascript to add custom controls, new functionality, and to fix cross browser bugs. For browsers that don't support HTML5, it will fallback to a Flash player.
View demo.html for an example of how to use it.
Originally based on [this tutorial](http://blog.steveheffernan.com/2010/04/how-to-build-an-html5-video-player/).
Contributors (Github Username)
------------------------------
heff, dz0ny, sentientbit, tvdeyen, brandonarbini, gordonbrander, Shraymonks, albertogasparin, sandaru1, nicholasbs, majornista, Fredust85, @wonderboymusic, ellis-, emirpprime, eirikb, mbrubeck
Getting Started
---------------
### Step 1: Include the VideoJS Javascript and CSS files in the head of your page.
Change the file urls to point to the files on your server.
<script src="video.js"></script>
<link href="video-js.css" rel="stylesheet">
### Step 2: Add an HTML5 video tag to your page.
Use the video tag as normal, with a few extra pieces for VideoJS:
1. The 'data-setup' Atrribute tells VideoJS to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute.
2. The 'id' Attribute: Should be used and unique for every video on the same page.
3. The 'class' attribute contains two classes:
- 'video-js' applies styles that are required for VideoJS functionality, like fullscreen and subtitles.
- 'vjs-default-skin' applies the default skin to the HTML controls, and can be removed or overridden to create your own controls design.
Otherwise include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video.
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
</video>
### Step 3: Nada!
That's all it take to get started. See the docs for more advanced uses.
Coming Next
-----------
- Stable Release
Changelog
---------
3.0b
- Complete rewrite in progress
2.0.3
- Feature: Made returning to the start at the end of the movie an option ("returnToStart").
- Feature: Added loop option to loop movie ("loop").
- Feature: Reorganized player API and listeners.
- Feature: Added option to disable controls. controlsEnabled: false
- Feature: Setup method now has a callback, so you can more easily work with the player after setup
- Feature: Added listeners for enter/exit full screen/window.
- Feature: Added a VideoJS.player(id) function for getting the player for a video ID
- Changes: setupAllWhenReady is now just setupAll (backward compatible)
- Fix: Check for Android browser now excludes firefox and opera
2.0.2 (2010-12-10)
- Feature: Rewrote and optimized subtitle code.
- Feature: Protecting against volume ranges outside of 1 and 0.
- Fix: Bug in Safari for Mac OS 10.5 (Leopard) that was breaking fullscreen.
2.0.1 (2010-11-22)
- Fix: Issue with big play button when multiple videos are on the page.
- Fix: Optimized play progress tracking.
- Fix: Optimized buffer progress checking.
- Fix: Firefox not showing Flash fallback object.
2.0.0 (2010-11-21)
- Feature: Created "behaviors" concept for adding behaviors to elements
- Feature: Switched back to divs for controls, for more portable styles
- Feature: Created playerFallbackOrder array option. ["html5", "flash", "links"]
- Feature: Created playerType concept, for initializing different platforms
- Feature: Added play button for Android
- Feature: Added spinner for iPad (non-fullscreen)
- Feature: Split into multiple files for easier development
- Feature: Combined VideoJS & _V_ into the same variable to reduce confusion
- Fix: Checking for m3u8 files (Apple HTTP Streaming)
- Fix: Catching error on localStorage full that safari seems to randomly throw
- Fix: Scrubbing to end doesn't trigger onEnded
1.1.5 (2010-11-09)
- Feature: Switched to track method for setting subtitles. Now works like spec.
- Feature: Created "players" concept for defining fallbacks and fallback order
- Fix: Android playback bug.
- Fix: Massive reorganization of code to make easier to navigate
1.1.4 (2010-11-06)
- Feature: Added loading spinner.
- Feature: Improved styles loaded checking.
- Feature: Added volume() function to get and set volume through the player.
- Fix: Fix issue where FF would loop video in background when ended.
- Fix: Bug in Chrome that shows poster & plays audio if you set currentTime too quickly.
- Fix: Bug in Safari where waiting is triggered and shows spinner when not needed
- Fix: Updated to show links if only unplayable sources and no Flash.
- Fix: Issue where if play button was loaded after play, it wouldn't hide.
1.1.3 (2010-10-19)
- Feature: Width/Height functions for resizing the player
- Feature: Made initial click & hold trigger new value on progress and volume
- Feature: Made controls not hide when hovering over them
- Feature: Added big play button as default starting control.
- Fix: Removed trailing comma that was breaking IE7
- Fix: Removed some vars from global scope
- Fix: Changed a document.onmousemove to an eventListener to prevent conflicts
- Fix: Added a unique ID to FlowPlayer demo object to fix a FlowPlayer bug. Thanks @emirpprime.
- Fix: Safari error on unloaded video
1.1.2 (2010-09-20)
- Added a fix for the poster bug in iPad/iPhone
- Added more specificity to styles
1.1.1 (2010-09-14)
- First Formally Versioned Release
1.0.0 (2010-05-18)
- First released

0
demo.html → build/files/demo.html
View File

0
dev/compare/compare.css → compare/compare.css
View File

6
dev/compare/compare.html → compare/compare.html
View File

@ -25,14 +25,16 @@
<script src="../src/tracks.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/components.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/behaviors/behaviors.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/behaviors/seekBar.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/behaviors/volume.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/behaviors/texttrackdisplays.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/controls/bigPlay.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="../src/controls/bigPlay.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/controls/bar.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/controls/subtitlesBox.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/controls/subtitlesBox.js" type="text/javascript" charset="utf-8"></script> -->
<script src="../src/tech/html5.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/tech/flowplayer.js" type="text/javascript" charset="utf-8"></script>

4
dev/compare/compare.js → compare/compare.js
View File

@ -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,

0
dev/decisions.txt → decisions.txt
View File

0
dev/demo-subtitles.srt → demo-subtitles.srt
View File

0
dev/design/Icon Design.png → design/Icon Design.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 85 KiB

After

Width:  |  Height:  |  Size: 85 KiB

0
dev/design/skin.old.css → design/skin.old.css
View File

0
dev/design/video-js.css → design/video-js.css
View File

0
dev/design/video-js.png → design/video-js.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.3 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

34
dev/dev.html → dev.html
View File

@ -10,40 +10,18 @@
<script src="https://getfirebug.com/releases/lite/1.3/firebug-lite.js"></script>
<!--<![endif]-->
<!-- <script src="dist/video.js"></script> -->
<script src="src/core.js"></script>
<script src="src/lib.js"></script>
<script src="src/ecma.js"></script>
<script src="src/json.js"></script>
<script src="src/log.js"></script>
<script src="src/ui.js"></script>
<script src="src/api.js"></script>
<script src="src/component.js"></script>
<script src="src/player.js"></script>
<script src="src/tech.js"></script>
<script src="src/controls.js"></script>
<script src="src/events.js"></script>
<script src="src/tracks.js"></script>
<script src="src/behaviors/behaviors.js"></script>
<script src="src/behaviors/seekBar.js"></script>
<script src="src/behaviors/volume.js"></script>
<script src="src/behaviors/texttrackdisplays.js"></script>
<script src="src/controls/bigPlay.js"></script>
<script src="src/controls/bar.js"></script>
<script src="src/controls/subtitlesBox.js"></script>
<script src="src/tech/html5.js"></script>
<script src="src/tech/flowplayer.js"></script>
<script src="src/tech/h5swf.js"></script>
<script src="src/tech/youtube.js"></script>
<script src="src/autoload.js"></script>
<script src="flash/swfobject.js"></script>
</head>
@ -51,13 +29,13 @@
<video id="vid1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"techOrder":["html5","h5swf","youtube"]}'>
data-setup='{}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" type='video/flv'>
<source src="http://www.youtube.com/watch?v=YjaZNYSt7o0&feature=related" type='video/youtube'>
<!-- <track kind="subtitles" src="http://videojs.com/subtitles/demo-subtitles.srt" srclang="en-US" label="English"></track> -->
<track kind="subtitles" src="http://videojs.com/subtitles/demo-subtitles.srt" srclang="en-US" label="English"></track>
<!-- <track kind="subtitles" src="demo-subtitles.srt" srclang="en-US" label="English"></track> -->
</video>

298
dev/src/api.js
View File

@ -1,298 +0,0 @@
/* Player API
================================================================================ */
VideoJS.fn.extend({
apiCall: function(method, arg){
if (this.isReady) {
if (this.api[method]) {
return this.api[method].call(this, arg);
} else {
throw new Error("The '"+method+"' method is not available on the playback technology's API");
}
} else {
throw new Error("The playback technology API is not ready yet. Use player.ready(myFunction).");
}
},
/* Listener types: play, pause, timeupdate, bufferedupdate, ended, volumechange, error */
addEvent: function(type, fn){
return _V_.addEvent(this.box, type, _V_.proxy(this, fn));
},
removeEvent: function(type, fn){
return _V_.removeEvent(this.box, type, fn);
},
triggerEvent: function(type, e){
return _V_.triggerEvent(this.box, type, e);
},
play: function(){
this.apiCall("play"); return this;
},
pause: function(){
this.apiCall("pause"); return this;
},
paused: function(){
return this.apiCall("paused");
},
currentTime: function(seconds){
if (seconds !== undefined) {
this.values.currentTime = seconds; // Cache the last set value for smoother scrubbing.
this.apiCall("setCurrentTime", seconds);
if (this.manualTimeUpdates) { this.triggerEvent("timeupdate"); }
return this;
}
return this.apiCall("currentTime");
},
duration: function(){
return this.apiCall("duration");
},
remainingTime: function(){
return this.duration() - this.currentTime();
},
buffered: function(){
var buffered = this.apiCall("buffered"),
start = 0, end = this.values.bufferEnd = this.values.bufferEnd || 0,
timeRange;
if (buffered && buffered.length > 0 && buffered.end(0) > end) {
end = buffered.end(0);
// Storing values allows them be overridden by setBufferedFromProgress
this.values.bufferEnd = end;
}
return _V_.createTimeRange(start, end);
},
// Calculates amount of buffer is full
bufferedPercent: function(){
return (this.duration()) ? this.buffered().end(0) / this.duration() : 0;
},
volume: function(percentAsDecimal){
if (percentAsDecimal !== undefined) {
var vol = Math.max(0, Math.min(1, parseFloat(percentAsDecimal))); // Force value to between 0 and 1
this.values.volume = vol;
this.apiCall("setVolume", vol);
this.setLocalStorage("volume", vol);
return this;
}
// if (this.values.volume) { return this.values.volume; }
return this.apiCall("volume");
},
muted: function(muted){
if (muted !== undefined) {
this.apiCall("setMuted", muted);
return this;
}
return this.apiCall("muted");
},
width: function(width, skipListeners){
if (width !== undefined) {
this.box.width = width;
this.box.style.width = width+"px";
if (!skipListeners) { this.triggerEvent("resize"); }
return this;
}
return parseInt(this.box.getAttribute("width"));
},
height: function(height){
if (height !== undefined) {
this.box.height = height;
this.box.style.height = height+"px";
this.triggerEvent("resize");
return this;
}
return parseInt(this.box.getAttribute("height"));
},
size: function(width, height){
// Skip resize listeners on width for optimization
return this.width(width, true).height(height);
},
supportsFullScreen: function(){ return this.apiCall("supportsFullScreen"); },
// Turn on fullscreen (or window) mode
enterFullScreen: function(){
if (this.supportsFullScreen()) {
this.apiCall("enterFullScreen");
} else {
this.enterFullWindow();
}
this.triggerEvent("enterFullScreen");
return this;
},
exitFullScreen: function(){
if (true || !this.supportsFullScreen()) {
this.exitFullWindow();
}
this.triggerEvent("exitFullScreen");
// Otherwise Shouldn't be called since native fullscreen uses own controls.
return this;
},
enterFullWindow: function(){
this.videoIsFullScreen = true;
// Storing original doc overflow value to return to when fullscreen is off
this.docOrigOverflow = document.documentElement.style.overflow;
// Add listener for esc key to exit fullscreen
_V_.addEvent(document, "keydown", _V_.proxy(this, this.fullWindowOnEscKey));
// Hide any scroll bars
document.documentElement.style.overflow = 'hidden';
// Apply fullscreen styles
_V_.addClass(document.body, "vjs-full-window");
_V_.addClass(this.box, "vjs-fullscreen");
this.triggerEvent("enterFullWindow");
},
fullWindowOnEscKey: function(event){
if (event.keyCode == 27) {
this.exitFullScreen();
}
},
exitFullWindow: function(){
this.videoIsFullScreen = false;
_V_.removeEvent(document, "keydown", this.fullWindowOnEscKey);
// Unhide scroll bars.
document.documentElement.style.overflow = this.docOrigOverflow;
// Remove fullscreen styles
_V_.removeClass(document.body, "vjs-full-window");
_V_.removeClass(this.box, "vjs-fullscreen");
// Resize the box, controller, and poster to original sizes
// this.positionAll();
this.triggerEvent("exitFullWindow");
},
// src is a pretty powerful function
// If you pass it an array of source objects, it will find the best source to play and use that object.src
// If the new source requires a new playback technology, it will switch to that.
// If you pass it an object, it will set the source to object.src
// If you pass it anything else (url string) it will set the video source to that
src: function(source){
// Case: Array of source objects to choose from and pick the best to play
if (source instanceof Array) {
techLoop: // Named loop for breaking both loops
// Loop through each playback technology in the options order
for (var i=0,j=this.options.techOrder;i<j.length;i++) {
var techName = j[i],
tech = _V_.tech[techName];
// Check if the browser supports this technology
if (tech.supported()) {
// Loop through each source object
for (var a=0,b=this.options.sources;a<b.length;a++) {
var source = b[a];
// Check if source can be played with this technology
if (tech.canPlaySource.call(this, source)) {
// If this technology is already loaded, set source
if (techName == this.currentTechName) {
this.src(source); // Passing the source object
// Otherwise load this technology with chosen source
} else {
this.loadTech(techName, source);
}
break techLoop; // Break both loops
}
}
}
}
// Case: Source object { src: "", type: "" ... }
} else if (source instanceof Object) {
this.src(source.src);
// Case: URL String (http://myvideo...)
} else {
this.apiCall("src", source);
this.load();
}
return this;
},
// Begin loading the src data
load: function(){
this.apiCall("load");
return this;
},
currentSrc: function(){
return this.apiCall("currentSrc");
},
textTrackValue: function(kind, value){
if (value !== undefined) {
this.values[kind] = value;
this.triggerEvent(kind+"update");
return this;
}
return this.values[kind];
},
// Attributes/Options
preload: function(value){
if (value !== undefined) {
this.apiCall("setPreload", value);
this.options.preload = value;
return this;
}
return this.apiCall("preload", value);
},
autoplay: function(value){
if (value !== undefined) {
this.apiCall("setAutoplay", value);
this.options.autoplay = value;
return this;
}
return this.apiCall("autoplay", value);
},
loop: function(value){
if (value !== undefined) {
this.apiCall("setLoop", value);
this.options.loop = value;
return this;
}
return this.apiCall("loop", value);
},
controls: function(){ return this.options.controls; },
textTracks: function(){ return this.options.tracks; },
poster: function(){ return this.apiCall("poster"); },
error: function(){ return this.apiCall("error"); },
networkState: function(){ return this.apiCall("networkState"); },
readyState: function(){ return this.apiCall("readyState"); },
seeking: function(){ return this.apiCall("seeking"); },
initialTime: function(){ return this.apiCall("initialTime"); },
startOffsetTime: function(){ return this.apiCall("startOffsetTime"); },
played: function(){ return this.apiCall("played"); },
seekable: function(){ return this.apiCall("seekable"); },
ended: function(){ return this.apiCall("ended"); },
videoTracks: function(){ return this.apiCall("videoTracks"); },
audioTracks: function(){ return this.apiCall("audioTracks"); },
videoWidth: function(){ return this.apiCall("videoWidth"); },
videoHeight: function(){ return this.apiCall("videoHeight"); },
defaultPlaybackRate: function(){ return this.apiCall("defaultPlaybackRate"); },
playbackRate: function(){ return this.apiCall("playbackRate"); },
// mediaGroup: function(){ return this.apiCall("mediaGroup"); },
// controller: function(){ return this.apiCall("controller"); },
controls: function(){ return this.apiCall("controls"); },
defaultMuted: function(){ return this.apiCall("defaultMuted"); }
});

37
dev/src/autoload.js
View File

@ -1,37 +0,0 @@
_V_.loadPlayers = function(){
var vids = document.getElementsByTagName("video"),
options, vid;
if (vids && vids.length > 0) {
for (var i=0,j=vids.length; i<j; i++) {
vid = vids[i];
// Check if element exists, has getAttribute func.
// IE seems to consider typeof el.getAttribute == "object" instead of "function" like expected, at least when loading the player immediately.
if (vid && vid.getAttribute) {
// Check if this video has already been set up by video.js.
if (vid.player === undefined) {
options = vid.getAttribute("data-setup");
// Check if data-setup attr exists.
// We only auto-setup if they've added the data-setup attr.
if (options !== null) {
// Parse options JSON
// If empty string, make it a parsable json object.
options = JSON.parse(options || "{}");
// Create new video.js instance.
new VideoJS(vid, options);
}
}
// If getAttribute isn't defined, we need to wait for the DOM.
} else {
_V_.loadPlayerTimeout(1);
break;
}
}
} else {
_V_.loadPlayerTimeout(1);
}
};
_V_.loadPlayerTimeout = function(wait){
setTimeout(_V_.loadPlayers, wait);
};
_V_.loadPlayerTimeout(1); // Let vjs javascript finish executing

312
dev/src/behaviors/behaviors.js
View File

@ -1,312 +0,0 @@
/* Box Behaviors - The primary container element
================================================================================ */
VideoJS.fn.newBehavior("box",
function(element){
_V_.addClass(element, "vjs-paused");
this.addEvent("play", this.boxOnVideoPlay);
this.addEvent("pause", this.boxOnVideoPause);
},
function(){},
{
boxOnVideoPlay: function(){
_V_.removeClass(this.box, "vjs-paused");
_V_.addClass(this.box, "vjs-playing");
},
boxOnVideoPause: function(){
_V_.removeClass(this.box, "vjs-playing");
_V_.addClass(this.box, "vjs-paused");
}
}
);
/* Playback Technology Element Behaviors
================================================================================ */
VideoJS.fn.newBehavior("tech",
function(element){
// Need to add click event to video element instead of box, otherwise box will
// catch clicks on all control buttons. (Could add stopPropagation to all, but don't want to if not needed yet.)
_V_.addEvent(element, "click", _V_.proxy(this, this.onPlayToggleClick));
},
function(element){
_V_.removeEvent(element, "click", this.onPlayToggleClick);
},
{}
);
/* Control Bar Behaviors
================================================================================ */
VideoJS.fn.newBehavior("controlBar",
function(element){
if (!this.bels.controlBars) {
this.bels.controlBars = [];
// this.addEvent("mouseover", this.showControlBars);
// this.addEvent("mouseout", this.hideControlBars);
}
this.bels.controlBars.push(element);
},
function(element){},
{
showControlBars: function(){
this.each(this.bels.controlBars, function(bar){
bar.style.opacity = 1;
// bar.style.display = "block";
});
},
hideControlBars: function(){
this.each(this.bels.controlBars, function(bar){
bar.style.opacity = 0;
// bar.style.display = "none";
});
}
}
);
/* PlayToggle, PlayButton, PauseButton Behaviors
================================================================================ */
// Play Toggle
VideoJS.fn.newBehavior("playToggle", function(element){
if (!this.bels.playToggles) {
this.bels.playToggles = [];
this.addEvent("play", this.playTogglesOnPlay);
this.addEvent("pause", this.playTogglesOnPause);
}
this.bels.playToggles.push(element);
_V_.addEvent(element, "click", _V_.proxy(this, this.onPlayToggleClick));
_V_.addEvent(element, "focus", _V_.proxy(this, this.onPlayToggleFocus));
_V_.addEvent(element, "blur", _V_.proxy(this, this.onPlayToggleBlur));
},
function(){},
{
onPlayToggleClick: function(event){
if (this.paused()) {
this.play();
} else {
this.pause();
}
},
playTogglesOnPlay: function(event){
this.each(this.bels.playToggles, function(toggle){
_V_.removeClass(toggle, "vjs-paused");
_V_.addClass(toggle, "vjs-playing");
});
},
playTogglesOnPause: function(event){
this.each(this.bels.playToggles, function(toggle){
_V_.removeClass(toggle, "vjs-playing");
_V_.addClass(toggle, "vjs-paused");
});
},
onPlayToggleFocus: function(event){
_V_.addEvent(document, "keyup", _V_.proxy(this, this.onPlayToggleKey));
},
onPlayToggleKey: function(event){
if (event.which == 32 || event.which == 13) {
event.preventDefault();
this.onPlayToggleClick();
}
},
onPlayToggleBlur: function(event){
_V_.removeEvent(document, "keyup", _V_.proxy(this, this.onPlayToggleKey));
}
}
);
// Play
VideoJS.fn.newBehavior("playButton", function(element){
_V_.addEvent(element, "click", _V_.proxy(this, this.onPlayButtonClick));
},
function(){},
{
onPlayButtonClick: function(event){ this.play(); }
}
);
// Pause
VideoJS.fn.newBehavior("pauseButton", function(element){
_V_.addEvent(element, "click", _V_.proxy(this, this.onPauseButtonClick));
},
function(){},
{
onPauseButtonClick: function(event){ this.pause(); }
}
);
/* Current Time Display Behaviors
================================================================================ */
VideoJS.fn.newBehavior("currentTimeDisplay", function(element){
if (!this.bels.currentTimeDisplays) {
this.bels.currentTimeDisplays = [];
this.addEvent("timeupdate", this.updateCurrentTimeDisplays);
}
this.bels.currentTimeDisplays.push(element);
},
function(){},
{
// Update the displayed time (00:00)
updateCurrentTimeDisplays: function(newTime){
// Allows for smooth scrubbing, when player can't keep up.
var time = (this.scrubbing) ? this.values.currentTime : this.currentTime();
this.each(this.bels.currentTimeDisplays, function(dis){
dis.innerHTML = _V_.formatTime(time, this.duration());
});
}
}
);
/* Duration Display Behaviors
================================================================================ */
VideoJS.fn.newBehavior("durationDisplay", function(element){
if (!this.bels.durationDisplays) {
this.bels.durationDisplays = [];
this.addEvent("timeupdate", this.updateDurationDisplays);
}
this.bels.durationDisplays.push(element);
},
function(){},
{
updateDurationDisplays: function(){
this.each(this.bels.durationDisplays, function(dis){
if (this.duration()) { dis.innerHTML = _V_.formatTime(this.duration()); }
});
}
}
);
/* Duration Display Behaviors
================================================================================ */
VideoJS.fn.newBehavior("remainingTimeDisplay", function(element){
if (!this.bels.remainingTimeDisplays) {
this.bels.remainingTimeDisplays = [];
this.addEvent("timeupdate", this.updateRemainingTimeDisplays);
}
this.bels.remainingTimeDisplays.push(element);
},
function(){},
{
updateRemainingTimeDisplays: function(){
this.each(this.bels.remainingTimeDisplays, function(dis){
if (this.duration()) { dis.innerHTML = "-"+_V_.formatTime(this.remainingTime()); }
});
}
}
);
/* Time Left (remaining) Display Behaviors
================================================================================ */
VideoJS.fn.newBehavior("timeLeftDisplay", function(element){
if (!this.bels.timeLeftDisplays) {
this.bels.timeLeftDisplays = [];
this.addEvent("timeupdate", this.updateTimeLeftDisplays);
}
this.bels.timeLeftDisplays.push(element);
},
function(){
this.removeEvent("timeupdate", this.updateTimeLeftDisplays);
delete this.bels.timeLeftDisplays;
},
{
updateTimeLeftDisplays: function(){
// Allows for smooth scrubbing, when player can't keep up.
var time = (this.scrubbing) ? this.values.currentTime : this.currentTime();
this.each(this.bels.timeLeftDisplays, function(dis){
dis.innerHTML = "-" + _V_.formatTime(this.duration() - time);
});
}
}
);
/* Volume Scrubber Behaviors
================================================================================ */
VideoJS.fn.newBehavior("volumeScrubber", function(element){
// Binding with element as 'this' so the progress holder element can be retrieved in IE.
// IE doesn't support the currentTarget event attr.
var player = this;
_V_.addEvent(element, "mousedown", _V_.proxy(element, function(e){
player.onVolumeScrubberMouseDown(e, this);
}));
},
function(){},
{
// Adjust the volume when the user drags on the volume control
onVolumeScrubberMouseDown: function(event, scrubber){
// event.preventDefault();
_V_.blockTextSelection();
this.currentScrubber = scrubber;
this.setVolumeWithScrubber(event);
_V_.addEvent(document, "mousemove", _V_.proxy(this, this.onVolumeScrubberMouseMove));
_V_.addEvent(document, "mouseup", _V_.proxy(this, this.onVolumeScrubberMouseUp));
},
onVolumeScrubberMouseMove: function(event){
this.setVolumeWithScrubber(event);
},
onVolumeScrubberMouseUp: function(event){
this.setVolumeWithScrubber(event);
_V_.unblockTextSelection();
_V_.removeEvent(document, "mousemove", this.onVolumeScrubberMouseMove, false);
_V_.removeEvent(document, "mouseup", this.onVolumeScrubberMouseUp, false);
},
setVolumeWithScrubber: function(event){
var newVol = _V_.getRelativePosition(event.pageX, this.currentScrubber);
this.volume(newVol);
}
}
);
/* Volume Display Behaviors
================================================================================ */
VideoJS.fn.newBehavior("volumeDisplay", function(element){
if (!this.bels.volumeDisplays) {
this.bels.volumeDisplays = [];
this.addEvent("volumechange", this.updateVolumeDisplays);
}
this.bels.volumeDisplays.push(element);
this.updateVolumeDisplay(element); // Set the display to the initial volume
},
function(){},
{
// Update the volume control display
// Unique to these default controls. Uses borders to create the look of bars.
updateVolumeDisplays: function(){
if (!this.bels.volumeDisplays) { return; }
this.each(this.bels.volumeDisplays, function(dis){
this.updateVolumeDisplay(dis);
});
},
updateVolumeDisplay: function(display){
var volNum = Math.ceil(this.volume() * 6);
this.each(display.children, function(child, num){
if (num < volNum) {
_V_.addClass(child, "vjs-volume-level-on");
} else {
_V_.removeClass(child, "vjs-volume-level-on");
}
});
}
}
);
/* Fullscreen Toggle Behaviors
================================================================================ */
VideoJS.fn.newBehavior("fullscreenToggle", function(element){
_V_.addEvent(element, "click", _V_.proxy(this, this.onFullscreenToggleClick));
},
function(){},
{
// When the user clicks on the fullscreen button, update fullscreen setting
onFullscreenToggleClick: function(event){
if (!this.videoIsFullScreen) {
this.enterFullScreen();
} else {
this.exitFullScreen();
}
},
fullscreenOnWindowResize: function(event){ // Removeable
// this.positionControlBars();
},
// Create listener for esc key while in full screen mode
fullscreenOnEscKey: function(event){ // Removeable
if (event.keyCode == 27) {
this.exitFullScreen();
}
}
}
);

216
dev/src/behaviors/seekBar.js
View File

@ -1,216 +0,0 @@
/* Seek Bar Behaviors (Current Time Scrubber)
================================================================================ */
VideoJS.fn.newBehavior("seekBar",
function(element){
if (!this.bels.seekBars) {
this.bels.seekBars = [];
this.addEvent("timeupdate", this.updateSeekBars);
}
this.bels.seekBars.push(element);
// Get and store related child objects (progress bar & handle)
var data = _V_.getData(element);
this.each(element.childNodes, function(c){
if (c.className) {
if (c.className.indexOf("seek-handle") != -1) {
data.seekHandle = c;
} else if (c.className.indexOf("play-progress") != -1) {
data.playProgress = c;
}
}
});
// Binding with element as 'this' so the progress holder element can be retrieved in IE.
// IE doesn't support the currentTarget event attr.
var player = this;
_V_.addEvent(element, "mousedown", _V_.proxy(element, function(event){
player.onSeekBarMouseDown(event, this);
}));
_V_.addEvent(element, "focus", _V_.proxy(this, this.onSeekBarFocus));
_V_.addEvent(element, "blur", _V_.proxy(this, this.onSeekBarBlur));
},
function(){},
{
// Adjust the play position when the user drags on the progress bar
onSeekBarMouseDown: function(event, currentTarget){
event.preventDefault();
_V_.blockTextSelection();
this.currSeekBar = currentTarget;
this.currHandle = _V_.getData(currentTarget).seekHandle || false;
this.scrubbing = true;
this.videoWasPlaying = !this.paused();
this.pause();
this.setCurrentTimeWithScrubber(event);
_V_.addEvent(document, "mousemove", _V_.proxy(this, this.onSeekBarMouseMove));
_V_.addEvent(document, "mouseup", _V_.proxy(this, this.onSeekBarMouseUp));
},
onSeekBarMouseMove: function(event){ // Removeable
this.setCurrentTimeWithScrubber(event);
},
onSeekBarMouseUp: function(event){ // Removeable
_V_.unblockTextSelection();
_V_.removeEvent(document, "mousemove", this.onSeekBarMouseMove, false);
_V_.removeEvent(document, "mouseup", this.onSeekBarMouseUp, false);
this.scrubbing = false;
if (this.videoWasPlaying) {
this.play();
}
},
setCurrentTimeWithScrubber: function(event){
var bar = this.currSeekBar,
barX = _V_.findPosX(bar),
barW = bar.offsetWidth,
handle = this.currHandle,
handleW = (handle) ? handle.offsetWidth : 0;
// Adjusted X and Width, so handle doesn't go outside the bar
barAX = barX + (handleW / 2),
barAW = barW - handleW,
// Percent that the click is through the adjusted area
percent = Math.max(0, Math.min(1, (event.pageX - barAX) / barAW)),
// Percent translated to pixels
percentPix = percent * barAW,
// Percent translated to seconds
newTime = percent * this.duration();
// Don't let video end while scrubbing.
if (newTime == this.duration()) { newTime = newTime - 0.1; }
// Set new time (tell player to seek to new time)
this.currentTime(newTime);
},
getSeekBarAdjustedWidth: function(bar, handle){
var bar = this.currSeekBar,
barX = _V_.findPosX(bar),
barW = bar.offsetWidth,
handle = this.currHandle,
handleW = (handle) ? handle.offsetWidth : 0;
// Adjusted X and Width, so handle doesn't go outside the bar
barAX = barX + (handleW / 2),
barAW = barW - handleW;
},
updateSeekBars: function(){
// If scrubbing, use the cached currentTime value for speed
var progress = /* (this.scrubbing) ? this.values.currentTime / this.duration() : */ this.currentTime() / this.duration();
// Protect against no duration and other division issues
if (isNaN(progress)) { progress = 0; }
this.each(this.bels.seekBars, function(bar){
var barData = _V_.getData(bar),
barX = _V_.findPosX(bar),
barW = bar.offsetWidth,
handle = barData.seekHandle,
progBar = barData.playProgress,
handleW = (handle) ? handle.offsetWidth : 0;
// Adjusted X and Width, so handle doesn't go outside the bar
barAX = barX + (handleW / 2),
barAW = barW - handleW;
// Percent that the click is through the adjusted area
// percent = Math.max(0, Math.min(1, (event.pageX - barAX) / barAW)),
// Percent translated to pixels
// percentPix = percent * barAW,
// Percent translated to seconds
// newTime = percent * this.duration();
progBarProgress = _V_.round(progress * barAW + handleW / 2) + "px";
if (progBar && progBar.style) { progBar.style.width = progBarProgress; }
handle.style.left = _V_.round(progress * barAW)+"px";
});
// Update bar length
// this.each(this.bels.playProgressBars, function(bar){
// if (bar.style) { bar.style.width = _V_.round(progress * 100, 2) + "%"; }
// });
// Move Handle
},
onSeekBarFocus: function(event){
_V_.addEvent(document, "keyup", _V_.proxy(this, this.onSeekBarKey));
},
onSeekBarKey: function(event){
if (event.which == 37) {
event.preventDefault();
this.currentTime(this.currentTime() - 1);
} else if (event.which == 39) {
event.preventDefault();
this.currentTime(this.currentTime() + 1);
}
},
onSeekBarBlur: function(event){
_V_.removeEvent(document, "keyup", _V_.proxy(this, this.onSeekBarKey));
}
}
);
/* Seek Handle Behaviors
================================================================================ */
VideoJS.fn.newBehavior("seekHandle",
function(element){
if (!this.bels.seekHandles) { this.bels.seekHandles = []; }
this.bels.seekHandles.push(element);
// Store references between seekbar and seekhandle
_V_.getData(element).seekBar = element.parentNode;
_V_.getData(element.parentNode).seekHandle = element;
},
function(){},
{}
);
/*
CHANGED TO SEEK BAR
Play Progress Bar Behaviors
================================================================================ */
// VideoJS.fn.newBehavior("playProgressBar",
// function(element){
// if (!this.bels.playProgressBars) {
// this.bels.playProgressBars = [];
// this.addEvent("timeupdate", this.updatePlayProgressBars);
// }
// this.bels.playProgressBars.push(element);
// },
// function(){
// // Remove
// },
// {
// // Ajust the play progress bar's width based on the current play time
// updatePlayProgressBars: function(){
// // If scrubbing, use the cached currentTime value for speed
// var progress = (this.scrubbing) ? this.values.currentTime / this.duration() : this.currentTime() / this.duration();
// _V_.log("PROG", progress)
// // Protect against no duration and other division issues
// if (isNaN(progress)) { progress = 0; }
// // Update bar length
// this.each(this.bels.playProgressBars, function(bar){
// if (bar.style) { bar.style.width = _V_.round(progress * 100, 2) + "%"; }
// });
// }
// }
// );
/* Load Progress Bar Behaviors
================================================================================ */
VideoJS.fn.newBehavior("loadProgressBar",
function(element){
if (!this.bels.loadProgressBars) { this.bels.loadProgressBars = []; }
this.bels.loadProgressBars.push(element);
this.addEvent("progress", this.updateLoadProgressBars);
},
function(){},
{
updateLoadProgressBars: function(event){
// log("updating progress bars", this.bufferedPercent());
this.each(this.bels.loadProgressBars, function(bar){
if (bar.style) { bar.style.width = _V_.round(this.bufferedPercent() * 100, 2) + "%"; }
});
}
}
);

43
dev/src/behaviors/texttrackdisplays.js
View File

@ -1,43 +0,0 @@
/* Text Track Displays
================================================================================ */
// Create a behavior type for each text track type (subtitlesDisplay, captionsDisplay, etc.).
// Then you can easily do something like.
// player.addBehavior(myDiv, "subtitlesDisplay");
// And the myDiv's content will be updated with the text change.
_V_.each(["subtitles", "captions", "chapters", "descriptions"], function(type){
var add, remove,
name = type+"Display",
plural = name+"s",
updateFuncName = "update"+plural,
funcs = {};
// Add the behavior to an element
add = function(element){
if (!this.bels[plural]) {
this.bels[plural] = [];
this.addEvent(type+"update", this[updateFuncName]);
}
this.bels[plural].push(element);
};
// Remove the behavior from an element
remove = function(element){
if (this.bels[plural]) {
_V_.remove(element, this.bels[plural]);
if (this.bels[plural].length == 0) {
this.removeEvent(type+"update", this[updateFuncName]);
delete this.bels[plural];
}
}
};
// Addional needed funcitons (added directly to player)
funcs[updateFuncName] = function(){
var val = this.textTrackValue(type);
this.each(this.bels[plural], function(display){
display.innerHTML = val;
});
};
VideoJS.fn.newBehavior(name, add, remove, funcs);
});

177
dev/src/behaviors/volume.js
View File

@ -1,177 +0,0 @@
/* Volume Behaviors
================================================================================ */
/* Seek Bar Behaviors (Current Time Scrubber)
================================================================================ */
VideoJS.fn.newBehavior("volumeBar",
function(element){
if (!this.bels.volumeBars) {
this.bels.volumeBars = [];
this.addEvent("volumechange", this.updateVolumeBars);
}
this.bels.volumeBars.push(element);
// Get and store related child objects (level & handle)
var data = _V_.getData(element);
this.each(element.childNodes, function(c){
if (c.className) {
if (c.className.indexOf("volume-handle") != -1) {
data.volumeHandle = c;
} else if (c.className.indexOf("volume-level") != -1) {
data.volumeLevel = c;
}
}
});
// Binding with element as 'this' so the holder element can be retrieved in IE.
// IE doesn't support the currentTarget event attr.
var player = this;
_V_.addEvent(element, "mousedown", _V_.proxy(element, function(event){
player.onVolumeBarMouseDown(event, this);
}));
// _V_.addEvent(element, "focus", _V_.proxy(this, this.onVolumeBarFocus));
// _V_.addEvent(element, "blur", _V_.proxy(this, this.onVolumeBarBlur));
},
function(){},
{
// Adjust the play position when the user drags on the progress bar
onVolumeBarMouseDown: function(event, currentTarget){
event.preventDefault();
_V_.blockTextSelection();
this.currVolumeBar = currentTarget;
this.currHandle = _V_.getData(currentTarget).volumeHandle || false;
this.setVolumeWithSlider(event);
_V_.addEvent(document, "mousemove", _V_.proxy(this, this.onVolumeBarMouseMove));
_V_.addEvent(document, "mouseup", _V_.proxy(this, this.onVolumeBarMouseUp));
},
onVolumeBarMouseMove: function(event){ // Removeable
this.setVolumeWithSlider(event);
},
onVolumeBarMouseUp: function(event){ // Removeable
_V_.unblockTextSelection();
_V_.removeEvent(document, "mousemove", this.onVolumeBarMouseMove, false);
_V_.removeEvent(document, "mouseup", this.onVolumeBarMouseUp, false);
},
setVolumeWithSlider: function(event){
var bar = this.currVolumeBar,
barX = _V_.findPosX(bar),
barW = bar.offsetWidth,
handle = this.currHandle,
handleW = (handle) ? handle.offsetWidth : 0;
// Adjusted X and Width, so handle doesn't go outside the bar
barAX = barX + (handleW / 2),
barAW = barW - handleW,
// Percent that the click is through the adjusted area
percent = Math.max(0, Math.min(1, (event.pageX - barAX) / barAW)),
// Percent translated to pixels
percentPix = percent * barAW,
// Percent translated to seconds
newTime = percent * this.duration();
this.volume(percent);
},
updateVolumeBars: function(){
var vol = this.volume();
this.each(this.bels.volumeBars, function(bar){
var barData = _V_.getData(bar),
barX = _V_.findPosX(bar),
barW = bar.offsetWidth,
handle = barData.volumeHandle,
progBar = barData.volumeLevel,
handleW = (handle) ? handle.offsetWidth : 0;
// Adjusted X and Width, so handle doesn't go outside the bar
barAX = barX + (handleW / 2),
barAW = barW - handleW;
// Percent that the click is through the adjusted area
// percent = Math.max(0, Math.min(1, (event.pageX - barAX) / barAW)),
// Percent translated to pixels
// percentPix = percent * barAW,
// Percent translated to seconds
// newTime = percent * this.duration();
progBarProgress = _V_.round(vol * barAW + handleW / 2) + "px";
if (progBar && progBar.style) { progBar.style.width = progBarProgress; }
handle.style.left = _V_.round(vol * barAW)+"px";
});
// Update bar length
// this.each(this.bels.playProgressBars, function(bar){
// if (bar.style) { bar.style.width = _V_.round(progress * 100, 2) + "%"; }
// });
// Move Handle
}// ,
// onVolumeBarFocus: function(event){
// _V_.addEvent(document, "keyup", _V_.proxy(this, this.onVolumeBarKey));
// },
// onVolumeBarKey: function(event){
// if (event.which == 37) {
// event.preventDefault();
// this.currentTime(this.currentTime() - 1);
// } else if (event.which == 39) {
// event.preventDefault();
// this.currentTime(this.currentTime() + 1);
// }
// },
// onVolumeBarBlur: function(event){
// _V_.removeEvent(document, "keyup", _V_.proxy(this, this.onVolumeBarKey));
// }
}
);
/* Mute Toggle
================================================================================ */
VideoJS.fn.newBehavior("muteToggle", function(element){
if (!this.bels.muteToggles) {
this.bels.muteToggles = [];
this.addEvent("volumechange", this.muteTogglesOnVolumeChange);
}
this.bels.muteToggles.push(element);
_V_.addEvent(element, "click", _V_.proxy(this, this.onMuteToggleClick));
// _V_.addEvent(element, "focus", _V_.proxy(this, this.onMuteToggleFocus));
// _V_.addEvent(element, "blur", _V_.proxy(this, this.onMuteToggleBlur));
},
function(){},
{
onMuteToggleClick: function(event){
this.muted( this.muted() ? false : true );
},
muteTogglesOnVolumeChange: function(event){
var vol = this.volume(),
level = 3;
if (vol == 0 || this.muted()) {
level = 0;
} else if (vol < 0.33) {
level = 1;
} else if (vol < 0.67) {
level = 2;
}
this.each(this.bels.muteToggles, function(toggle){
/* TODO improve muted icon classes */
_V_.each([0,1,2,3], function(i){
_V_.removeClass(toggle, "vjs-vol-"+i);
});
_V_.addClass(toggle, "vjs-vol-"+level);
});
}//,
// onMuteToggleFocus: function(event){
// _V_.addEvent(document, "keyup", _V_.proxy(this, this.onMuteToggleKey));
// },
// onMuteToggleKey: function(event){
// if (event.which == 32 || event.which == 13) {
// event.preventDefault();
// this.onMuteToggleClick();
// }
// },
// onMuteToggleBlur: function(event){
// _V_.removeEvent(document, "keyup", _V_.proxy(this, this.onMuteToggleKey));
// }
}
);

153
dev/src/controls/bar.js
View File

@ -1,153 +0,0 @@
_V_.controlSets.bar = {
options: {},
add: function(){
/* See controls/controls.html to see the HTML this creates. */
// Create a reference to the controls elements
var bar = this.cels.bar = {};
// Control Bar Main Div ("main")
bar.main = _V_.createElement("div", { className: "vjs-controls" });
// Add the controls to the video's container
this.box.appendChild(bar.main);
this.addBehavior(bar.main, "controlBar");
// Play Control
bar.playControl = _V_.createElement("div", {
className: "vjs-play-control vjs-control",
innerHTML: '<div><span class="vjs-control-text">Play</span></div>',
role: "button", tabIndex: 0
});
bar.main.appendChild(bar.playControl);
this.addBehavior(bar.playControl, "playToggle");
/* Time -------------------------------------------------------------- */
// Time Display
bar.currentTime = _V_.createElement("div", {
className: "vjs-current-time vjs-time-controls vjs-control"
});
bar.currentTimeDisplay = _V_.createElement("span", {
className: "vjs-current-time-display",
innerHTML: '0:00'
});
// Put display inside div, inside control div, to follow control scheme.
bar.currentTime.appendChild(_V_.createElement("div").appendChild(bar.currentTimeDisplay));
bar.main.appendChild(bar.currentTime);
this.addBehavior(bar.currentTimeDisplay, "currentTimeDisplay");
// Time Separator (Not used in main skin, but still available, and could be used as a 'spare element')
bar.timeDivider = _V_.createElement("div", {
className: "vjs-time-divider",
innerHTML: '<div><span>/</span></div>'
});
bar.main.appendChild(bar.timeDivider);
// Duration Display
bar.duration = _V_.createElement("div", {
className: "vjs-duration vjs-time-controls vjs-control"
});
bar.durationDisplay = _V_.createElement("span", {
className: "vjs-duration-display",
innerHTML: '0:00'
});
// Put display inside div, inside control div, to follow control scheme.
bar.duration.appendChild(_V_.createElement("div").appendChild(bar.durationDisplay));
bar.main.appendChild(bar.duration);
this.addBehavior(bar.durationDisplay, "durationDisplay");
// Duration Display
bar.remainingTime = _V_.createElement("div", {
className: "vjs-remaining-time vjs-time-controls vjs-control"
});
bar.remainingTimeDisplay = _V_.createElement("span", {
className: "vjs-remaining-time-display",
innerHTML: '-0:00'
});
// Put display inside div, inside control div, to follow control scheme.
bar.remainingTime.appendChild(_V_.createElement("div").appendChild(bar.remainingTimeDisplay));
bar.main.appendChild(bar.remainingTime);
this.addBehavior(bar.remainingTime, "remainingTimeDisplay");
/* Progress -------------------------------------------------------------- */
// Progress Control: Seek, Load Progress, and Play Progress
bar.progressControl = _V_.createElement("div", { className: "vjs-progress-control vjs-control" });
bar.main.appendChild(bar.progressControl);
// Seek Bar and holder for the progress bars
bar.seekBar = _V_.createElement("div", { className: "vjs-progress-holder" });
bar.progressControl.appendChild(bar.seekBar);
// Load Progress Bar
bar.loadProgressBar = _V_.createElement("div", {
className: "vjs-load-progress",
innerHTML: '<span class="vjs-control-text">Loaded: 0%</span>'
});
bar.seekBar.appendChild(bar.loadProgressBar);
this.addBehavior(bar.loadProgressBar, "loadProgressBar");
// Play Progress Bar
bar.playProgressBar = _V_.createElement("div", {
className: "vjs-play-progress",
innerHTML: '<span class="vjs-control-text">Progress: 0%</span>'
});
bar.seekBar.appendChild(bar.playProgressBar);
// Seek Handle
bar.seekHandle = _V_.createElement("div", {
className: "vjs-seek-handle",
innerHTML: '<span class="vjs-control-text">00:00</span>',
tabIndex: 0,
role: "slider", "aria-valuenow": 0, "aria-valuemin": 0, "aria-valuemax": 100
});
bar.seekBar.appendChild(bar.seekHandle);
// SeekBar Behavior includes play progress bar, and seek handle
// Needed so it can determine seek position based on handle position/size
this.addBehavior(bar.seekBar, "seekBar");
/* Fullscreen -------------------------------------------------------------- */
// Fullscreen Button
bar.fullscreenControl = _V_.createElement("div", {
className: "vjs-fullscreen-control vjs-control",
innerHTML: '<div><span class="vjs-control-text">Fullscreen</span></div>',
role: "button", tabIndex: 0
});
bar.main.appendChild(bar.fullscreenControl);
this.addBehavior(bar.fullscreenControl, "fullscreenToggle");
/* Volume -------------------------------------------------------------- */
// Fullscreen Button
bar.volumeControl = _V_.createElement("div", { className: "vjs-volume-control vjs-control" });
bar.volumeBar = _V_.createElement("div", { className: "vjs-volume-bar" });
bar.volumeLevel = _V_.createElement("div", {
className: "vjs-volume-level",
innerHTML: '<span class="vjs-control-text"></span>'
});
bar.volumeHandle = _V_.createElement("div", {
className: "vjs-volume-handle",
innerHTML: '<span class="vjs-control-text"></span>',
tabindex: 0,
role: "slider", "aria-valuenow": 0, "aria-valuemin": 0, "aria-valuemax": 100
});
bar.volumeBar.appendChild(bar.volumeLevel);
bar.volumeBar.appendChild(bar.volumeHandle);
bar.volumeControl.appendChild(bar.volumeBar);
bar.main.appendChild(bar.volumeControl);
this.addBehavior(bar.volumeBar, "volumeBar");
// Mute Button
bar.muteControl = _V_.createElement("div", {
className: "vjs-mute-control vjs-control",
innerHTML: '<div><span class="vjs-control-text">Mute</span></div>',
role: "button", tabIndex: 0
});
bar.main.appendChild(bar.muteControl);
this.addBehavior(bar.muteControl, "muteToggle");
},
remove: function(){
this.box.removeChild(this.cels.bigPlayButton);
delete this.cels.bigPlayButton;
this.removeBehavior(this.cels.bigPlayButton, "bigPlayButton");
}
};

52
dev/src/controls/bigPlay.js
View File

@ -1,52 +0,0 @@
_V_.controlSets.bigPlayButton = {
options: {},
add: function(){
/* Creating this HTML
<div class="vjs-big-play-button"><span></span></div>
*/
this.cels.bigPlayButton = _V_.createElement("div", {
className: "vjs-big-play-button",
innerHTML: "<span></span>"
});
this.box.appendChild(this.cels.bigPlayButton);
this.addBehavior(this.cels.bigPlayButton, "bigPlayButton");
},
remove: function(){
this.removeBehavior(this.cels.bigPlayButton, "bigPlayButton");
this.box.removeChild(this.cels.bigPlayButton);
delete this.cels.bigPlayButton;
}
};
/* Big Play Button Behaviors
================================================================================ */
VideoJS.fn.newBehavior("bigPlayButton",
// Add Big Play Button Behavior
function(element){
if (!this.bels.bigPlayButtons) {
this.bels.bigPlayButtons = [];
this.addEvent("play", this.hideBigPlayButtons);
this.addEvent("ended", this.showBigPlayButtons);
}
this.bels.bigPlayButtons.push(element);
this.addBehavior(element, "playButton");
},
// Remove Big Play Button Behavior
function(element){
},
// Needed functions (added directly to player (this))
{
showBigPlayButtons: function(){
if (!this.options.controlsEnabled) { return; }
this.each(this.bels.bigPlayButtons, function(element){
element.style.display = "block";
});
},
hideBigPlayButtons: function(){
this.each(this.bels.bigPlayButtons, function(element){
element.style.display = "none";
});
}
}
);

157
dev/src/controls/controls.html
View File

@ -1,157 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Controls HTML</title>
<link rel="stylesheet" href="../video-js.css" type="text/css">
</head>
<body>
<div class="video-js vjs-default-skin" style="width: 640px; height: 270px;">
<video id="vid1" class="" preload="none" width="640" height="264" data-setup="" poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" type='video/flv'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
<div class="vjs-controls">
<!-- Play/Pause Button -->
<div class="vjs-play-control vjs-control" role="button" tabindex="0">
<div>
<span class="vjs-control-text">Play</span>
</div>
</div>
<!-- Current Time Display -->
<div class="vjs-current-time vjs-time-controls vjs-control">
<div>
<span class="vjs-current-time-display">00:00</span>
</div>
</div>
<!-- Optional Divider for Time -->
<div class="vjs-time-divider">
<div>
<span>/</span>
</div>
</div>
<!-- Duration Display -->
<div class="vjs-duration vjs-time-controls vjs-control">
<div>
<span class="vjs-duration-display">00:00</span>
</div>
</div>
<!-- Remaining Time Display -->
<div class="vjs-remaining-time vjs-time-controls vjs-control">
<div>
<span class="vjs-remaining-time-display">00:00</span>
</div>
</div>
<!-- Seek Slider and Load & Play Progress Bars -->
<div class="vjs-progress-control vjs-control" role="slider" tabindex="0" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<!-- Seek Slider + Holds both progress bars. -->
<div class="vjs-progress-holder">
<!-- Load Progress -->
<div class="vjs-load-progress" title="Load Progress">
<span class="vjs-control-text">Loaded: 0%</span><!-- Support Multiple Load Progress Bars -->
</div>
<!-- Play Progress -->
<div class="vjs-play-progress" title="Play Progress">
<span class="vjs-control-text">Progress: 0%</span>
</div>
</div>
<!-- Seek Handle -->
<div class="vjs-seek-handle" title="Current Time">
<div>
<span class="vjs-control-text">00:00</span>
</div>
</div>
</div>
<!-- Fullscreen Control -->
<div class="vjs-fullscreen-control vjs-control" role="button" tabindex="0">
<div>
<span class="vjs-control-text">Fullscreen</span>
</div>
</div>
<!-- Volume Control -->
<div class="vjs-volume-control vjs-control">
<div class="vjs-volume-bar">
<!-- Volume Bar -->
<div class="vjs-volume-level">
<span class="vjs-control-text"></span>
</div>
<!-- Volume Handle -->
<div class="vjs-volume-handle" tabindex="0" role="slider" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<span class="vjs-control-text"></span>
</div>
</div>
</div>
<!-- Mute Button -->
<div class="vjs-mute-control" role="button" tabindex="0">
<div>
<span class="vjs-control-text">Mute</span>
</div>
</div>
<!-- Rewind Button -->
<!-- <div class="vjs-rewind-control vjs-control" title="Rewind" role="button" tabindex="0">
<div>
<span class="vjs-control-text">Rewind</span>
</div>
</div> -->
<!-- Fast Forward Button -->
<!-- <div class="vjs-forward-control" title="Fast Forward" role="button" tabindex="0">
<div>
<span>Fast Forward</span>
</div>
</div> -->
<!-- Previous Video Button -->
<!-- <div class="vjs-previous-control" title="Previous Video" role="button" tabindex="0">
<div>
<span>Previous Video</span>
</div>
</div> -->
<!-- Next Video Button -->
<!-- <div class="vjs-next-control" title="Next Video" role="button" tabindex="0">
<div>
<span>Next Video</span>
</div>
</div> -->
<!-- Subtitles Button -->
<!-- <div class="vjs-subtitles-control" title="Subtitles On/Off" role="button" tabindex="0">
<div>
<span>Closed Captions</span>
</div>
</div> -->
<!-- Captions Button -->
<!-- <div class="vjs-captions-control" title="Captions On/Off" role="button" tabindex="0">
<div>
<span>Closed Captions</span>
</div>
</div> -->
</div>
</div>
</body>
</html>

134
dev/src/controls/main.js
View File

@ -1,134 +0,0 @@
/* OLD VERSION OF CONTROL BAR */
_V_.controlSets.main = {
options: {},
add: function(){
/* Creating this HTML
<div class="vjs-controls">
<div class="vjs-play-control">
<span></span>
</div>
<div class="vjs-progress-control">
<div class="vjs-progress-holder">
<div class="vjs-load-progress"></div>
<div class="vjs-play-progress"></div>
</div>
</div>
<div class="vjs-time-control">
<span class="vjs-current-time-display">00:00</span><span> / </span><span class="vjs-duration-display">00:00</span>
</div>
<div class="vjs-volume-control">
<div>
<span></span><span></span><span></span><span></span><span></span><span></span>
</div>
</div>
<div class="vjs-fullscreen-control">
<div>
<span></span><span></span><span></span><span></span>
</div>
</div>
</div>
*/
this.cels.main = {};
// Create a div to hold the different controls
this.cels.main.bar = _V_.createElement("div", { className: "vjs-controls" });
// Add the controls to the video's container
this.box.appendChild(this.cels.main.bar);
this.addBehavior(this.cels.main.bar, "controlBar");
// Build the play control
this.cels.main.playControl = _V_.createElement("div", { className: "vjs-play-control vjs-control", innerHTML: "<span></span>" });
this.cels.main.bar.appendChild(this.cels.main.playControl);
this.addBehavior(this.cels.main.playControl, "playToggle");
// Build the progress control
this.cels.main.progressControl = _V_.createElement("div", { className: "vjs-progress-control vjs-control" });
this.cels.main.bar.appendChild(this.cels.main.progressControl);
// Create a holder for the progress bars
this.cels.main.progressHolder = _V_.createElement("div", { className: "vjs-progress-holder" });
this.cels.main.progressControl.appendChild(this.cels.main.progressHolder);
this.addBehavior(this.cels.main.progressHolder, "seekBar");
// Create the loading progress display
this.cels.main.loadProgressBar = _V_.createElement("div", { className: "vjs-load-progress" });
this.cels.main.progressHolder.appendChild(this.cels.main.loadProgressBar);
this.addBehavior(this.cels.main.loadProgressBar, "loadProgressBar");
// Create the playing progress display
this.cels.main.playProgressBar = _V_.createElement("div", { className: "vjs-play-progress" });
this.cels.main.progressHolder.appendChild(this.cels.main.playProgressBar);
this.addBehavior(this.cels.main.playProgressBar, "playProgressBar");
// Create the progress time display (00:00 / 00:00)
this.cels.main.timeControl = _V_.createElement("div", { className: "vjs-time-control vjs-control" });
this.cels.main.bar.appendChild(this.cels.main.timeControl);
// // Create the current play time display
this.cels.main.currentTimeDisplay = _V_.createElement("span", { className: "vjs-current-time-display", innerHTML: "00:00" });
this.cels.main.timeControl.appendChild(this.cels.main.currentTimeDisplay);
this.addBehavior(this.cels.main.currentTimeDisplay, "currentTimeDisplay");
// Add time separator
this.cels.main.timeSeparator = _V_.createElement("span", { innerHTML: " / " });
this.cels.main.timeControl.appendChild(this.cels.main.timeSeparator);
// Create the total duration display
this.cels.main.durationDisplay = _V_.createElement("span", { className: "vjs-duration-display", innerHTML: "00:00" });
this.cels.main.timeControl.appendChild(this.cels.main.durationDisplay);
this.addBehavior(this.cels.main.durationDisplay, "durationDisplay");
// Create the volumne control
this.cels.main.volumeControl = _V_.createElement("div", {
className: "vjs-volume-control vjs-control",
innerHTML: '<div><span class="vjs-vc-1"></span><span class="vjs-vc-2"></span><span class="vjs-vc-3"></span><span class="vjs-vc-4"></span><span class="vjs-vc-5"></span><span class="vjs-vc-6"></span></div>'
});
this.cels.main.bar.appendChild(this.cels.main.volumeControl);
this.addBehavior(this.cels.main.volumeControl, "volumeScrubber");
this.cels.main.volumeDisplay = this.cels.main.volumeControl.children[0];
this.addBehavior(this.cels.main.volumeDisplay, "volumeDisplay");
// Crete the fullscreen control
this.cels.main.fullscreenControl = _V_.createElement("div", {
className: "vjs-fullscreen-control vjs-control",
innerHTML: '<div><span class="vjs-fc-1"></span><span class="vjs-fc-2"></span><span class="vjs-fc-3"></span><span class="vjs-fc-4"></span></div>'
});
this.cels.main.bar.appendChild(this.cels.main.fullscreenControl);
this.addBehavior(this.cels.main.fullscreenControl, "fullscreenToggle");
},
remove: function(){
this.box.removeChild(this.cels.bigPlayButton);
delete this.cels.bigPlayButton;
this.removeBehavior(this.cels.bigPlayButton, "bigPlayButton");
}
}
/* Control Bar Behaviors
================================================================================ */
VideoJS.fn.newBehavior("controlBar",
function(element){
if (!this.bels.controlBars) {
this.bels.controlBars = [];
// this.addEvent("mouseover", this.showControlBars);
// this.addEvent("mouseout", this.hideControlBars);
}
this.bels.controlBars.push(element);
},
function(element){},
{
showControlBars: function(){
this.each(this.bels.controlBars, function(bar){
// bar.style.opacity = 1;
bar.style.display = "block";
});
},
hideControlBars: function(){
this.each(this.bels.controlBars, function(bar){
// bar.style.opacity = 0;
bar.style.display = "none";
});
}
}
);

22
dev/src/controls/subtitlesBox.js
View File

@ -1,22 +0,0 @@
_V_.controlSets.subtitlesBox = {
options: {},
add: function(){
/* Creating this HTML
<div class="vjs-subtitles"></div>
*/
// Create a reference to the element
var subs = this.cels.subtitlesBox = _V_.createElement("div", { className: "vjs-subtitles" });
// Add the controls to the video's container
this.box.appendChild(subs);
this.addBehavior(subs, "subtitlesDisplay");
},
remove: function(){
this.removeBehavior(this.cels.subtitlesBox, "subtitlesDisplay");
this.box.removeChild(this.cels.subtitlesBox);
delete this.cels.subtitlesBox;
}
};

451
dev/src/core.js
View File

@ -1,451 +0,0 @@
// HTML5 Shiv. Must be in <head>.
document.createElement("video");document.createElement("audio");
var VideoJS = _V_ = function(id, addOptions, ready){
// If player has already been created for ID, return player.
if (_V_.players[id]) {
return _V_.players[id];
}
// Allow for element or ID to be passed in.
var tag = (typeof id == "string" ? _V_.el(id) : id);
if (!tag || !tag.nodeName) { // Could be a box div also
throw new TypeError("The element or ID supplied is not valid. (video.js)"); // Returns
}
// Check if (not) using "new" operator before the function to create new instance
if (!(this instanceof arguments.callee)) {
// Return the player attr on the element if it exists
// Otherwise set up a new player.
return tag.player || new VideoJS(id, addOptions, ready);
}
this.tag = tag; // Store the original tag used to set options
var box = this.box = _V_.createElement("div"), // Div to contain video and controls
options = this.options = {},
width = options.width = tag.width,
height = options.height = tag.height,
// Browsers default to 300x150 if there's no width/height or video size data.
initWidth = width || 300,
initHeight = height || 150,
// If the HTML5 video is already playing, we'll adjust
paused = tag.paused;
// Make player findable on elements
tag.player = box.player = this;
// Wrap video tag in div (box) container
tag.parentNode.insertBefore(box, tag);
box.appendChild(tag); // Breaks iPhone, fixed in HTML5 setup.
// Safari (5.1.1) and Chrome (15) both have issues when you use autoplay and a poster and no controls.
// Chrome just hides the video. Safari hides the video if you move it in the DOM like VJS does.
// This fixes the Safari issue by removing the poster, which is currently never used again after
// the video starts playing.
if (!paused) {
options.poster = tag.poster
tag.poster = null;
tag.play();
}
// Give video tag properties to box
box.id = this.id = tag.id; // ID will now reference box, not the video tag
box.className = tag.className;
// Update tag id/class for use as HTML5 playback tech
tag.id += "_html5_api";
tag.className = "vjs-tech";
// Make player easily findable by ID
_V_.players[box.id] = this
// Make box use width/height of tag, or default 300x150
box.setAttribute("width", initWidth);
box.setAttribute("height", initHeight);
// Enforce with CSS since width/height attrs don't work on divs
box.style.width = initWidth+"px";
box.style.height = initHeight+"px";
// Remove width/height attrs from tag so CSS can make it 100% width/height
tag.removeAttribute("width");
tag.removeAttribute("height");
// Store controls setting, and then remove immediately so native controls don't flash.
options.controls = tag.getAttribute("controls") !== null;
tag.removeAttribute("controls");
// Set Options
_V_.merge(options, _V_.options); // Copy Global Defaults
_V_.merge(options, this.getVideoTagSettings()); // Override with Video Tag Options
_V_.merge(options, addOptions); // Override/extend with options from setup call
// 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<j.length;i++) {
if (j[i].nodeName == "SOURCE" || j[i].nodeName == "TRACK") {
tag.removeChild(j[i]);
}
}
}
// Add callback to ready queue
if (ready) { this.ready(ready); }
// Store references to elements for different purposes
// Tech (playback) Elements. Store playback tech objects for switching between them.
// ex. this.tels.html5 = videoTagElement; this.tels.flowplayer = swfObject;
this.tels = {};
// Behavior Elements. Store refs to elements that trigger/are triggered by a behavior.
// ex. this.bels.playButtons = [element1, element2]
this.bels = {};
// Control Elements. Store refs to elements that are part of control sets
// this.cels.mainControls.playButton = playButtonDiv;
this.cels = {};
// New holder for UI objects
this.ui = {};
// Cache for video property values.
this.values = {};
this.apiIsReady = false;
this.addBehavior(this.box, "box");
this.addEvent("ended", this.handleEnded);
// When the API is ready, loop through the controlsets and add to the player.
if (this.options.controls) {
this.addEvent("techready", function(){
this.each(this.options.controlSets, function(set){
this.appendUI(set);
});
// this.each(this.options.controlSets, function(set){
// _V_.controlSets[set].add.call(this);
// });
});
}
// Loop through playback technologies (HTML5, Flash) and check for support
// Then load the best source.
this.src(this.options.sources);
// Return Player Obj (though API will not be ready yet)
return this;
}, _V_ = VideoJS;
VideoJS.options = {
techOrder: ["html5","h5swf","flowplayer"],
// controlSets: ["bigPlayButton", "bar", "subtitlesBox"/*, "replay"*/],
controlSets: ["bigPlayButton", "controlBar"/*, "bar", "subtitlesBox", "replay"*/],
controlSetOptions: {
bigPlayButton: {},
bar: {},
replay: {}
},
width: "auto", // Default of web browser is 300x150. Should rely on source width/height.
height: "auto"
};
VideoJS.fn = VideoJS.prototype = {
getVideoTagSettings: function(){
var options = {
sources: [],
tracks: []
};
options.src = this.tag.src;
options.poster = this.tag.poster;
options.preload = this.tag.preload;
options.autoplay = this.tag.getAttribute("autoplay") !== null; // hasAttribute not IE <8 compatible
options.loop = this.tag.getAttribute("loop") !== null;
options.muted = this.tag.getAttribute("muted") !== null;
for (var c,i=0,j=this.tag.children;i<j.length;i++) {
c = j[i];
if (c.nodeName == "SOURCE") {
options.sources.push({
src: c.src,
type: c.type,
media: c.media,
title: c.title
});
}
if (c.nodeName == "TRACK") {
options.tracks.push(new _V_.Track({
src: c.getAttribute("src"),
kind: c.getAttribute("kind"),
srclang: c.getAttribute("srclang"),
label: c.getAttribute("label"),
'default': c.getAttribute("default") !== null,
title: c.getAttribute("title")
}, this));
}
}
return options;
},
/* PLayback Technology (tech)
================================================================================ */
loadTech: function(techName, source){
var tech = this.currentTech = _V_.tech[techName];
// Pause and remove current playback technology
if (this.currentTechName) {
this.removeTech(techName);
// If the first time loading, HTML5 tag will exist but won't be initialized
// So we need to remove it if we're not loading HTML5
} else if (!this.currentTechName && techName != "html5") {
this.removeTechElement(this.tag);
}
this.currentTechName = techName;
// Turn off API access because we're loading a new tech that might load asynchronously
this.isReady = false;
// Point all internal API calls to new playback tech's API.
this.api = tech.api;
// Finsh API Setup when tech is ready
this.addEvent("techready", _V_.proxy(this, function(){
// Reomve this so it's not called twice next load
// this.removeEvent("techready", arguments.callee);
this.currentTechElement = this.tels[this.currentTechName];
// Set up playback technology's event triggers
this.api.setupTriggers.call(this);
this.triggerReady();
// Make playback element clickable
this.addBehavior(this.currentTechElement, "playToggle");
// Manually track progress in cases where the browser/flash player doesn't report it.
if (!_V_.techSupports(tech, "event", "progress")) { this.manualProgressOn(); }
// Manually track timeudpates in cases where the browser/flash player doesn't report it.
if (!_V_.techSupports(tech, "event", "timeupdate")) { this.manualTimeUpdatesOn(); }
}));
// Initialize new tech if it hasn't been yet
if (this.tels[techName] === undefined) {
tech.init.call(this, source);
} else {
_V_.insertFirst(this.tels[techName], this.box);
this.src(source);
}
},
removeTech: function(techName){
this.removeTechElement(this.tels[techName]);
// Should probably remove API listeners as well
},
removeTechElement: function(el){
this.box.removeChild(el);
},
/* Ready - Trigger functions when player is ready
================================================================================ */
readyQueue: [],
ready: function(fn){
if (this.isReady) {
fn.call(this);
} else {
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 = [];
}
},
/* 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; i<j; i++) {
if (fn.call(this, arr[i], i)) { break; }
}
},
extend: function(obj){
for (var attrname in obj) {
if (obj.hasOwnProperty(attrname)) { this[attrname]=obj[attrname]; }
}
},
/* Local Storage
================================================================================ */
setLocalStorage: function(key, value){
// IE was throwing errors referencing the var anywhere without this
var localStorage = localStorage || false;
if (!localStorage) { return; }
try {
localStorage[key] = value;
} catch(e) {
if (e.code == 22 || e.code == 1014) { // Webkit == 22 / Firefox == 1014
_V_.log("VideoJS: LocalStorage Full")
}
}
}
};
VideoJS.players = {};

15
dev/src/log.js
View File

@ -1,15 +0,0 @@
// 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={};}})());

153
dev/src/tech/h5swf.js
View File

@ -1,153 +0,0 @@
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(){
return swfobject.hasFlashPlayerVersion("9");
},
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,
poster: this.options.poster,
},
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("Flash (H5SWF) 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(); },
poster: function(){ this.tels.h5swf.vjs_getProperty("poster"); },
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

170
dev/src/tech/html5.js
View File

@ -1,170 +0,0 @@
// 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");
}
// Moving video inside box breaks autoplay on Safari. This forces it to play.
// Currently triggering play in other browsers as well.
this.addEvent("techready", function(){
if (this.options.autoplay && this.paused()) {
this.play();
}
this.removeEvent("techready", arguments.callee);
});
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<types.length; i++) {
_V_.addEvent(this.tels.html5, types[i], _V_.proxy(this, function(e){
e.stopPropagation();
this.triggerEvent(e);
}));
}
},
removeTriggers: function(){},
play: function(){ this.tels.html5.play(); },
pause: function(){ this.tels.html5.pause(); },
paused: function(){ return this.tels.html5.paused; },
currentTime: function(){ return this.tels.html5.currentTime; },
setCurrentTime: function(seconds){
try { this.tels.html5.currentTime = seconds; }
catch(e) {
_V_.log(e);
// this.warning(VideoJS.warnings.videoNotReady);
}
},
duration: function(){ return this.tels.html5.duration || 0; },
buffered: function(){ return this.tels.html5.buffered; },
volume: function(){ return this.tels.html5.volume; },
setVolume: function(percentAsDecimal){ this.tels.html5.volume = percentAsDecimal; },
muted: function(){ return this.tels.html5.muted; },
setMuted: function(muted){ this.tels.html5.muted = muted },
width: function(){ return this.tels.html5.offsetWidth; },
height: function(){ return this.tels.html5.offsetHeight; },
supportsFullScreen: function(){
if(typeof this.tels.html5.webkitEnterFullScreen == 'function') {
// Seems to be broken in Chromium/Chrome && Safari in Leopard
if (!navigator.userAgent.match("Chrome") && !navigator.userAgent.match("Mac OS X 10.5")) {
return true;
}
}
return false;
},
enterFullScreen: function(){
try {
this.tels.html5.webkitEnterFullScreen();
} catch (e) {
if (e.code == 11) {
// this.warning(VideoJS.warnings.videoNotReady);
_V_.log("VideoJS: Video not ready.")
}
}
},
src: function(src){ this.tels.html5.src = src; },
load: function(){ this.tels.html5.load(); },
currentSrc: function(){ return this.tels.html5.currentSrc; },
preload: function(){ return this.tels.html5.preload; },
setPreload: function(val){ this.tels.html5.preload = val; },
autoplay: function(){ return this.tels.html5.autoplay; },
setAutoplay: function(val){ this.tels.html5.autoplay = val; },
loop: function(){ return this.tels.html5.loop; },
setLoop: function(val){ this.tels.html5.loop = val; },
error: function(){ return this.tels.html5.error; },
networkState: function(){ return this.tels.html5.networkState; },
readyState: function(){ return this.tels.html5.readyState; },
seeking: function(){ return this.tels.html5.seeking; },
initialTime: function(){ return this.tels.html5.initialTime; },
startOffsetTime: function(){ return this.tels.html5.startOffsetTime; },
played: function(){ return this.tels.html5.played; },
seekable: function(){ return this.tels.html5.seekable; },
ended: function(){ return this.tels.html5.ended; },
videoTracks: function(){ return this.tels.html5.videoTracks; },
audioTracks: function(){ return this.tels.html5.audioTracks; },
videoWidth: function(){ return this.tels.html5.videoWidth; },
videoHeight: function(){ return this.tels.html5.videoHeight; },
textTracks: function(){ return this.tels.html5.textTracks; },
defaultPlaybackRate: function(){ return this.tels.html5.defaultPlaybackRate; },
playbackRate: function(){ return this.tels.html5.playbackRate; },
mediaGroup: function(){ return this.tels.html5.mediaGroup; },
controller: function(){ return this.tels.html5.controller; },
controls: function(){ return this.tels.html5.controls; },
defaultMuted: function(){ return this.tels.html5.defaultMuted; }
}
};
/* Device Fixes
================================================================================ */
// iOS
if (_V_.isIOS()) {
// If you move a video element in the DOM, it breaks video playback.
_V_.tech.html5.supports.movingElementInDOM = false;
}
// Android
if (_V_.isAndroid()) {
// Override Android 2.2 and less canPlayType method which is broken
if (_V_.androidVersion() < 3) {
document.createElement("video").constructor.prototype.canPlayType = function(type){
return (type && type.toLowerCase().indexOf("video/mp4") != -1) ? "maybe" : "";
};
}
}

262
dev/src/ui.js
View File

@ -1,262 +0,0 @@
(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;};})();
// bar.playToggle = new _V_.PlayToggle(player, options);
/* UI Component- Base class for all UI objects
================================================================================ */
_V_.UIComponent = _V_.Class.extend({
init: function(player, options){
this.player = player;
// Array of sub-components
this.components = [];
},
createElement: function(){},
destroy: function(){},
// 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(nameORobject){
var name, uiClass, options, component;
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
component = this.ui[name] = new _V_[uiClass](this);
// Add the UI object's element to the container div (box)
this.el.appendChild(component.el);
},
show: function(){
this.el.style.display = "block";
},
hide: function(){
this.el.style.display = "none";
}
});
/* Button - Base class for all buttons
================================================================================ */
_V_.Button = _V_.UIComponent.extend({
init: function(player, options){
this.player = player;
this.el = this.createElement();
_V_.addEvent(this.el, "click", _V_.proxy(this, this.onClick));
_V_.addEvent(this.el, "focus", _V_.proxy(this, this.onFocus));
_V_.addEvent(this.el, "blur", _V_.proxy(this, this.onBlur));
this._super(player, options);
},
createElement: function(type, options){
_V_.merge({
role: "button",
tabIndex: 0
}, options || {})
return _V_.createElement(type || "div", options);
},
// 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({
createElement: function(){
return this._super("div", {
className: "vjs-play-button vjs-control",
innerHTML: '<div><span class="vjs-control-text">Play</span></div>'
});
},
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: '<div><span class="vjs-control-text">Pause</span></div>'
});
},
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: '<div><span class="vjs-control-text">Play</span></div>'
});
},
// 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: '<div><span class="vjs-control-text">Fullscreen</span></div>'
});
},
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: "<span></span>"
});
},
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";
}
});

0
dev/flash/swfobject.js → flash/swfobject.js
View File

0
dev/flash/VideoJS.swf → flash/video-js.swf
View File

0
dev/src/_begin.js → src/_begin.js
View File

3
dev/src/_end.js → src/_end.js
View File

@ -2,5 +2,8 @@
// Expose to global
window.VideoJS = window._V_ = VideoJS;
// Run Auto-load players
_V_.autoSetup();
// End self-executing function
})(window);

183
src/component.js Normal file
View File

@ -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<j; i++) {
if (fn.call(this, arr[i], i)) { break; }
}
},
extend: function(obj){
for (var attrname in obj) {
if (obj.hasOwnProperty(attrname)) { this[attrname]=obj[attrname]; }
}
}
});

725
src/controls.js vendored Normal file
View File

@ -0,0 +1,725 @@
/* Control - Base class for all control elements
================================================================================ */
_V_.Control = _V_.Component.extend({
init: function(player, options){
this._super(player, options);
},
buildCSSClass: function(){
return "vjs-control " + this._super();
}
});
/* Button - Base class for all buttons
================================================================================ */
_V_.Button = _V_.Control.extend({
init: function(player, options){
this._super(player, options);
_V_.addEvent(this.el, "click", _V_.proxy(this, this.onClick));
_V_.addEvent(this.el, "focus", _V_.proxy(this, this.onFocus));
_V_.addEvent(this.el, "blur", _V_.proxy(this, this.onBlur));
return "fdsa";
},
createElement: function(type, attrs){
// Default to Div element
type = type || "div";
// Add standard Aria and Tabindex info
attrs = _V_.merge({
role: "button",
tabIndex: 0
}, attrs || {});
return this._super(type, {
className: attrs.className || this.buildCSSClass(),
innerHTML: attrs.innerHTML || '<div><span class="vjs-control-text">' + (this.buttonText || "Need Text") + '</span></div>'
});
},
// 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: "<span></span>"
});
},
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: '<div><span>/</span></div>'
});
}
});
_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: '<span class="vjs-control-text">Loaded: 0%</span>'
});
},
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: '<span class="vjs-control-text">Progress: 0%</span>'
});
}
});
// 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: '<span class="vjs-control-text">00:00</span>',
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: '<span class="vjs-control-text"></span>'
});
}
});
_V_.VolumeHandle = _V_.Component.extend({
createElement: function(){
return this._super("div", {
className: "vjs-volume-handle",
innerHTML: '<span class="vjs-control-text"></span>',
tabindex: 0,
role: "slider", "aria-valuenow": 0, "aria-valuemin": 0, "aria-valuemax": 100
});
}
});
_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: '<div><span class="vjs-control-text">Mute</span></div>'
});
},
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"
});

146
src/core.js Normal file
View File

@ -0,0 +1,146 @@
// HTML5 Shiv. Must be in <head> 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<j; i++) {
vid = vids[i];
// Check if element exists, has getAttribute func.
// IE seems to consider typeof el.getAttribute == "object" instead of "function" like expected, at least when loading the player immediately.
if (vid && vid.getAttribute) {
// Make sure this player hasn't already been set up.
if (vid.player === undefined) {
options = vid.getAttribute("data-setup");
// Check if data-setup attr exists.
// We only auto-setup if they've added the data-setup attr.
if (options !== null) {
// Parse options JSON
// If empty string, make it a parsable json object.
options = JSON.parse(options || "{}");
// Create new video.js instance.
player = _V_(vid, options);
}
}
// If getAttribute isn't defined, we need to wait for the DOM.
} else {
_V_.autoSetupTimeout(1);
break;
}
}
// No videos were found, so keep looping
} else {
_V_.autoSetupTimeout(1);
}
};
// Pause to let the DOM keep processing
_V_.autoSetupTimeout = function(wait){
setTimeout(_V_.autoSetup, wait);
};
// Being called at _end now.
_V_.autoSetupTimeout(1); // Let vjs javascript finish executing

0
dev/src/ecma.js → src/ecma.js
View File

2
dev/src/events.js → src/events.js
View File

@ -1,4 +1,4 @@
// Event System (J.Resig - Secrets of a JS Ninja http://jsninja.com/ [Go buy it, really])
// Event System (J.Resig - Secrets of a JS Ninja http://jsninja.com/ [Go read 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

0
dev/src/json.js → src/json.js
View File

50
dev/src/lib.js → src/lib.js
View File

@ -11,8 +11,8 @@ _V_.extend({
controlSets: {}, // Holder for control set definitions
techSupports: function(tech, type, name){
if (tech.supports[type]) {
return tech.supports[type][name];
if (_V_[tech].supports[type]) {
return _V_[tech].supports[type][name];
}
return false;
},
@ -21,8 +21,6 @@ _V_.extend({
tech.supports[type][name] = value;
},
html5Events: "loadstart,suspend,abort,error,emptied,stalled,loadedmetadata,loadeddata,canplay,canplaythrough,playing,waiting,seeking,seeked,ended,durationchange,timeupdate,progress,play,pause,ratechange,volumechange".split(","),
// Device Checks
isIE: function(){ return !+"\v1"; },
isIPad: function(){ return navigator.userAgent.match(/iPad/i) !== null; },
@ -171,6 +169,7 @@ _V_.extend({
// Returns the cache object where data for the element is stored
getData: function(elem){
// _V_.log(arguments.callee.caller.arguments.callee.caller)
var id = elem[_V_.expando];
if (!id) {
id = elem[_V_.expando] = _V_.guid++;
@ -257,16 +256,41 @@ _V_.extend({
_V_.log(e);
onError(e);
}
},
/* Local Storage
================================================================================ */
setLocalStorage: function(key, value){
// IE was throwing errors referencing the var anywhere without this
var localStorage = localStorage || false;
if (!localStorage) { return; }
try {
localStorage[key] = value;
} catch(e) {
if (e.code == 22 || e.code == 1014) { // Webkit == 22 / Firefox == 1014
_V_.log("LocalStorage Full (VideoJS)", e);
} else {
_V_.log("LocalStorage Error (VideoJS)", 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={};}})());

607
src/player.js Normal file
View File

@ -0,0 +1,607 @@
/* UI Component- Base class for all UI objects
================================================================================ */
_V_.Player = _V_.Component.extend({
init: function(tag, addOptions, ready){
this.tag = tag; // Store the original tag used to set options
var el = this.el = _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 = el.player = this;
// Wrap video tag in div (el/box) container
tag.parentNode.insertBefore(el, tag);
el.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
el.id = this.id = tag.id; // ID will now reference box, not the video tag
el.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[el.id] = this;
// Make box use width/height of tag, or default 300x150
el.setAttribute("width", initWidth);
el.setAttribute("height", initHeight);
// Enforce with CSS since width/height attrs don't work on divs
el.style.width = initWidth+"px";
el.style.height = initHeight+"px";
// Remove width/height attrs from tag so CSS can make it 100% width/height
tag.removeAttribute("width");
tag.removeAttribute("height");
// 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
// Store controls setting, and then remove immediately so native controls don't flash.
tag.removeAttribute("controls");
// 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<j.length;i++) {
if (j[i].nodeName == "SOURCE" || j[i].nodeName == "TRACK") {
tag.removeChild(j[i]);
}
}
}
// Add callback to ready queue
this.apiIsReady = false;
this.readyQueue = [];
if (ready) { this.ready(ready); }
// Holder for playback tech components
this.techs = {};
// Cache for video property values.
this.values = {};
this.addClass("vjs-paused");
this.addEvent("ended", this.onEnded);
this.addEvent("play", this.onPlay);
this.addEvent("pause", this.onPause);
// When the API is ready, loop through the components and add to the player.
this.components = [];
if (this.options.controls) {
this.addEvent("techready", function(){
this.each(this.options.components, function(set){
this.addComponent(set);
});
});
}
// Loop through playback technologies (HTML5, Flash) and check for support
// Then load the best source.
this.src(this.options.sources);
},
// Cache for video property values.
values: {},
destroy: function(){},
createElement: function(type, options){
},
getVideoTagSettings: function(){
var options = {
sources: [],
tracks: []
};
options.src = this.tag.src;
options.controls = this.tag.getAttribute("controls") !== null;
options.poster = this.tag.poster;
options.preload = this.tag.preload;
options.autoplay = this.tag.getAttribute("autoplay") !== null; // hasAttribute not IE <8 compatible
options.loop = this.tag.getAttribute("loop") !== null;
options.muted = this.tag.getAttribute("muted") !== null;
for (var c,i=0,j=this.tag.children;i<j.length;i++) {
c = j[i];
if (c.nodeName == "SOURCE") {
options.sources.push({
src: c.src,
type: c.type,
media: c.media,
title: c.title
});
}
if (c.nodeName == "TRACK") {
options.tracks.push(new _V_.Track({
src: c.getAttribute("src"),
kind: c.getAttribute("kind"),
srclang: c.getAttribute("srclang"),
label: c.getAttribute("label"),
'default': c.getAttribute("default") !== null,
title: c.getAttribute("title")
}, this));
}
}
return options;
},
/* PLayback Technology (tech)
================================================================================ */
// Load/Create an instance of playback technlogy including element and API methods
// And append playback element in player div.
loadTech: function(techName, source){
// Pause and remove current playback technology
if (this.tech) {
this.removeTech(tech);
// If the first time loading, HTML5 tag will exist but won't be initialized
// So we need to remove it if we're not loading HTML5
} else if (!this.tech && techName != "HTML5") {
this.removeTechElement(this.tag);
}
this.techName = techName;
// Turn off API access because we're loading a new tech that might load asynchronously
this.isReady = false;
// Finsh API Setup when tech is ready
this.addEvent("techready", _V_.proxy(this, function(){
// Reomve this so it's not called twice next load
this.removeEvent("techready", arguments.callee);
// Set up playback technology's event triggers
this.tech.setupTriggers();
this.triggerReady();
// Manually track progress in cases where the browser/flash player doesn't report it.
if (!_V_.techSupports(techName, "event", "progress")) { this.manualProgressOn(); }
// Manually track timeudpates in cases where the browser/flash player doesn't report it.
if (!_V_.techSupports(techName, "event", "timeupdate")) { this.manualTimeUpdatesOn(); }
}));
// Initialize new tech if it hasn't been yet and load source
// Add tech element to player div
if (this.techs[techName] === undefined) {
this.techs[techName] = this.tech = new _V_[techName](this, { source: source });
_V_.insertFirst(this.tech.el, this.el);
} else {
this.tech = this.techs[techName];
_V_.insertFirst(this.techs[techName].el, this.el);
this.src(source);
}
},
removeTech: function(tech){
this.removeTechElement(tech.el);
// TODO: Remove API listeners as well
},
removeTechElement: function(el){
this.el.removeChild(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.trackProgress();
// Watch for a native progress event call on the tech element
// In HTML5, some older versions don't support the progress event
// So we're assuming they don't, and turning off manual progress if they do.
this.tech.addEvent("progress", function(){
// Remove this listener from the element
this.removeEvent("progress", arguments.callee);
// Update known progress support for this playback technology
_V_.updateTechSupport(this.name, "event", "progress", true);
// Turn off manual progress tracking
this.player.manualProgressOff();
});
},
manualProgressOff: function(){
this.manualProgress = false;
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
// Watch for native timeupdate event
this.tech.addEvent("timeupdate", function(){
// Remove this listener from the element
this.removeEvent("timeupdate", arguments.callee);
// Update known progress support for this playback technology
_V_.updateTechSupport(this.name, "event", "timeupdate", true);
// Turn off manual progress tracking
this.player.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)
================================================================================ */
onEnded: function(){
if (this.options.loop) {
this.currentTime(0);
this.play();
} else {
// this.pause();
// this.currentTime(0);
// this.pause();
}
},
onPlay: function(){
_V_.removeClass(this.el, "vjs-paused");
_V_.addClass(this.el, "vjs-playing");
},
onPause: function(){
_V_.removeClass(this.el, "vjs-playing");
_V_.addClass(this.el, "vjs-paused");
}
});
/* Player API
================================================================================ */
_V_.Player.prototype.extend({
apiCall: function(method, arg){
if (this.isReady) {
return this.tech[method](arg);
} else {
throw new Error("The playback technology API is not ready yet. Use player.ready(myFunction).");
}
},
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);
_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<j.length;i++) {
var techName = j[i],
tech = _V_[techName];
// tech = _V_.tech[techName];
// Check if the browser supports this technology
if (tech.isSupported()) {
// Loop through each source object
for (var a=0,b=this.options.sources;a<b.length;a++) {
var source = b[a];
// Check if source can be played with this technology
if (tech.canPlaySource.call(this, source)) {
// If this technology is already loaded, set source
if (techName == this.currentTechName) {
this.src(source); // Passing the source object
// Otherwise load this technology with chosen source
} else {
this.loadTech(techName, source);
}
break techLoop; // Break both loops
}
}
}
}
// Case: Source object { src: "", type: "" ... }
} else if (source instanceof Object) {
this.src(source.src);
// Case: URL String (http://myvideo...)
} else {
this.apiCall("src", source);
this.load();
}
return this;
},
// Begin loading the src data
load: function(){
this.apiCall("load");
return this;
},
currentSrc: function(){
return this.apiCall("currentSrc");
},
textTrackValue: function(kind, value){
if (value !== undefined) {
this.values[kind] = value;
this.triggerEvent(kind+"update");
return this;
}
return this.values[kind];
},
// Attributes/Options
preload: function(value){
if (value !== undefined) {
this.apiCall("setPreload", value);
this.options.preload = value;
return this;
}
return this.apiCall("preload", value);
},
autoplay: function(value){
if (value !== undefined) {
this.apiCall("setAutoplay", value);
this.options.autoplay = value;
return this;
}
return this.apiCall("autoplay", value);
},
loop: function(value){
if (value !== undefined) {
this.apiCall("setLoop", value);
this.options.loop = value;
return this;
}
return this.apiCall("loop", value);
},
controls: function(){ return this.options.controls; },
textTracks: function(){ return this.options.tracks; },
poster: function(){ return this.apiCall("poster"); },
error: function(){ return this.apiCall("error"); },
networkState: function(){ return this.apiCall("networkState"); },
readyState: function(){ return this.apiCall("readyState"); },
seeking: function(){ return this.apiCall("seeking"); },
initialTime: function(){ return this.apiCall("initialTime"); },
startOffsetTime: function(){ return this.apiCall("startOffsetTime"); },
played: function(){ return this.apiCall("played"); },
seekable: function(){ return this.apiCall("seekable"); },
ended: function(){ return this.apiCall("ended"); },
videoTracks: function(){ return this.apiCall("videoTracks"); },
audioTracks: function(){ return this.apiCall("audioTracks"); },
videoWidth: function(){ return this.apiCall("videoWidth"); },
videoHeight: function(){ return this.apiCall("videoHeight"); },
defaultPlaybackRate: function(){ return this.apiCall("defaultPlaybackRate"); },
playbackRate: function(){ return this.apiCall("playbackRate"); },
// mediaGroup: function(){ return this.apiCall("mediaGroup"); },
// controller: function(){ return this.apiCall("controller"); },
controls: function(){ return this.apiCall("controls"); },
defaultMuted: function(){ return this.apiCall("defaultMuted"); }
});

382
src/tech.js Normal file
View File

@ -0,0 +1,382 @@
/* Playback Technology - Base class for playback technologies
================================================================================ */
_V_.PlaybackTech = _V_.Component.extend({
init: function(player, options){
// this._super(player, options);
// Make playback element clickable
// _V_.addEvent(this.el, "click", _V_.proxy(this, _V_.PlayToggle.prototype.onClick));
// player.triggerEvent("techready");
},
createElement: function(){},
setupTriggers: function(){},
removeTriggers: function(){}
});
// Create placeholder methods for each that warn when a method
// isn't supported by the current playback technology
_V_.apiMethods = "play,pause,paused,currentTime,setCurrentTime,duration,buffered,volume,setVolume,muted,setMuted,width,height,supportsFullScreen,enterFullScreen,src,load,currentSrc,preload,setPreload,autoplay,setAutoplay,loop,setLoop,error,networkState,readyState,seeking,initialTime,startOffsetTime,played,seekable,ended,videoTracks,audioTracks,videoWidth,videoHeight,textTracks,defaultPlaybackRate,playbackRate,mediaGroup,controller,controls,defaultMuted".split(",");
_V_.each(_V_.apiMethods, function(methodName){
_V_.PlaybackTech.prototype[methodName] = function(){
throw new Error("The '"+method+"' method is not available on the playback technology's API");
}
});
/* HTML5 Playback Technology - Wrapper for HTML5 Media API
================================================================================ */
_V_.HTML5 = _V_.PlaybackTech.extend({
name: "HTML5",
init: function(player, options){
this.player = player;
this.el = this.createElement();
var source = options.source;
if (this.el.currentSrc != source.src) {
this.el.src = source.src;
} else {
player.triggerEvent("loadstart");
}
// Moving video inside box breaks autoplay on Safari. This forces it to play.
// Currently triggering play in other browsers as well.
player.addEvent("techready", function(){
if (this.options.autoplay && this.paused()) {
this.play();
}
this.removeEvent("techready", arguments.callee);
});
// Trigger tech ready on player.
// TODO: Switch to component ready when available.
setTimeout(_V_.proxy(this, function(){
this.player.triggerEvent("techready");
}), 0);
},
createElement: function(){
var el = this.player.tag, // Reuse original tag for HTML5 playback technology element
html5 = _V_.HTML5,
playerOptions = this.player.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 newEl = _V_.createElement("video", {
id: el.id,
className: el.className
});
player.el.removeChild(el);
el = newEl;
player.el.appendChild(el);
}
// Update tag settings, in case they were overridden
_V_.each(["autoplay","preload","loop","muted","poster"], function(attr){
el[attr] = playerOptions[attr];
}, this);
return el;
},
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_.HTML5.events,
i;
for (i = 0;i<types.length; i++) {
_V_.addEvent(this.el, types[i], _V_.proxy(this.player, function(e){
e.stopPropagation();
this.triggerEvent(e);
}));
}
},
removeTriggers: function(){},
play: function(){ this.el.play(); },
pause: function(){ this.el.pause(); },
paused: function(){ return this.el.paused; },
currentTime: function(){ return this.el.currentTime; },
setCurrentTime: function(seconds){
try { this.el.currentTime = seconds; }
catch(e) {
_V_.log(e);
// this.warning(VideoJS.warnings.videoNotReady);
}
},
duration: function(){ return this.el.duration || 0; },
buffered: function(){ return this.el.buffered; },
volume: function(){ return this.el.volume; },
setVolume: function(percentAsDecimal){ this.el.volume = percentAsDecimal; },
muted: function(){ return this.el.muted; },
setMuted: function(muted){ this.el.muted = muted },
width: function(){ return this.el.offsetWidth; },
height: function(){ return this.el.offsetHeight; },
supportsFullScreen: function(){
if(typeof this.el.webkitEnterFullScreen == 'function') {
// Seems to be broken in Chromium/Chrome && Safari in Leopard
if (!navigator.userAgent.match("Chrome") && !navigator.userAgent.match("Mac OS X 10.5")) {
return true;
}
}
return false;
},
enterFullScreen: function(){
try {
this.el.webkitEnterFullScreen();
} catch (e) {
if (e.code == 11) {
// this.warning(VideoJS.warnings.videoNotReady);
_V_.log("VideoJS: Video not ready.")
}
}
},
src: function(src){ this.el.src = src; },
load: function(){ this.el.load(); },
currentSrc: function(){ return this.el.currentSrc; },
preload: function(){ return this.el.preload; },
setPreload: function(val){ this.el.preload = val; },
autoplay: function(){ return this.el.autoplay; },
setAutoplay: function(val){ this.el.autoplay = val; },
loop: function(){ return this.el.loop; },
setLoop: function(val){ this.el.loop = val; },
error: function(){ return this.el.error; },
networkState: function(){ return this.el.networkState; },
readyState: function(){ return this.el.readyState; },
seeking: function(){ return this.el.seeking; },
initialTime: function(){ return this.el.initialTime; },
startOffsetTime: function(){ return this.el.startOffsetTime; },
played: function(){ return this.el.played; },
seekable: function(){ return this.el.seekable; },
ended: function(){ return this.el.ended; },
videoTracks: function(){ return this.el.videoTracks; },
audioTracks: function(){ return this.el.audioTracks; },
videoWidth: function(){ return this.el.videoWidth; },
videoHeight: function(){ return this.el.videoHeight; },
textTracks: function(){ return this.el.textTracks; },
defaultPlaybackRate: function(){ return this.el.defaultPlaybackRate; },
playbackRate: function(){ return this.el.playbackRate; },
mediaGroup: function(){ return this.el.mediaGroup; },
controller: function(){ return this.el.controller; },
controls: function(){ return this.player.options.controls; },
defaultMuted: function(){ return this.el.defaultMuted; }
});
/* HTML5 Support Testing -------------------------------------------------------- */
_V_.HTML5.isSupported = function(){
return !!document.createElement("video").canPlayType;
};
_V_.HTML5.canPlaySource = function(srcObj){
return !!document.createElement("video").canPlayType(srcObj.type); // Switch to global check
// TODO: Check Type
// If no Type, check ext
// Check Media Type
};
_V_.HTML5.supports = {};
// List of all HTML5 events (various uses).
_V_.HTML5.events = "loadstart,suspend,abort,error,emptied,stalled,loadedmetadata,loadeddata,canplay,canplaythrough,playing,waiting,seeking,seeked,ended,durationchange,timeupdate,progress,play,pause,ratechange,volumechange".split(",");
/* HTML5 Device Fixes ---------------------------------------------------------- */
// iOS
if (_V_.isIOS()) {
// If you move a video element in the DOM, it breaks video playback.
_V_.HTML5.supports.movingElementInDOM = false;
}
// Android
if (_V_.isAndroid()) {
// Override Android 2.2 and less canPlayType method which is broken
if (_V_.androidVersion() < 3) {
document.createElement("video").constructor.prototype.canPlayType = function(type){
return (type && type.toLowerCase().indexOf("video/mp4") != -1) ? "maybe" : "";
};
}
}
/* H5SWF - Custom Flash Player with HTML5-ish API
================================================================================ */
_V_.H5swf = _V_.PlaybackTech.extend({
name: "H5swf",
// swf: "flash/video-js.swf",
swf: "https://s3.amazonaws.com/video-js/3.0b/video-js.swf",
// swf: "http://video-js.zencoder.com/3.0b/video-js.swf",
init: function(player, options){
this.player = player;
// this.el = this.createElement();
var source = options.source,
placeHolder = _V_.createElement("div", { id: player.el.id + "_temp_h5swf" }),
objId = player.el.id+"_h5swf_api",
flashvars = {
readyFunction: "_V_.H5swf.onSWFReady",
eventProxyFunction: "_V_.H5swf.onSWFEvent",
errorEventProxyFunction: "_V_.H5swf.onSWFErrorEvent",
src: source.src,
autoplay: player.options.autoplay,
preload: player.options.preload,
loop: player.options.loop,
muted: player.options.muted,
poster: player.options.poster,
},
params = {
allowScriptAccess: "always",
wmode: "opaque",
bgcolor: "#000000"
},
attributes = {
id: objId,
name: objId,
'class': 'vjs-tech'
};
player.el.appendChild(placeHolder);
swfobject.embedSWF(options.swf || this.swf, placeHolder.id, "480", "270", "9.0.124", "", flashvars, params, attributes);
},
setupTriggers: function(){
// Using global onSWFEvent func to distribute events
},
play: function(){ this.el.vjs_play(); },
pause: function(){ this.el.vjs_pause(); },
src: function(src){ this.el.vjs_src(src); },
load: function(){ this.el.vjs_load(); },
poster: function(){ this.el.vjs_getProperty("poster"); },
buffered: function(){
return _V_.createTimeRange(0, this.el.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 = _V_.H5swf.prototype,
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.el.vjs_setProperty(attr, val); };
},
createGetter = function(attr){
api[attr] = function(){ return this.el.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);
});
})();
/* Flash Support Testing -------------------------------------------------------- */
_V_.H5swf.isSupported = function(){
return swfobject.hasFlashPlayerVersion("9");
};
_V_.H5swf.canPlaySource = function(srcObj){
if (srcObj.type in _V_.H5swf.supports.format) { return "maybe"; }
};
_V_.H5swf.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
}
};
_V_.H5swf.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),
// Get player from box
player = el.parentNode.player;
el.player = player;
// Update reference to playback technology element
player.techs["H5swf"].el = el;
player.ready(function(){
// this.src("http://video-js.zencoder.com/oceans-clip.mp4");
});
player.triggerEvent("techready");
},0);
} catch(err) {
_V_.log(err);
}
};
_V_.H5swf.onSWFEvent = function(swfID, eventName, other){
try {
var player = _V_.el(swfID).player;
if (player) {
player.triggerEvent(eventName);
}
} catch(err) {
_V_.log(err);
}
};
_V_.H5swf.onSWFErrorEvent = function(swfID, eventName){
_V_.log("Flash (H5SWF) Error", eventName);
};

3
dev/src/tracks.js → src/tracks.js
View File

@ -14,7 +14,8 @@ _V_.Track = function(attributes, player){
this.lastCueIndex = 0;
// Update current cue on timeupdate
player.addEvent("timeupdate", _V_.proxy(this, this.update))
player.addEvent("timeupdate", _V_.proxy(this, this.update));
// Reset cue time on media end
player.addEvent("ended", _V_.proxy(this, function() { this.lastCueIndex = 0; }));

2
dev/src/tech/flowplayer.js → tech/flowplayer.js
View File

@ -1,5 +1,7 @@
// Flowplayer API Connector
VideoJS.tech.flowplayer = {
name: "Flowplayer",
supported: function(){
if (flowplayer) {
return true;

0
dev/src/tech/youtube.html → tech/youtube.html
View File

2
dev/src/tech/youtube.js → tech/youtube.js
View File

@ -1,5 +1,7 @@
// Flowplayer API Connector
VideoJS.tech.youtube = {
name: "YouTube",
supported: function(){
// Flash Player 8 or higher
return true;

0
dev/test/qunit/.gitignore → test/qunit/.gitignore vendored
View File

0
dev/test/qunit/README.md → test/qunit/README.md
View File

0
dev/test/qunit/addons/canvas/README.md → test/qunit/addons/canvas/README.md
View File

0
dev/test/qunit/addons/canvas/canvas-test.js → test/qunit/addons/canvas/canvas-test.js
View File

0
dev/test/qunit/addons/canvas/canvas.html → test/qunit/addons/canvas/canvas.html
View File

0
dev/test/qunit/addons/canvas/qunit-canvas.js → test/qunit/addons/canvas/qunit-canvas.js
View File

0
dev/test/qunit/addons/close-enough/README.md → test/qunit/addons/close-enough/README.md
View File

0
dev/test/qunit/addons/close-enough/close-enough-test.js → test/qunit/addons/close-enough/close-enough-test.js
View File

0
dev/test/qunit/addons/close-enough/close-enough.html → test/qunit/addons/close-enough/close-enough.html
View File

0
dev/test/qunit/addons/close-enough/qunit-close-enough.js → test/qunit/addons/close-enough/qunit-close-enough.js
View File

0
dev/test/qunit/addons/composite/README.md → test/qunit/addons/composite/README.md
View File

0
dev/test/qunit/addons/composite/composite-demo-test.html → test/qunit/addons/composite/composite-demo-test.html
View File

0
dev/test/qunit/addons/composite/composite-test.html → test/qunit/addons/composite/composite-test.html
View File

0
dev/test/qunit/addons/composite/composite-test.js → test/qunit/addons/composite/composite-test.js
View File

0
dev/test/qunit/addons/composite/dummy-qunit-test.html → test/qunit/addons/composite/dummy-qunit-test.html
View File

0
dev/test/qunit/addons/composite/dummy-same-test.html → test/qunit/addons/composite/dummy-same-test.html
View File

0
dev/test/qunit/addons/composite/index.html → test/qunit/addons/composite/index.html
View File

0
dev/test/qunit/addons/composite/qunit-composite.css → test/qunit/addons/composite/qunit-composite.css
View File

0
dev/test/qunit/addons/composite/qunit-composite.js → test/qunit/addons/composite/qunit-composite.js
View File

0
dev/test/qunit/addons/step/README.md → test/qunit/addons/step/README.md
View File

0
dev/test/qunit/addons/step/qunit-step.js → test/qunit/addons/step/qunit-step.js
View File

0
dev/test/qunit/addons/step/step-test.js → test/qunit/addons/step/step-test.js
View File

0
dev/test/qunit/addons/step/step.html → test/qunit/addons/step/step.html
View File

0
dev/test/qunit/package.json → test/qunit/package.json
View File

0
dev/test/qunit/qunit/qunit.css → test/qunit/qunit/qunit.css
View File

0
dev/test/qunit/qunit/qunit.js → test/qunit/qunit/qunit.js
View File

0
dev/test/qunit/test/headless.html → test/qunit/test/headless.html
View File

0
dev/test/qunit/test/index.html → test/qunit/test/index.html
View File

0
dev/test/qunit/test/logs.html → test/qunit/test/logs.html
View File

0
dev/test/qunit/test/logs.js → test/qunit/test/logs.js
View File

0
dev/test/qunit/test/same.js → test/qunit/test/same.js
View File

0
dev/test/qunit/test/test.js → test/qunit/test/test.js
View File

0
dev/test/test.html → test/test.html
View File

0
dev/test/test.js → test/test.js
View File

307
video-js.css
View File

@ -1,307 +0,0 @@
/*
VideoJS Default Styles (http://videojs.com)
Version 3.0
REQUIRED STYLES (be careful overriding)
================================================================================ */
/* When loading the player, the video tag is replaced with a DIV,
that will hold the video tag or object tag for other playback methods.
The div contains the video playback element (Flash or HTML5) and controls, and sets the width and height of the video.
** If you want to add some kind of border/padding (e.g. a frame), or special positioning, use another containing element.
Otherwise you risk messing up control positioning and full window mode. **
*/
.video-js {
background-color: #000; position: relative; padding: 0;
/* Start with 10px for base font size so other dimensions can be em based and easily calculable. */
font-size: 10px;
}
/* Playback technology elements expand to the width/height of the containing div. <video> or <object> */
.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;
}

BIN
video-js.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.3 KiB

BIN
video-js.swf
View File

Binary file not shown.

3284
video.js
View File

File diff suppressed because one or more lines are too long