web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-03-17 21:18:27 +02:00
Code Releases Activity

Merge branch 'master' into stable

Browse Source
This commit is contained in:
Steve Heffernan 2013-05-20 13:27:47 -07:00
commit 8c31278c2f
131 changed files with 13982 additions and 10691 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
.bunyipconfig.js.example Normal file
View File

@ -0,0 +1,21 @@
/*
Bunyip is a tool for multi-browser/device testing
https://github.com/ryanseddon/bunyip
It uses a few service under the hood including:
Browsertack - http://browserstack.com
Pagekite https://pagekite.net
You'll need accounts at both to use bunyip
You'll also need to download and install pagekite.py
*/
var config = {
"browserstack": {
"username": "your-browserstack-email@example.com",
"password": "your browserstack password",
"timeout": 300
},
"port": 9000,
"tunnellink": "your-subdomain.pagekite.me",
"tunnel": "pagekite.py <port> your-subdomain.pagekite.me"
};
module.exports = config;

11
.editorconfig Normal file
View File

@ -0,0 +1,11 @@
# editorconfig.org - unify code style
# plugins for text editors: editorconfig.org/#download
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

17
.gitignore vendored
View File

@ -1,5 +1,20 @@
.DS_Store
dist/*
build/files/*
dev.html
projects
.zenflow-log
.zenflow-log
test/*.map
.bunyipconfig.js
.s3config.json
node_modules
npm-debug.log
sandbox/*
!sandbox/*.example
*.swp
*.swo
*.orig

40
.jshintrc Normal file
View File

@ -0,0 +1,40 @@
{
"evil" : true,
"validthis": true,
"browser" : true,
"debug" : true,
"boss" : true,
"expr" : true,
"eqnull" : true,
"quotmark" : "single",
"sub" : true,
"trailing" : true,
"undef" : true,
"laxbreak" : true,
"predef" : [
"_V_",
"videojs",
"vjs",
"goog",
"console",
"require",
"PlayerTest",
"asyncTest",
"deepEqual",
"equal",
"expect",
"module",
"notDeepEqual",
"notEqual",
"notStrictEqual",
"ok",
"QUnit",
"raises",
"start",
"stop",
"strictEqual",
"test"
]
}

3
.travis.yml Normal file
View File

@ -0,0 +1,3 @@
language: node_js
node_js:
- 0.8

12
CHANGELOG.md
View File

@ -1,3 +1,15 @@
* Added a plugins interface
* Added automated test suite and support for Travis CI.
* Updated docs to use Github markdown
* Allow disabling of default components
* Duration is now setable (need ed for HLS m3u8 files)
* Event binders (on/off/one) now return the player instance
* Stopped player from going back to beginningg on ended event.
* Added support for percent width/height and fluid layouts
* Improved load order of elements to reduce reflow.
* Changed addEvent function name to 'on'.
* Removed conflicting array.indexOf function
* Added exitFullScreen to support BlackBerry devices (pull/143)
--------------------------------------------------------------------------------
^ ADD NEW CHANGES ABOVE ^
--------------------------------------------------------------------------------

50
CHANGELOG2.md Normal file
View File

@ -0,0 +1,50 @@
```
^ NEW CHANGES ABOVE ^
```
CHANGELOG
=========
#### 3.2.3 (2013-05-03)
* test line
* Added a plugins interface
* Added automated test suite and support for Travis CI.
* Updated docs to use Github markdown
* Allow disabling of default components
* Duration is now setable (need ed for HLS m3u8 files)
* Event binders (on/off/one) now return the player instance
* Stopped player from going back to beginningg on ended event.
* Added support for percent width/height and fluid layouts
* Improved load order of elements to reduce reflow.
* Changed addEvent function name to 'on'.
* Removed conflicting array.indexOf function
* Added exitFullScreen to support BlackBerry devices (pull/143)
## 5.0.0 (2013-02-02)
* Added a plugins interface ([261f2072](https://github.com/angular-ui/bootstrap/commit/261f2072))
* Added automated test suite and support for Travis CI.
* Updated docs to use Github markdown
* Allow disabling of default components
#### 4.1.2 (2013-02-02)
* Added a plugins interface ([261f2072](https://github.com/angular-ui/bootstrap/commit/261f2072))
### 4.1.0 (2013-02-02)
* Added a plugins interface ([261f2072](https://github.com/angular-ui/bootstrap/commit/261f2072))
* Added automated test suite and support for Travis CI.
* Updated docs to use Github markdown
* Allow disabling of default components
#### 4.0.2 (2013-02-02)
* Added a plugins interface ([261f2072](https://github.com/angular-ui/bootstrap/commit/261f2072))
#### 4.0.1 (2013-02-02)
* Added a plugins interface ([261f2072](https://github.com/angular-ui/bootstrap/commit/261f2072))
## 4.0.0 (2013-02-02)
* Added a plugins interface ([261f2072](https://github.com/angular-ui/bootstrap/commit/261f2072))
* Added automated test suite and support for Travis CI.
* Updated docs to use Github markdown
* Allow disabling of default components

176
CONTRIBUTING.md Normal file
View File

@ -0,0 +1,176 @@
So you're telling me you want to spend some of your precious time giving back to this humble project? You're crazy. But since you're here...there are some ways you can help make Video.js a faster, easier, more compatible, and more fully-featured video player.
* Bug reports and fixes
* Features and changes (pull requests)
* [Answer questions](http://stackoverflow.com/questions/tagged/video.js) on Stack Overflow
* Other Video.js projects
Don't miss the [code style guide](#code-style).
# Getting started
1. [Download and install Node.js](http://nodejs.org/download/). Video.js uses Node for build and test automation.
There is a known issue between Node.js version 0.10.x and phantomjs. This will manifest itself during the node module installation (see step 4 below). For the time being, please install Node.js version 0.8.22 or earlier. You can find earlier versions of Node.js [here](http://nodejs.org/dist/).
2. [Fork](http://help.github.com/fork-a-repo/) and clone the video.js git repository.
```bash
# Clones your fork of the repo into the current directory in terminal
git clone https://github.com/<your-username>/video-js.git
# Navigate to the newly cloned directory
cd video-js
# Assigns the original repo to a remote called "upstream"
git remote add upstream https://github.com/zencoder/video-js.git
```
In the future, if you want to pull in updates to video.js that happened after you cloned the main repo, you can run:
```bash
git checkout master
git pull upstream master
```
3. Install the grunt-cli package so that you will have the correct version of grunt available from any project that needs it. This should be done as a global install:
```bash
npm install -g grunt-cli
```
4. Install required node.js modules using node package manager.
```bash
npm install
```
5. Build a local copy. Video.js uses [grunt](http://gruntjs.com), a node-based task automation tool for building and tesing. The following will compile a local copy in the dist/ directory and run tests. It will also create a sourcelist.js file that can be used to load the video.js source scripts in a page.
```bash
grunt
```
6. When you're ready to add a feature, make a change, or fix a bug, first create a new branch for it. Prefix the branch with the correspoding [issue number](https://github.com/zencoder/video-js/issues). If there isn't one, submit a new issue. Anything more complicated than simple docs changes should have an issue.
```bash
git checkout -b <####-branch-name>
```
Be sure to reference your issue in any commit message. Github allows you to do this though the [fixes or closes](https://github.com/blog/831-issues-2-0-the-next-generation) keywords.
```bash
My commit message. fixes #123
```
# Bugs
A bug is a _demonstrable problem_ that is caused by the code in the
repository. Good bug reports are extremely helpful - thank you!
Guidelines for bug reports:
1. **Use the [GitHub issue search](https://github.com/zencoder/video-js/issues)** &mdash; check if the issue has already been reported.
2. **Check if the issue has been fixed** &mdash; try to reproduce it using the latest `master` branch in the repository.
3. **Isolate the problem** &mdash; ideally create a [reduced test
case](http://css-tricks.com/6263-reduced-test-cases/) and a live example.
A good bug report shouldn't leave others needing to chase you up for more information. Please try to be as detailed as possible in your report. What is your environment? What steps will reproduce the issue? What browser(s), OS, and devices experience the problem? What would you expect to be the outcome? All these
details will help people to fix any potential bugs.
Example:
> Short and descriptive example bug report title
>
> A summary of the issue and the browser/OS environment in which it occurs. If
> suitable, include the steps required to reproduce the bug.
>
> 1. This is the first step
> 2. This is the second step
> 3. Further steps, etc.
>
> `<url>` (a link to the reduced test case)
>
> Any other information you want to share that is relevant to the issue being
> reported. This might include the lines of code that you have identified as
> causing the bug, and potential solutions (and your opinions on their
> merits).
**[File a bug report](https://github.com/h5bp/html5-boilerplate/issues/)**
### NOTE: Testing Flash Locally in Chrome
Chrome 21+ (as of 2013/01/01) doens't run Flash files that are local and loaded into a locally accessed page (file:///). To get around this you need to [disable the version of Flash](http://helpx.adobe.com/flash-player/kb/flash-player-google-chrome.html#How_can_I_run_debugger_or_alternate_versions_of_Flash_Player_in_Google_Chrome) included with Chrome and enable a system-wide version of Flash.
## Pull requests
Good pull requests - patches, improvements, new features - are a fantastic help. They should remain focused in scope and avoid containing unrelated commits. If your contribution involves a significant amount of work or substantial changes to any part of the project, please open an issue to discuss it first.
Make sure to adhere to the coding conventions used throughout a project (indentation, accurate comments, etc.). Please update any documentation that is relevant to the change you're making.
Please follow this process; it's the best way to get your work included in the project:
1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork, and configure the remotes:
```bash
# Clones your fork of the repo into the current directory in terminal
git clone https://github.com/<your-username>/html5-boilerplate.git
# Navigate to the newly cloned directory
cd html5-boilerplate
# Assigns the original repo to a remote called "upstream"
git remote add upstream https://github.com/h5bp/html5-boilerplate.git
```
2. If you cloned a while ago, get the latest changes from upstream:
```bash
git checkout master
git pull upstream master
```
3. Create a new topic branch to contain your feature, change, or fix:
```bash
git checkout -b <topic-branch-name>
```
4. Commit your changes in logical chunks. Please adhere to these [git commit message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html) or your pull request is unlikely be merged into the main project. Use git's [interactive rebase](https://help.github.com/articles/interactive-rebase) feature to tidy up your commits before making them public.
5. Locally merge (or rebase) the upstream development branch into your topic branch:
```bash
git pull [--rebase] upstream master
```
6. Push your topic branch up to your fork:
```bash
git push origin <topic-branch-name>
```
10. [Open a Pull Request](http://help.github.com/send-pull-requests/) with a clear title and description.
# Code Style
Please follow [Google's JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml) to the letter. If your editor supports [.editorconfig](http://editorconfig.org/#download) it will make it easier to manage differences from your own coding style.
### Style examples include:
* Two space indents.
* Delimit strings with single-quotes `'`, not double-quotes `"`.
* No trailing whitespace, except in markdown files where a linebreak must be forced.
* No more than [one assignment](http://benalman.com/news/2012/05/multiple-var-statements-javascript/) per `var` statement.
* Prefer `if` and `else` to ["clever"](http://programmers.stackexchange.com/a/25281) uses of `? :` conditional or `||`, `&&` logical operators.
* **When in doubt, follow the conventions you see used in the source already.**
If you happen to find something in the codebase that does not follow the style guide, that's a good opportunity to make your first contribution!
# Other Video.js Pojects
* [Video.js SWF](https://github.com/zencoder/video-js-swf) - The light-weight flash video player that makes flash work like HTML5 video. This allows player skins, plugins, and other features to work with both HTML5 and Flash.
* [Videojs.com](http://videojs.com) - The public site with helpful tools and information about Video.js.
---
### Doc Credit
This doc was inspired by some great contribution guide examples including [contribute.md template](https://github.com/contribute-md/contribute-md-template),
[grunt](https://github.com/gruntjs/grunt/wiki/Contributing),
[html5 boilerplate](https://github.com/h5bp/html5-boilerplate/blob/master/CONTRIBUTING.md),
[jquery](https://github.com/jquery/jquery/blob/master/CONTRIBUTING.md),
and [node.js](https://github.com/joyent/node/wiki/Contributing).

256
Gruntfile.js Normal file
View File

@ -0,0 +1,256 @@
module.exports = function(grunt) {
var pkg, s3, semver, version, verParts;
semver = require('semver');
pkg = grunt.file.readJSON('package.json');
try {
s3 = grunt.file.readJSON('.s3config.json');
} catch(e) {
s3 = {};
}
verParts = pkg.version.split('.');
version = {
full: pkg.version,
major: verParts[0],
minor: verParts[1],
patch: verParts[2]
};
version.majorMinor = version.major + '.' + version.minor;
// Project configuration.
grunt.initConfig({
pkg: pkg,
build: {
src: 'src/js/dependencies.js',
options: {
baseDir: 'src/js/'
}
},
clean: {
build: ['build/files/*'],
dist: ['dist/*']
},
jshint: {
src: {
src: ['src/js/*.js', 'Gruntfile.js', 'test/unit/*.js'],
options: {
jshintrc: '.jshintrc'
}
}
},
minify: {
source:{
src: ['build/files/combined.video.js', 'build/compiler/goog.base.js', 'src/js/exports.js'],
externs: ['src/js/media/flash.externs.js'],
dest: 'build/files/minified.video.js'
},
tests: {
src: ['build/files/combined.video.js', 'build/compiler/goog.base.js', 'src/js/exports.js', 'test/unit/*.js', '!test/unit/api.js'],
externs: ['src/js/media/flash.externs.js', 'test/qunit/qunit-externs.js'],
dest: 'build/files/test.minified.video.js'
}
},
dist: {},
qunit: {
source: ['test/index.html'],
minified: ['test/minified.html'],
minified_api: ['test/minified-api.html']
},
watch: {
files: [ 'src/**/*.js', 'test/unit/*.js' ],
tasks: 'dev'
},
copy: {
minor: {
files: [
{expand: true, cwd: 'build/files/', src: ['*'], dest: 'dist/'+version.majorMinor+'/', filter: 'isFile'} // includes files in path
]
},
patch: {
files: [
{expand: true, cwd: 'build/files/', src: ['*'], dest: 'dist/'+version.full+'/', filter: 'isFile'} // includes files in path
]
}
},
s3: {
options: s3,
prod: {
// Files to be uploaded.
upload: [
{
src: 'dist/cdn/*',
dest: 'vjs/'+version.full+'/',
rel: 'dist/cdn/',
headers: {
'Cache-Control': 'public, max-age=31536000'
}
},
{
src: 'dist/cdn/*',
dest: 'vjs/'+version.majorMinor+'/',
rel: 'dist/cdn/',
headers: {
'Cache-Control': 'public, max-age=2628000'
}
}
]
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-s3');
grunt.loadNpmTasks('contribflow');
// Default task.
grunt.registerTask('default', ['jshint', 'build', 'minify', 'dist']);
// Development watch task
grunt.registerTask('dev', ['jshint', 'build', 'qunit:source']);
grunt.registerTask('test', ['jshint', 'build', 'minify', 'qunit']);
var fs = require('fs'),
gzip = require('zlib').gzip;
grunt.registerMultiTask('build', 'Building Source', function(){
/*jshint undef:false, evil:true */
// Loading predefined source order from source-loader.js
// Trust me, this is the easist way to do it so far.
var blockSourceLoading = true;
var sourceFiles; // Needed to satisfy jshint
eval(grunt.file.read('./build/source-loader.js'));
// Fix windows file path delimiter issue
var i = sourceFiles.length;
while (i--) {
sourceFiles[i] = sourceFiles[i].replace(/\\/g, '/');
}
// grunt.file.write('build/files/sourcelist.txt', sourceList.join(','));
// Allow time for people to update their index.html before they remove these
// grunt.file.write('build/files/sourcelist.js', 'var sourcelist = ["' + sourceFiles.join('","') + '"]');
// Create a combined sources file. https://github.com/zencoder/video-js/issues/287
var combined = '';
sourceFiles.forEach(function(result){
combined += grunt.file.read(result);
});
grunt.file.write('build/files/combined.video.js', combined);
grunt.file.copy('src/css/video-js.css', 'build/files/video-js.css');
grunt.file.copy('src/css/video-js.png', 'build/files/video-js.png');
grunt.file.copy('src/swf/video-js.swf', 'build/files/video-js.swf');
// grunt.file.copy('src/css/font/', 'build/files/font/');
grunt.file.recurse('src/css/font', function(absdir, rootdir, subdir, filename) {
// Block .DS_Store files
if ('filename'.substring(0,1) !== '.') {
grunt.file.copy(absdir, 'build/files/font/' + filename);
}
});
});
grunt.registerMultiTask('minify', 'Minify JS files using Closure Compiler.', function() {
var done = this.async();
var exec = require('child_process').exec;
var externs = this.data.externs || [];
var dest = this.data.dest;
var filePatterns = [];
// Make sure deeper directories exist for compiler
grunt.file.write(dest, '');
if (this.data.sourcelist) {
filePatterns = filePatterns.concat(grunt.file.read(this.data.sourcelist).split(','));
}
if (this.data.src) {
filePatterns = filePatterns.concat(this.data.src);
}
var command = 'java -jar build/compiler/compiler.jar'
+ ' --compilation_level ADVANCED_OPTIMIZATIONS'
// + ' --formatting=pretty_print'
+ ' --js_output_file=' + dest
+ ' --create_source_map ' + dest + '.map --source_map_format=V3'
+ ' --jscomp_warning=checkTypes --warning_level=VERBOSE'
+ ' --output_wrapper "/*! ' + pkg.copyright + ' */\n (function() {%output%})();//@ sourceMappingURL=video.js.map"';
grunt.file.expand(filePatterns).forEach(function(file){
command += ' --js='+file;
});
externs.forEach(function(extern){
command += ' --externs='+extern;
});
// grunt.log.writeln(command)
exec(command, { maxBuffer: 500*1024 }, function(err, stdout, stderr){
if (err) {
grunt.warn(err);
done(false);
}
if (stdout) {
grunt.log.writeln(stdout);
}
done();
});
});
grunt.registerTask('dist', 'Creating distribution', function(){
var exec = require('child_process').exec;
var done = this.async();
grunt.file.copy('build/files/minified.video.js', 'dist/video-js/video.js');
grunt.file.copy('build/files/combined.video.js', 'dist/video-js/video.dev.js');
grunt.file.copy('build/files/video-js.css', 'dist/video-js/video-js.css');
grunt.file.copy('build/files/video-js.swf', 'dist/video-js/video-js.swf');
grunt.file.copy('build/demo-files/demo.html', 'dist/video-js/demo.html');
grunt.file.copy('build/demo-files/demo.captions.vtt', 'dist/video-js/demo.captions.vtt');
grunt.file.recurse('build/files/font', function(absdir, rootdir, subdir, filename) {
// Block .DS_Store files
if ('filename'.substring(0,1) !== '.') {
grunt.file.copy(absdir, 'dist/video-js/font/' + filename);
}
});
// CDN version uses already hosted font files
// Minified version only
// doesn't need demo files
grunt.file.copy('build/files/minified.video.js', 'dist/cdn/video.js');
grunt.file.copy('build/files/video-js.css', 'dist/cdn/video-js.css');
grunt.file.copy('build/files/video-js.swf', 'dist/cdn/video-js.swf');
var css = grunt.file.read('dist/cdn/video-js.css');
css = css.replace(/font\//g, '../f/1/');
grunt.file.write('dist/cdn/video-js.css', css);
exec('cd dist && zip -r video-js-'+version.full+'.zip video-js && cd ..', { maxBuffer: 500*1024 }, function(err, stdout, stderr){
if (err) {
grunt.warn(err);
done(false);
}
if (stdout) {
grunt.log.writeln(stdout);
}
done();
});
});
};

165
LGPLv3-LICENSE.txt
View File

@ -1,165 +0,0 @@
GNU LESSER GENERAL PUBLIC LICENSE
Version 3, 29 June 2007
Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
Everyone is permitted to copy and distribute verbatim copies
of this license document, but changing it is not allowed.
This version of the GNU Lesser General Public License incorporates
the terms and conditions of version 3 of the GNU General Public
License, supplemented by the additional permissions listed below.
0. Additional Definitions.
As used herein, "this License" refers to version 3 of the GNU Lesser
General Public License, and the "GNU GPL" refers to version 3 of the GNU
General Public License.
"The Library" refers to a covered work governed by this License,
other than an Application or a Combined Work as defined below.
An "Application" is any work that makes use of an interface provided
by the Library, but which is not otherwise based on the Library.
Defining a subclass of a class defined by the Library is deemed a mode
of using an interface provided by the Library.
A "Combined Work" is a work produced by combining or linking an
Application with the Library. The particular version of the Library
with which the Combined Work was made is also called the "Linked
Version".
The "Minimal Corresponding Source" for a Combined Work means the
Corresponding Source for the Combined Work, excluding any source code
for portions of the Combined Work that, considered in isolation, are
based on the Application, and not on the Linked Version.
The "Corresponding Application Code" for a Combined Work means the
object code and/or source code for the Application, including any data
and utility programs needed for reproducing the Combined Work from the
Application, but excluding the System Libraries of the Combined Work.
1. Exception to Section 3 of the GNU GPL.
You may convey a covered work under sections 3 and 4 of this License
without being bound by section 3 of the GNU GPL.
2. Conveying Modified Versions.
If you modify a copy of the Library, and, in your modifications, a
facility refers to a function or data to be supplied by an Application
that uses the facility (other than as an argument passed when the
facility is invoked), then you may convey a copy of the modified
version:
a) under this License, provided that you make a good faith effort to
ensure that, in the event an Application does not supply the
function or data, the facility still operates, and performs
whatever part of its purpose remains meaningful, or
b) under the GNU GPL, with none of the additional permissions of
this License applicable to that copy.
3. Object Code Incorporating Material from Library Header Files.
The object code form of an Application may incorporate material from
a header file that is part of the Library. You may convey such object
code under terms of your choice, provided that, if the incorporated
material is not limited to numerical parameters, data structure
layouts and accessors, or small macros, inline functions and templates
(ten or fewer lines in length), you do both of the following:
a) Give prominent notice with each copy of the object code that the
Library is used in it and that the Library and its use are
covered by this License.
b) Accompany the object code with a copy of the GNU GPL and this license
document.
4. Combined Works.
You may convey a Combined Work under terms of your choice that,
taken together, effectively do not restrict modification of the
portions of the Library contained in the Combined Work and reverse
engineering for debugging such modifications, if you also do each of
the following:
a) Give prominent notice with each copy of the Combined Work that
the Library is used in it and that the Library and its use are
covered by this License.
b) Accompany the Combined Work with a copy of the GNU GPL and this license
document.
c) For a Combined Work that displays copyright notices during
execution, include the copyright notice for the Library among
these notices, as well as a reference directing the user to the
copies of the GNU GPL and this license document.
d) Do one of the following:
0) Convey the Minimal Corresponding Source under the terms of this
License, and the Corresponding Application Code in a form
suitable for, and under terms that permit, the user to
recombine or relink the Application with a modified version of
the Linked Version to produce a modified Combined Work, in the
manner specified by section 6 of the GNU GPL for conveying
Corresponding Source.
1) Use a suitable shared library mechanism for linking with the
Library. A suitable mechanism is one that (a) uses at run time
a copy of the Library already present on the user's computer
system, and (b) will operate properly with a modified version
of the Library that is interface-compatible with the Linked
Version.
e) Provide Installation Information, but only if you would otherwise
be required to provide such information under section 6 of the
GNU GPL, and only to the extent that such information is
necessary to install and execute a modified version of the
Combined Work produced by recombining or relinking the
Application with a modified version of the Linked Version. (If
you use option 4d0, the Installation Information must accompany
the Minimal Corresponding Source and Corresponding Application
Code. If you use option 4d1, you must provide the Installation
Information in the manner specified by section 6 of the GNU GPL
for conveying Corresponding Source.)
5. Combined Libraries.
You may place library facilities that are a work based on the
Library side by side in a single library together with other library
facilities that are not Applications and are not covered by this
License, and convey such a combined library under terms of your
choice, if you do both of the following:
a) Accompany the combined library with a copy of the same work based
on the Library, uncombined with any other library facilities,
conveyed under the terms of this License.
b) Give prominent notice with the combined library that part of it
is a work based on the Library, and explaining where to find the
accompanying uncombined form of the same work.
6. Revised Versions of the GNU Lesser General Public License.
The Free Software Foundation may publish revised and/or new versions
of the GNU Lesser General Public License from time to time. Such new
versions will be similar in spirit to the present version, but may
differ in detail to address new problems or concerns.
Each version is given a distinguishing version number. If the
Library as you received it specifies that a certain numbered version
of the GNU Lesser General Public License "or any later version"
applies to it, you have the option of following the terms and
conditions either of that published version or of any later version
published by the Free Software Foundation. If the Library as you
received it does not specify a version number of the GNU Lesser
General Public License, you may choose any version of the GNU Lesser
General Public License ever published by the Free Software Foundation.
If the Library as you received it specifies that a proxy can decide
whether future versions of the GNU Lesser General Public License shall
apply, that proxy's public statement of acceptance of any version is
permanent authorization for you to choose that version for the
Library.

13
LICENSE Normal file
View File

@ -0,0 +1,13 @@
Copyright 2013 Brightcove, Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

62
README.md
View File

@ -1,30 +1,50 @@
VideoJS - [HTML5 Video Player](http://videojs.com)
==================================================
Version 3.0 BETA
# [Video.js - HTML5 and Flash Video Player](http://videojs.com) [![Build Status](https://travis-ci.org/zencoder/video-js.png?branch=master)](https://travis-ci.org/zencoder/video-js)
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.
### PLEASE EXCUSE OUR DUST
Contributing
------------
If you'd like to help out on VideoJS, you are awesome. Updates should be made to the source files and then make a pull request.
We're finishing up a big overhaul of the libary which includes
When working on VideoJS code, you can use dev.html as your test page. It doesn't exist in the repo and changes to it won't be tracked. To get your own copy simply clone the repo and copy dev.html.example.
cp dev.html.example dev.html
* Closure compiler advanced mode support for drastically better minification over previous versions
* Flashy new automated builds and test using node.js and grunt
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.
Check out our [contributing guide](https://github.com/zencoder/video-js/blob/master/CONTRIBUTING.md) for info on building a local version.
---
BETA NOTES
Version 3 is almost a complete rewrite of the previous versions of VideoJS. New features includes:
## About
- 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.
Video.js was built to provide a fast and easy way to embed and work with video in a web page.
It was built from the ground up with the assumption that HTML5 is the future of web video, however it supports Flash equally well for older browsers and for advanced features not yet supported in HTML5.
Some of the focuses of Video.js are:
- Universal browser and device support
- Fast player loading
- Easily skinned (themed/chromed) using just CSS
- A JavaScript API for controlling the video that works consistently across video platforms (HTML5, Flash, and soon other players like youtube) as well as devices
## Getting Started
Check out our [getting started guide](http://videojs.com/#section5).
## Contributing
Check out our [contributing guide](https://github.com/zencoder/video-js/blob/master/CONTRIBUTING.md).
## License
Copyright 2013 Brightcove, Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
---

203
Rakefile
View File

@ -1,203 +0,0 @@
require 'rubygems'
require 'yaml'
require 'httparty'
namespace :build do
desc "Build version for current '/c/' CDN copy and locked in version"
task :current do
Rake::Task["build:source"].execute
cdn_version_num = "#{version['major']}.#{version['minor']}"
['c', cdn_version_num].each do |vsn|
Rake::Shell["mkdir dist/#{vsn}"]
File.open("dist/#{vsn}/video.js", "w+") do |file|
file.puts File.read("dist/video.min.js").sub('GENERATED_CDN_VSN', vsn)
end
Rake::Shell["cp dist/video-js.min.css dist/#{vsn}/video-js.css"]
Rake::Shell["cp dist/video-js.swf dist/#{vsn}/video-js.swf"]
Rake::Shell["cp dist/video-js.png dist/#{vsn}/video-js.png"]
Rake::Shell["cp dist/demo.html dist/#{vsn}/demo.html"]
Rake::Shell["cp dist/captions.vtt dist/#{vsn}/captions.vtt"]
end
Rake::Shell["mkdir dist/video-js"]
File.open("dist/video-js/video.min.js", "w+") do |file|
file.puts File.read("dist/video.min.js").sub('GENERATED_CDN_VSN', cdn_version_num)
end
File.open("dist/video-js/video.js", "w+") do |file|
file.puts File.read("dist/video.js").sub('GENERATED_CDN_VSN', cdn_version_num)
end
Rake::Shell["cp dist/video-js.min.css dist/video-js/video-js.min.css"]
Rake::Shell["cp dist/video-js.css dist/video-js/video-js.css"]
Rake::Shell["cp dist/video-js.swf dist/video-js/video-js.swf"]
Rake::Shell["cp dist/video-js.png dist/video-js/video-js.png"]
Rake::Shell["cp dist/demo.html dist/video-js/demo.html"]
Rake::Shell["cp dist/captions.vtt dist/video-js/captions.vtt"]
Rake::Shell["cd dist && zip -r video-js-#{version_number}.zip video-js && cd .."]
if `git name-rev --name-only HEAD`.strip != 'stable'
Rake::Log["*** WARNING: NOT ON STABLE BRANCH!!! ***"]
end
end
desc "Build source files for packaging"
task :source do
Rake::Log["Building Version: " << version_number]
if File.exist?("dist")
Rake::Shell["rm -r dist"]
end
# Make distribution folder
Rake::Shell["mkdir dist"]
Rake::Log["Combining source files"]
combined = ""
first_files = [ '_begin.js', 'core.js', 'lib.js' ]
first_files.each do |item|
Rake::Log[item]
combined << File.read("src/#{item}")
end
Dir.foreach('src') do |item|
next if (['.', '..', '.DS_Store', 'setup.js', '_end.js'] + first_files).include? item
combined << File.read("src/#{item}")
end
# combined << File.read("flash/swfobject.js")
combined << File.read("src/setup.js")
combined << File.read("src/_end.js")
Rake::Log["Adding version number"]
combined = combined.gsub('GENERATED_AT_BUILD', version_number)
File.open('dist/video.js', "w+") do |file|
file.puts "" << combined
end
Rake::Log["Copying CSS and updated version"]
File.open('dist/video-js.css', "w+") do |file|
file.puts File.read("design/video-js.css").gsub('GENERATED_AT_BUILD', version_number)
end
Rake::Log["Copying suppporting files"]
Rake::Shell["cp design/video-js.png dist/video-js.png"]
Rake::Shell["cp flash/video-js.swf dist/video-js.swf"]
Rake::Shell["cp build/release-files/README.md dist/README.md"]
Rake::Shell["cp build/release-files/demo.html dist/demo.html"]
Rake::Shell["cp build/release-files/captions.vtt dist/captions.vtt"]
Rake::Shell["cp LGPLv3-LICENSE.txt dist/LGPLv3-LICENSE.txt"]
Rake::Log["Minimizing JavaScript"]
Rake::Shell["java -jar build/lib/yuicompressor-2.4.7.jar dist/video.js -o dist/video.min.js"]
Rake::Log["Minimizing CSS"]
Rake::Shell["java -jar build/lib/yuicompressor-2.4.7.jar dist/video-js.css -o dist/video-js.min.css"]
Rake::Log[version_number << " Built"]
end
desc "Build list of source files for easy inclusion in projects"
task :js_source do
File.open("dev/source-list.js", "w+") do |file|
file.puts "var vjsSourceList = [];"
src_array = ["src/core", "src/lib"]
last = ["src/setup"] # "flash/swfobject",
exclude = [".", "..", ".DS_Store", "_end.js", "_begin.js"]
Dir.foreach('src') do |item|
next if exclude.include? item
item_name = "src/" << item.sub(".js", "")
next if (src_array + last).include? item_name
src_array << item_name
end
src_array = src_array + last
src_array.each do |item|
file.puts "vjsSourceList.push('#{item}')"
end
# file.puts "vjsSourceList.push('src/#{item.sub(".js", "")}')"
# file.puts "vjsSourceList.push('flash/swfobject.js')"
end
end
desc "Build list of source files for easy inclusion in projects"
task :source_html do
File.open("dev/source-list.html", "w+") do |file|
file.puts "<!-- Video.js Source Files -->"
src_array = ["src/core", "src/lib"]
last = ["src/setup"] # "flash/swfobject",
exclude = [".", "..", ".DS_Store", "_end.js", "_begin.js"]
Dir.foreach('src') do |item|
next if exclude.include? item
item_name = "src/" << item.sub(".js", "")
next if (src_array + last).include? item_name
src_array << item_name
end
src_array = src_array + last
src_array.each do |item|
file.puts "<script src='#{item}.js'></script>"
end
# file.puts "vjsSourceList.push('src/#{item.sub(".js", "")}')"
# file.puts "vjsSourceList.push('flash/swfobject.js')"
file.puts "<!-- END Video.js Source Files -->"
end
end
end
def version
YAML.load(File.read("VERSION.yml"))
end
def version_number
"#{version['major']}.#{version['minor']}.#{version['patch']}"
end
module Rake
class Shell
def self.[](command)
output = %x[#{command}]
if $?.to_i > 0
puts "-----> Process aborted"
puts " Exit status: #{$?}"
exit($?.to_i)
end
puts output
end
end
class Log
def self.[](message)
puts "-----> #{message.split("\n").join("\n ")}"
end
end
end

37
browsers.json Normal file
View File

@ -0,0 +1,37 @@
[
{
"os": "win",
"browser": "chrome",
"version": "27.0"
},
{
"os": "win",
"browser": "firefox",
"version": "20.0"
},
{
"os": "win",
"browser": "ie",
"version": "9.0"
},
{
"os": "win",
"browser": "ie",
"version": "10.0"
},
{
"os": "ios",
"device": "iPhone 5",
"version": "6.0"
},
{
"os": "ios",
"device": "iPad 3rd (6.0)",
"version": "6.0"
},
{
"os": "android",
"device": "Samsung Galaxy Tab 2 10.1",
"version": "4.0"
}
]

48
build.sh
View File

@ -1,48 +0,0 @@
#! /bin/csh
# Combines Source Files. In terminal, sh build.sh
# It will put a new video.js file under dist/
# Create dist directory if it doesn't already exist
mkdir -p 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/setup.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/release-files/README.md dist/README.md
cp build/release-files/demo.html dist/demo.html
cp LGPLv3-LICENSE.txt dist/LGPLv3-LICENSE.txt
java -jar build/lib/yuicompressor-2.4.7.jar dist/video.js -o dist/video.min.js
java -jar build/lib/yuicompressor-2.4.7.jar dist/video-js.css -o dist/video-js.min.css

28
build/Versioning Notes.md
View File

@ -1,28 +0,0 @@
Deploying Version
-----------------
- Update SWF location for CDN
Version Numbers
---------------
http://en.wikipedia.org/wiki/Software_versioning#Sequence-based_identifiers
### Major Version (Integer, e.g 3.0)
- Any features where we expect it could break plugins, skins, or any major API integration.
### Minor Version (3.1)
- Additional non-breaking features
### Revision Versions
- Beta (3.1b1)
- Release Candidate (3.1rc1)
- Release with revisions (3.1r1)
Notes:
The last level of one revision type (beta/release candidate) should match the first level of the next revision type. 4.0-b10 should match 4.0-rc1, assuming b10 is the last beta version.
Release revisions means bug fixes. The CDN url should not reflect the revision number. 4.0-r2 would still be /4.0/.
Tagging a Release
-----------------
git tag -a [version number] [commit]

202
build/compiler/COPYING Normal file
View File

@ -0,0 +1,202 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

292
build/compiler/README Normal file
View File

@ -0,0 +1,292 @@
/*
* Copyright 2009 The Closure Compiler Authors.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
//
// Contents
//
The Closure Compiler performs checking, instrumentation, and
optimizations on JavaScript code. The purpose of this README is to
explain how to build and run the Closure Compiler.
The Closure Compiler requires Java 6 or higher.
http://www.java.com/
//
// Building The Closure Compiler
//
There are three ways to get a Closure Compiler executable.
1) Use one we built for you.
Pre-built Closure binaries can be found at
http://code.google.com/p/closure-compiler/downloads/list
2) Check out the source and build it with Apache Ant.
First, check out the full source tree of the Closure Compiler. There
are instructions on how to do this at the project site.
http://code.google.com/p/closure-compiler/source/checkout
Apache Ant is a cross-platform build tool.
http://ant.apache.org/
At the root of the source tree, there is an Ant file named
build.xml. To use it, navigate to the same directory and type the
command
ant jar
This will produce a jar file called "build/compiler.jar".
3) Check out the source and build it with Eclipse.
Eclipse is a cross-platform IDE.
http://www.eclipse.org/
Under Eclipse's File menu, click "New > Project ..." and create a
"Java Project." You will see an options screen. Give the project a
name, select "Create project from existing source," and choose the
root of the checked-out source tree as the existing directory. Verify
that you are using JRE version 6 or higher.
Eclipse can use the build.xml file to discover rules. When you
navigate to the build.xml file, you will see all the build rules in
the "Outline" pane. Run the "jar" rule to build the compiler in
build/compiler.jar.
//
// Running The Closure Compiler
//
Once you have the jar binary, running the Closure Compiler is straightforward.
On the command line, type
java -jar compiler.jar
This starts the compiler in interactive mode. Type
var x = 17 + 25;
then hit "Enter", then hit "Ctrl-Z" (on Windows) or "Ctrl-D" (on Mac or Linux)
and "Enter" again. The Compiler will respond:
var x=42;
The Closure Compiler has many options for reading input from a file,
writing output to a file, checking your code, and running
optimizations. To learn more, type
java -jar compiler.jar --help
You can read more detailed documentation about the many flags at
http://code.google.com/closure/compiler/docs/gettingstarted_app.html
//
// Compiling Multiple Scripts
//
If you have multiple scripts, you should compile them all together with
one compile command.
java -jar compiler.jar --js=in1.js --js=in2.js ... --js_output_file=out.js
The Closure Compiler will concatenate the files in the order they're
passed at the command line.
If you need to compile many, many scripts together, you may start to
run into problems with managing dependencies between scripts. You
should check out the Closure Library. It contains functions for
enforcing dependencies between scripts, and a tool called calcdeps.py
that knows how to give scripts to the Closure Compiler in the right
order.
http://code.google.com/p/closure-library/
//
// Licensing
//
Unless otherwise stated, all source files are licensed under
the Apache License, Version 2.0.
-----
Code under:
src/com/google/javascript/rhino
test/com/google/javascript/rhino
URL: http://www.mozilla.org/rhino
Version: 1.5R3, with heavy modifications
License: Netscape Public License and MPL / GPL dual license
Description: A partial copy of Mozilla Rhino. Mozilla Rhino is an
implementation of JavaScript for the JVM. The JavaScript parser and
the parse tree data structures were extracted and modified
significantly for use by Google's JavaScript compiler.
Local Modifications: The packages have been renamespaced. All code not
relevant to parsing has been removed. A JsDoc parser and static typing
system have been added.
-----
Code in:
lib/rhino
Rhino
URL: http://www.mozilla.org/rhino
Version: Trunk
License: Netscape Public License and MPL / GPL dual license
Description: Mozilla Rhino is an implementation of JavaScript for the JVM.
Local Modifications: Minor changes to parsing JSDoc that usually get pushed
up-stream to Rhino trunk.
-----
Code in:
lib/args4j.jar
Args4j
URL: https://args4j.dev.java.net/
Version: 2.0.16
License: MIT
Description:
args4j is a small Java class library that makes it easy to parse command line
options/arguments in your CUI application.
Local Modifications: None.
-----
Code in:
lib/guava.jar
Guava Libraries
URL: http://code.google.com/p/guava-libraries/
Version: 13.0.1
License: Apache License 2.0
Description: Google's core Java libraries.
Local Modifications: None.
-----
Code in:
lib/jsr305.jar
Annotations for software defect detection
URL: http://code.google.com/p/jsr-305/
Version: svn revision 47
License: BSD License
Description: Annotations for software defect detection.
Local Modifications: None.
-----
Code in:
lib/jarjar.jar
Jar Jar Links
URL: http://jarjar.googlecode.com/
Version: 1.1
License: Apache License 2.0
Description:
A utility for repackaging Java libraries.
Local Modifications: None.
----
Code in:
lib/junit.jar
JUnit
URL: http://sourceforge.net/projects/junit/
Version: 4.10
License: Common Public License 1.0
Description: A framework for writing and running automated tests in Java.
Local Modifications: None.
---
Code in:
lib/protobuf-java.jar
Protocol Buffers
URL: http://code.google.com/p/protobuf/
Version: 2.4.1
License: New BSD License
Description: Supporting libraries for protocol buffers,
an encoding of structured data.
Local Modifications: None
---
Code in:
lib/ant.jar
lib/ant-launcher.jar
URL: http://ant.apache.org/bindownload.cgi
Version: 1.8.1
License: Apache License 2.0
Description:
Ant is a Java based build tool. In theory it is kind of like "make"
without make's wrinkles and with the full portability of pure java code.
Local Modifications: None
---
Code in:
lib/json.jar
URL: http://json.org/java/index.html
Version: JSON version 20090211
License: MIT license
Description:
JSON is a set of java files for use in transmitting data in JSON format.
Local Modifications: None
---
Code in:
tools/maven-ant-tasks-2.1.3.jar
URL: http://maven.apache.org
Version 2.1.3
License: Apache License 2.0
Description:
Maven Ant tasks are used to manage dependencies and to install/deploy to
maven repositories.
Local Modifications: None

BIN
build/compiler/compiler.jar Normal file
View File

Binary file not shown.

1574
build/compiler/goog.base.js Normal file
View File

File diff suppressed because it is too large Load Diff

0
build/release-files/captions.vtt → build/demo-files/demo.captions.vtt
View File

4
build/release-files/demo.html → build/demo-files/demo.html
View File

@ -10,7 +10,7 @@
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
<script>
_V_.options.flash.swf = "video-js.swf";
videojs.options.flash.swf = "video-js.swf";
</script>
@ -23,7 +23,7 @@
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<track kind="captions" src="captions.vtt" srclang="en" label="English" />
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English" />
</video>
</body>

BIN
build/lib/yuicompressor-2.4.7.jar
View File

Binary file not shown.

153
build/release-files/README.md
View File

@ -1,153 +0,0 @@
Video.js - [HTML5 Video Player](http://videojs.com)
==================================================
Version 3.0
---
Version 3 is almost a complete rewrite of the previous versions of Video.js. 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.
Video.js 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 Video.js 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 Video.js:
1. The 'data-setup' attribute tells Video.js 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 Video.js 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](http://videojs.com/docs/) for more advanced uses.
Changelog
---------
3.0
- Complete rewrite
- 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.
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

72
build/source-loader.js Normal file
View File

@ -0,0 +1,72 @@
// This file is used to load the video.js source files into a page
// in the correct order based on dependencies.
// When you create a new source file you will need to add
// it to the list below to use it in sandbox/index.html and
// test/index.html
// You can use the projectRoot variable to adjust relative urls
// that this script loads. By default it's "../", which is what /sandbox
// and /test need. If you had sandbox/newDir/index.html, in index.html you
// would set projectRoot = "../../"
// We could use somehting like requireJS to load files, and at one point
// we used goog.require/provide to load dependencies, but that seems like
// overkill with the small number of files we actually have.
// ADD NEW SOURCE FILES HERE
var sourceFiles = [
"src/js/core.js",
"src/js/core-object.js",
"src/js/events.js",
"src/js/lib.js",
"src/js/component.js",
"src/js/button.js",
"src/js/slider.js",
"src/js/menu.js",
"src/js/player.js",
"src/js/control-bar/control-bar.js",
"src/js/control-bar/play-toggle.js",
"src/js/control-bar/time-display.js",
"src/js/control-bar/fullscreen-toggle.js",
"src/js/control-bar/progress-control.js",
"src/js/control-bar/volume-control.js",
"src/js/control-bar/mute-toggle.js",
"src/js/control-bar/volume-menu-button.js",
"src/js/poster.js",
"src/js/loading-spinner.js",
"src/js/big-play-button.js",
"src/js/media/media.js",
"src/js/media/html5.js",
"src/js/media/flash.js",
"src/js/media/loader.js",
"src/js/tracks.js",
"src/js/json.js",
"src/js/setup.js",
"src/js/plugins.js"
];
// Allow overriding the default project root
var projectRoot = projectRoot || '../';
function loadScripts(scriptsArr){
for (var i = 0; i < scriptsArr.length; i++) {
// Using document.write because that's the easiest way to avoid triggering
// asynchrnous script loading
document.write( "<script src='" + projectRoot + scriptsArr[i] + "'><\/script>" );
}
}
// We use this file in the grunt build script to load the same source file list
// and don't want to load the scripts there.
if (typeof blockSourceLoading === 'undefined') {
loadScripts(sourceFiles);
// Allow for making Flash first
if (window.location.href.indexOf("?flash") !== -1) {
// Using doc.write to load this script to, otherwise when it runs videojs
// is undefined
document.write('<script>videojs.options.techOrder = ["flash"];videojs.options.flash.swf = "../src/swf/video-js.swf";</script>')
}
}

6
contrib.json Normal file
View File

@ -0,0 +1,6 @@
{
"developmentBranch": "master",
"releaseBranch": "stable",
"remote": "origin",
"upstream": "zencoder"
}

8
decisions.txt
View File

@ -1,8 +0,0 @@
Tracking/Polling CurrentTime Manually
-------------------------------------
- Necessary for most flash players and browsers that don't trigger timeupdate events.
- In VJS 1-2, we always tracked time because timeupdate was rare.
- Now most browsers support it well. There is a delay bug in the current Chrome.
http://code.google.com/p/chromium/issues/detail?id=92251
Andrew from Chrome told me it would be fix in an upcoming release.
Going to rely on browsers timeupdates when available now.

13
demo-subtitles.srt
View File

@ -1,13 +0,0 @@
1
00:00:00,000 --> 00:00:07,200
[Background Music Playing]
2
00:00:16,000 --> 00:00:17,200
Welcome to this week's episode
3
00:00:17,400 --> 00:00:19,000
of explore California

BIN
design/Icon Design.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 85 KiB

BIN
design/loading.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.5 KiB

190
design/skin.old.css
View File

@ -1,190 +0,0 @@
/* DEFAULT SKIN (override in another file)
================================================================================
Using all CSS to draw the controls. Images could be used if desired.
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. */
.vjs-original-skin .vjs-controls {
position: absolute; margin: 0; opacity: 0.85; color: #fff;
display: block; /* Start hidden */
left: 0; right: 0; /* 100% width of video-js-box */
width: 100%;
bottom: 0px; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
height: 35px; /* Including any margin you want above or below control items */
padding: 0; /* Controls are absolutely position, so no padding necessary */
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
.vjs-original-skin .vjs-control {
position: absolute; /* Use top, bottom, left, and right to specifically position the control. */
text-align: center; margin: 0; padding: 0;
height: 25px; /* Default height of individual controls */
top: 5px; /* Top margin to put space between video and controls when controls are below */
/* CSS Background Gradients
Using to give the aqua-ish look. */
/* Default */ background-color: #0B151A;
/* Webkit */ background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 12px;
/* Firefox */ background: #1F3744 -moz-linear-gradient(top, #0B151A, #1F3744) left 12px;
/* CSS Curved Corners */
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
/* CSS Shadows */
-webkit-box-shadow: 1px 1px 2px #000; -moz-box-shadow: 1px 1px 2px #000; box-shadow: 1px 1px 2px #000;
}
/* Placement of Control Items
- Left side of pogress bar, use left & width
- Rigth side of progress bar, use right & width
- Expand with the video (like progress bar) use left & right
(using div.x to make more specific than vjs-control style)
*/
.vjs-original-skin div.vjs-play-control { left: 5px; width: 25px; }
.vjs-original-skin div.vjs-progress-control { left: 35px; right: 165px; } /* Using left & right so it expands with the width of the video */
.vjs-original-skin div.vjs-time-control { width: 75px; right: 90px; } /* Time control and progress bar are combined to look like one */
.vjs-original-skin div.vjs-volume-control { width: 50px; right: 35px; }
.vjs-original-skin div.vjs-fullscreen-control { width: 25px; right: 5px; }
/* Removing curved corners on progress control and time control to join them. */
.vjs-original-skin div.vjs-progress-control {
-webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0;
}
.vjs-original-skin div.vjs-time-control {
-webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; border-top-left-radius: 0;
-webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0;
}
/* Play/Pause
-------------------------------------------------------------------------------- */
.vjs-original-skin .vjs-play-control { cursor: pointer !important; }
/* Play Icon */
.vjs-original-skin .vjs-play-control span { display: block; font-size: 0; line-height: 0; }
.vjs-original-skin.vjs-paused .vjs-play-control span {
width: 0; height: 0; margin: 8px 0 0 8px;
/* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
border-left: 10px solid #fff; /* Width & Color of play icon */
/* Height of play icon is total top & bottom border widths. Color is transparent. */
border-top: 5px solid rgba(0,0,0,0); border-bottom: 5px solid rgba(0,0,0,0);
}
.vjs-original-skin.vjs-playing .vjs-play-control span {
width: 3px; height: 10px; margin: 8px auto 0;
/* Drawing the pause bars with borders */
border-top: 0px; border-left: 3px solid #fff; border-bottom: 0px; border-right: 3px solid #fff;
}
/* Progress
-------------------------------------------------------------------------------- */
.vjs-original-skin .vjs-progress-holder { /* Box containing play and load progresses */
position: relative; padding: 0; overflow:hidden; cursor: pointer !important;
height: 9px; border: 1px solid #777;
margin: 7px 1px 0 5px; /* Placement within the progress control item */
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}
.vjs-original-skin .vjs-progress-holder div { /* Progress Bars */
position: absolute; display: block; width: 0; height: 9px; margin: 0; padding: 0;
left: 0; top: 0; /*Needed for IE6*/
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}
.vjs-original-skin .vjs-play-progress {
/* CSS Gradient */
/* Default */ background: #fff;
/* Webkit */ background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#777));
/* Firefox */ background: -moz-linear-gradient(top, #fff, #777);
}
.vjs-original-skin .vjs-load-progress {
opacity: 0.8;
/* CSS Gradient */
/* Default */ background-color: #555;
/* Webkit */ background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#aaa));
/* Firefox */ background: -moz-linear-gradient(top, #555, #aaa);
}
/* Time Display
-------------------------------------------------------------------------------- */
.vjs-original-skin .vjs-time-control { font-size: 10px; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
.vjs-original-skin .vjs-time-control span { line-height: 25px; /* Centering vertically */ }
/* Volume
-------------------------------------------------------------------------------- */
.vjs-original-skin .vjs-volume-control { cursor: pointer !important; }
.vjs-original-skin .vjs-volume-control div { display: block; margin: 0 5px 0 5px; padding: 4px 0 0 0; }
/* Drawing the volume icon using 6 span elements */
.vjs-original-skin .vjs-volume-control div span { /* Individual volume bars */
float: left; padding: 0; font-size: 0; line-height: 0;
margin: 0 2px 0 0; /* Space between */
width: 5px; height: 0px; /* Total height is height + bottom border */
border-bottom: 18px solid #555; /* Default (off) color and height of visible portion */
}
.vjs-original-skin .vjs-volume-control div span.vjs-volume-level-on { border-color: #fff; /* Volume on bar color */ }
/* Creating differnt bar heights through height (transparent) and bottom border (visible). */
.vjs-original-skin .vjs-volume-control div span.vjs-vc-1 { border-bottom-width: 2px; height: 16px; }
.vjs-original-skin .vjs-volume-control div span.vjs-vc-2 { border-bottom-width: 4px; height: 14px; }
.vjs-original-skin .vjs-volume-control div span.vjs-vc-3 { border-bottom-width: 7px; height: 11px; }
.vjs-original-skin .vjs-volume-control div span.vjs-vc-4 { border-bottom-width: 10px; height: 8px; }
.vjs-original-skin .vjs-volume-control div span.vjs-vc-5 { border-bottom-width: 14px; height: 4px; }
.vjs-original-skin .vjs-volume-control div span.vjs-vc-6 { margin-right: 0; }
/* Fullscreen
-------------------------------------------------------------------------------- */
.vjs-original-skin .vjs-fullscreen-control { cursor: pointer !important; }
.vjs-original-skin .vjs-fullscreen-control div {
padding: 0; text-align: left; vertical-align: top; cursor: pointer !important;
margin: 5px 0 0 5px; /* Placement within the fullscreen control item */
width: 20px; height: 20px;
}
/* Drawing the fullscreen icon using 4 span elements */
.vjs-original-skin .vjs-fullscreen-control div span { float: left; margin: 0; padding: 0; font-size: 0; line-height: 0; width: 0; text-align: left; vertical-align: top; }
.vjs-original-skin .vjs-fullscreen-control div span.vjs-fc-1 { /* Top-left triangle */
margin-right: 3px; /* Space between top-left and top-right */
margin-bottom: 3px; /* Space between top-left and bottom-left */
border-top: 6px solid #fff; /* Height and color */
border-right: 6px solid rgba(0,0,0,0); /* Width */
}
.vjs-original-skin .vjs-fullscreen-control div span.vjs-fc-2 { border-top: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
.vjs-original-skin .vjs-fullscreen-control div span.vjs-fc-3 { clear: both; margin: 0 3px 0 0; border-bottom: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
.vjs-original-skin .vjs-fullscreen-control div span.vjs-fc-4 { border-bottom: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
/* Icon when video is in fullscreen mode */
.vjs-original-skin.vjs-fullscreen .vjs-fullscreen-control div span.vjs-fc-1 { border: none; border-bottom: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
.vjs-original-skin.vjs-fullscreen .vjs-fullscreen-control div span.vjs-fc-2 { border: none; border-bottom: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
.vjs-original-skin.vjs-fullscreen .vjs-fullscreen-control div span.vjs-fc-3 { border: none; border-top: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
.vjs-original-skin.vjs-fullscreen .vjs-fullscreen-control div span.vjs-fc-4 { border: none; border-top: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
/* Big Play Button (at start)
---------------------------------------------------------*/
.vjs-original-skin .vjs-big-play-button {
display: block; /* Start hidden */ z-index: 2;
position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin: -43px 0 0 -43px; text-align: center; vertical-align: center; cursor: pointer !important;
border: 3px solid #fff; opacity: 0.9;
-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;
/* CSS Background Gradients */
/* Default */ background-color: #0B151A;
/* Webkit */ background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 40px;
/* Firefox */ background: #1F3744 -moz-linear-gradient(top, #0B151A, #1F3744) left 40px;
/* CSS Shadows */
-webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000; box-shadow: 4px 4px 8px #000;
}
.vjs-original-skin div.vjs-big-play-button:hover {
-webkit-box-shadow: 0px 0px 80px #fff; -moz-box-shadow: 0px 0px 80px #fff; box-shadow: 0px 0px 80px #fff;
}
.vjs-original-skin div.vjs-big-play-button span {
display: block; font-size: 0; line-height: 0;
width: 0; height: 0; margin: 20px 0 0 23px;
/* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
border-left: 40px solid #fff; /* Width & Color of play icon */
/* Height of play icon is total top & bottom border widths. Color is transparent. */
border-top: 20px solid rgba(0,0,0,0); border-bottom: 20px solid rgba(0,0,0,0);
}

499
design/video-js.css
View File

@ -1,499 +0,0 @@
/*
VideoJS Default Styles (http://videojs.com)
Version GENERATED_AT_BUILD
*/
/*
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;
/* Allow poster to be vertially aligned. */
vertical-align: middle;
/* display: table-cell; */ /*This works in Safari but not Firefox.*/
}
/* 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%; }
/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when checking fullScreenEnabled. */
.video-js:-moz-full-screen { position: absolute; }
/* 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) */
}
.video-js:-webkit-full-screen {
width: 100% !important; height: 100% !important;
}
/* Poster Styles */
.vjs-poster {
margin: 0 auto; padding: 0; cursor: pointer;
/* Scale with the size of the player div. Works when poster is vertically shorter, but stretches when it's less wide. */
position: relative; width: 100%; max-height: 100%;
}
/* Text Track Styles */
/* Overall track holder for both captions and subtitles */
.video-js .vjs-text-track-display { text-align: center; position: absolute; bottom: 4em; left: 1em; right: 1em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* Individual tracks */
.video-js .vjs-text-track {
display: none; color: #fff; font-size: 1.4em; text-align: center; margin-bottom: 0.1em;
/* Transparent black background, or fallback to all black (IE6) */
background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50);
}
.video-js .vjs-subtitles { color: #fff; }
.video-js .vjs-captions { color: #fc6; }
.vjs-tt-cue { display: block; }
/* Fading sytles, used to fade control bar. */
.vjs-fade-in {
visibility: visible !important; /* Needed to make sure things hide in older browsers too. */
opacity: 1 !important;
-webkit-transition: visibility 0s linear 0s, opacity 0.3s linear;
-moz-transition: visibility 0s linear 0s, opacity 0.3s linear;
-ms-transition: visibility 0s linear 0s, opacity 0.3s linear;
-o-transition: visibility 0s linear 0s, opacity 0.3s linear;
transition: visibility 0s linear 0s, opacity 0.3s linear;
}
.vjs-fade-out {
visibility: hidden !important;
opacity: 0 !important;
-webkit-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
-moz-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
-ms-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
-o-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
transition: visibility 0s linear 1.5s,opacity 1.5s linear;
}
/* DEFAULT SKIN (override in another file to create new skins)
================================================================================
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 */
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 */
/* Start hidden and with 0 opacity. Opacity is used to fade in modern browsers. */
/* Can't use display block to hide initially because widths of slider handles aren't calculated and avaialbe for positioning correctly. */
visibility: hidden;
opacity: 0;
}
/* 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;
/* background-color: #555;*/
}
/* 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, #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);*/
}
/* 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: -42px 0 0 -42px; text-align: center; vertical-align: center; cursor: pointer !important;
border: 0.2em solid #fff; opacity: 0.95;
-webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;
background: #454545;
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;
}
/* Loading Spinner
---------------------------------------------------------*/
/* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
.vjs-loading-spinner {
display: none;
position: absolute; top: 50%; left: 50%; width: 55px; height: 55px;
margin: -28px 0 0 -28px;
-webkit-animation-name: rotatethis;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-moz-animation-name: rotatethis;
-moz-animation-duration:1s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
}
@-webkit-keyframes rotatethis {
0% {-webkit-transform:scale(0.6) rotate(0deg); }
12.5% {-webkit-transform:scale(0.6) rotate(0deg); }
12.51% {-webkit-transform:scale(0.6) rotate(45deg); }
25% {-webkit-transform:scale(0.6) rotate(45deg); }
25.01% {-webkit-transform:scale(0.6) rotate(90deg);}
37.5% {-webkit-transform:scale(0.6) rotate(90deg);}
37.51% {-webkit-transform:scale(0.6) rotate(135deg);}
50% {-webkit-transform:scale(0.6) rotate(135deg);}
50.01% {-webkit-transform:scale(0.6) rotate(180deg);}
62.5% {-webkit-transform:scale(0.6) rotate(180deg);}
62.51% {-webkit-transform:scale(0.6) rotate(225deg);}
75% {-webkit-transform:scale(0.6) rotate(225deg);}
75.01% {-webkit-transform:scale(0.6) rotate(270deg);}
87.5% {-webkit-transform:scale(0.6) rotate(270deg);}
87.51% {-webkit-transform:scale(0.6) rotate(315deg);}
100% {-webkit-transform:scale(0.6) rotate(315deg);}
}
@-moz-keyframes rotatethis {
0% {-moz-transform:scale(0.6) rotate(0deg);}
12.5% {-moz-transform:scale(0.6) rotate(0deg);}
12.51% {-moz-transform:scale(0.6) rotate(45deg);}
25% {-moz-transform:scale(0.6) rotate(45deg);}
25.01% {-moz-transform:scale(0.6) rotate(90deg);}
37.5% {-moz-transform:scale(0.6) rotate(90deg);}
37.51% {-moz-transform:scale(0.6) rotate(135deg);}
50% {-moz-transform:scale(0.6) rotate(135deg);}
50.01% {-moz-transform:scale(0.6) rotate(180deg);}
62.5% {-moz-transform:scale(0.6) rotate(180deg);}
62.51% {-moz-transform:scale(0.6) rotate(225deg);}
75% {-moz-transform:scale(0.6) rotate(225deg);}
75.01% {-moz-transform:scale(0.6) rotate(270deg);}
87.5% {-moz-transform:scale(0.6) rotate(270deg);}
87.51% {-moz-transform:scale(0.6) rotate(315deg);}
100% {-moz-transform:scale(0.6) rotate(315deg);}
}
/* Each circle */
div.vjs-loading-spinner .ball1 { opacity: 0.12; position:absolute; left: 20px; top: 0px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball2 { opacity: 0.25; position:absolute; left: 34px; top: 6px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball3 { opacity: 0.37; position:absolute; left: 40px; top: 20px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball4 { opacity: 0.50; position:absolute; left: 34px; top: 34px; width: 13px; height: 13px; background: #fff;
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 15px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball5 { opacity: 0.62; position:absolute; left: 20px; top: 40px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball6 { opacity: 0.75; position:absolute; left: 6px; top: 34px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball7 { opacity: 0.87; position:absolute; left: 0px; top: 20px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; top: 6px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
/* Menu Buttons (Captions/Subtitles/etc.)
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-menu-button {
float: right; margin: 0.2em 0.5em 0 0; padding: 0; width: 3em; height: 2em; cursor: pointer !important;
border: 1px solid #111; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
background: #4d4d4d;
background: -moz-linear-gradient(top, #4d4d4d 0%, #3f3f3f 50%, #333333 50%, #252525 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(50%,#3f3f3f), color-stop(50%,#333333), color-stop(100%,#252525));
background: -webkit-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
background: -o-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
background: -ms-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
background: linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
}
/* Button Icon */
.vjs-default-skin .vjs-menu-button div { background: url('video-js.png') 0px -75px no-repeat; width: 16px; height: 16px; margin: 0.2em auto 0; padding: 0; }
/* Button Pop-up Menu */
.vjs-default-skin .vjs-menu-button ul {
display: none; /* Start hidden. Hover will show. */
opacity: 0.8;
padding: 0; margin: 0;
position: absolute; width: 10em; bottom: 2em; max-height: 15em;
left: -3.5em; /* Width of menu - width of button / 2 */
background-color: #111;
border: 2px solid #333;
-moz-border-radius: 0.7em; -webkit-border-radius: 1em; border-radius: .5em;
-webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
overflow: auto;
}
.vjs-default-skin .vjs-menu-button:focus ul,
.vjs-default-skin .vjs-menu-button:hover ul { display: block; list-style: none; }
.vjs-default-skin .vjs-menu-button ul li { list-style: none; margin: 0; padding: 0.3em 0 0.3em 20px; line-height: 1.4em; font-size: 1.2em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: left; }
.vjs-default-skin .vjs-menu-button ul li.vjs-selected { text-decoration: underline; background: url('video-js.png') -125px -50px no-repeat; }
.vjs-default-skin .vjs-menu-button ul li:focus,
.vjs-default-skin .vjs-menu-button ul li:hover,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover { background-color: #ccc; color: #111; outline: 0; }
.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
text-align: center; text-transform: uppercase; font-size: 1em; line-height: 2em; padding: 0; margin: 0 0 0.3em 0;
color: #fff; font-weight: bold;
cursor: default;
background: #4d4d4d;
background: -moz-linear-gradient(top, #4d4d4d 0%, #3f3f3f 50%, #333333 50%, #252525 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(50%,#3f3f3f), color-stop(50%,#333333), color-stop(100%,#252525));
background: -webkit-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
background: -o-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
background: -ms-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
background: linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
}
/* Subtitles Button */
.vjs-default-skin .vjs-captions-button div { background-position: -25px -75px; }
.vjs-default-skin .vjs-chapters-button div { background-position: -100px -75px; }
.vjs-default-skin .vjs-chapters-button ul { width: 20em; left: -8.5em; /* Width of menu - width of button / 2 */ }

BIN
design/video-js.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.0 KiB

51
dev.html.example
View File

@ -1,51 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Video Player</title>
<link href="design/video-js.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<script src="https://getfirebug.com/releases/lite/1.3/firebug-lite.js"></script>
<!--<![endif]-->
<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/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/setup.js"></script>
<script type="text/javascript" charset="utf-8">
// Easy access to test Flash over HTML5. Add ?flash to URL
if (window.location.href.indexOf("?flash") !== -1) {
_V_.options.techOrder = ["H5swf"]
}
</script>
</head>
<body>
<video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
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'>
<p>Video Playback Not Supported</p>
</video>
<script>
vid = document.getElementById("vid1");
</script>
</body>
</html>

17
dev/build-source-list.rb
View File

@ -1,17 +0,0 @@
#! /usr/bin/env ruby
# Create javascript file with list of source files for easy inclusion in other development files.
# puts ARGV[0]
File.open("source-list.js", "w+") do |file|
file.puts "var vjsSourceList = [];"
Dir.foreach('../src') do |item|
next if item == '.' or item == '..' or item == '.DS_Store'
file.puts "vjsSourceList.push('src/#{item}')"
end
end

0
dev/include-sources.js
View File

31
dev/require-list.js
View File

@ -1,31 +0,0 @@
// Attempting to create a portable script that loads source files in order. So we can change which files are included and have it change multiple places.
var vjsSourceList = ["require",
'order!../../src/core.js',
'order!../../src/lib.js',
'order!../../src/component.js',
'order!../../src/controls.js',
'order!../../src/ecma.js',
'order!../../src/events.js',
'order!../../src/json.js',
'order!../../src/player.js',
'order!../../src/tech.js',
'order!../../src/tracks.js',
'order!../../flash/swfobject.js',
'order!../../src/setup.js'
];
// Not going to be used in production, so eval ok.
require([vjsSourceList])
// var requireEval = '';
// for (var i=0; i < vjsSourceList.length; i++) {
// requireEval += 'require(["order!'+vjsSourceList[i]+'"], function() { ';
// }
//
// requireEval += 'var libsLoaded = true;'
//
// for (var i=0; i < vjsSourceList.length; i++) {
// requireEval += ' }); ';
// }
//
// eval(requireEval);

2144
dev/require.js
View File

File diff suppressed because it is too large Load Diff

13
dev/source-list.html
View File

@ -1,13 +0,0 @@
<!-- Video.js Source Files -->
<script src='src/core.js'></script>
<script src='src/lib.js'></script>
<script src='src/component.js'></script>
<script src='src/controls.js'></script>
<script src='src/ecma.js'></script>
<script src='src/events.js'></script>
<script src='src/json.js'></script>
<script src='src/player.js'></script>
<script src='src/tech.js'></script>
<script src='src/tracks.js'></script>
<script src='src/setup.js'></script>
<!-- END Video.js Source Files -->

13
dev/source-list.js
View File

@ -1,13 +0,0 @@
var vjsSourceList = [];
vjsSourceList.push('src/core')
vjsSourceList.push('src/lib')
vjsSourceList.push('src/component')
vjsSourceList.push('src/controls')
vjsSourceList.push('src/ecma')
vjsSourceList.push('src/events')
vjsSourceList.push('src/json')
vjsSourceList.push('src/player')
vjsSourceList.push('src/tech')
vjsSourceList.push('src/tracks')
vjsSourceList.push('flash/swfobject')
vjsSourceList.push('src/setup')

258
docs/api.md
View File

@ -1,11 +1,3 @@
---
layout: docs
title: API
description: Video.JS API Docs - API settings based on the HTML5 video API
body_id: api
body_class: docs subpage
---
API
===
The Video.js API allows you to interact with the video through Javascript, whether the browser is playing the video through HTML5 video, Flash, or any other supported playback technologies.
@ -13,31 +5,25 @@ The Video.js API allows you to interact with the video through Javascript, wheth
Referencing the Player
----------------------
To use the API functions, you need access to the player object. Luckily this is easy to get. You just need to make sure your video tag has an ID. The example embed code has an ID of "example\_video_1". If you have multiple videos on one page, make sure every video tag has a unique ID.
<code type="javascript">
var myPlayer = _V_("example_video_1");
</code>
```js
var myPlayer = videojs("example_video_1");
```
(If the player hasn't been initialized yet via the data-setup attribute or another method, this will also initialize the player.)
Wait Until the Player is Ready
------------------------------
The time it takes Video.js to set up the video and API will vary depending on the playback technology being used (HTML5 will often be much faster to load than Flash). For that reason we want to use the player's 'ready' function to trigger any code that requires the player's API.
```javascript
videojs("example_video_1").ready(function(){
<code type="javascript">
var myPlayer = this;
_V_("example_video_1").ready(function(){
// EXAMPLE: Start playing the video.
myPlayer.play();
var myPlayer = this;
// EXAMPLE: Start playing the video.
myPlayer.play();
});
</code>
});
```
API Methods
-----------
@ -45,225 +31,177 @@ Now that you have access to a ready player, you can control the video, get value
### play() ###
Start video playback. Returns the player object.
<code type="javascript">
myPlayer.play();
</code>
```js
myPlayer.play();
```
### pause() ###
Pause the video playback. Returns the player object
```js
myPlayer.pause();
```
<code type="javascript">
myPlayer.pause();
### paused() ###
Returns false if the video is currently playing, or true otherwise. ()
```js
var isPaused = myPlayer.paused();
var isPlaying = !myPlayer.paused();
```
</code>
### src(newSource) ###
The source function updates the video source. There are three types of variables you can pass as the argument.
**URL String**: A URL to the the video file. Use this method if you're sure the current playback technology (HTML5/Flash) can support the source you provide. Currently only MP4 files can be used in both HTML5 and Flash.
<code type="javascript">
myPlayer.src("http://www.example.com/path/to/video.mp4");
</code>
```js
myPlayer.src("http://www.example.com/path/to/video.mp4");
```
**Source Object (or element):** A javascript object containing information about the source file. Use this method if you want the player to determine if it can support the file using the type information.
<code type="javascript">
myPlayer.src({ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" });
</code>
```js
myPlayer.src({ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" });
```
**Array of Source Objects:** To provide multiple versions of the source so that it can be played using HTML5 across browsers you can use an array of source objects. Video.js will detect which version is supported and load that file.
<code type="javascript">
myPlayer.src([
{ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" },
{ type: "video/webm", src: "http://www.example.com/path/to/video.webm" },
{ type: "video/ogg", src: "http://www.example.com/path/to/video.ogv" }
]);
</code>
```js
myPlayer.src([
{ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" },
{ type: "video/webm", src: "http://www.example.com/path/to/video.webm" },
{ type: "video/ogg", src: "http://www.example.com/path/to/video.ogv" }
]);
```
Returns the player object.
### currentTime() ###
Returns the current time of the video in seconds.
<code type="javascript">
var whereYouAt = myPlayer.currentTime();
</code>
```js
var whereYouAt = myPlayer.currentTime();
```
### currentTime(seconds) // Type: Integer or Float ###
Seek to the supplied time (seconds). Returns the player object.
<code type="javascript">
myPlayer.currentTime(120); // 2 minutes into the video
</code>
```js
myPlayer.currentTime(120); // 2 minutes into the video
```
### duration() ###
Returns the length in time of the video in seconds. NOTE: The video must have started loading before the duration can be known, and in the case of Flash, may not be known until the video starts playing.
<code type="javascript">
var howLongIsThis = myPlayer.duration();
</code>
```js
var howLongIsThis = myPlayer.duration();
```
### buffered() ###
Returns a [TimeRange](http://videojs.com/docs/glossary.html#timerange) object with sections of the video that have been downloaded. If you just want the percent of the video that's been downloaded, use bufferedPercent.
Returns a [TimeRange](glossary.md#timerange) object with sections of the video that have been downloaded. If you just want the percent of the video that's been downloaded, use bufferedPercent.
```js
var bufferedTimeRange = myPlayer.buffered(),
<code type="javascript">
// Number of different ranges of time have been buffered. Usually 1.
numberOfRanges = bufferedTimeRange.length,
var bufferedTimeRange = myPlayer.buffered(),
// Time in seconds when the first range starts. Usually 0.
firstRangeStart = bufferedTimeRange.start(0),
// Number of different ranges of time have been buffered. Usually 1.
numberOfRanges = bufferedTimeRange.length,
// Time in seconds when the first range ends
firstRangeEnd = bufferedTimeRange.end(0),
// Time in seconds when the first range starts. Usually 0.
firstRangeStart = bufferedTimeRange.start(0),
// Time in seconds when the first range ends
firstRangeEnd = bufferedTimeRange.end(0),
// Length in seconds of the first time range
firstRangeLength = firstRangeEnd - firstRangeStart;
</code>
// Length in seconds of the first time range
firstRangeLength = firstRangeEnd - firstRangeStart;
```
### bufferedPercent() ###
Returns the percent (as a decimal) of the video that's been downloaded. 0 means none, 1 means all.
<code type="javascript">
var howMuchIsDownloaded = myPlayer.bufferedPercent();
</code>
```js
var howMuchIsDownloaded = myPlayer.bufferedPercent();
```
### volume() ###
Returns the current volume of the video as a percent in decimal form. 0 is off (muted), 1.0 is all the way up, 0.5 is half way.
```js
var howLoudIsIt = myPlayer.volume();
```
<code type="javascript">
var howLoudIsIt = myPlayer.volume();
</code>
### volume(percentAsDecimal) ###
Set the volume to the supplied percent (as a decimal between 0 and 1).
<code type="javascript">
myPlayer.volume(0.5); // Set volume to half
</code>
```js
myPlayer.volume(0.5); // Set volume to half
```
### width() ###
Returns the current width of the video in pixels.
<code type="javascript">
var howWideIsIt = myPlayer.width();
</code>
```js
var howWideIsIt = myPlayer.width();
```
### width(pixels) ###
Change the width of the video to the supplied width in pixels. Returns the player object
<code type="javascript">
myPlayer.width(640);
</code>
```js
myPlayer.width(640);
```
### height() ###
Returns the current height of the video in pixels.
<code type="javascript">
var howTallIsIt = myPlayer.height();
</code>
```js
var howTallIsIt = myPlayer.height();
```
### height(pixels) ###
Change the height of the video to the supplied height in pixels. Returns the player object
<code type="javascript">
myPlayer.height(480);
</code>
```js
myPlayer.height(480);
```
### size(width, height) ###
Changes the width and height of the video to the supplied width and height. This is more efficient if you're changing both width and height (only triggers the player's resize event once). Returns the player object.
<code type="javascript">
myPlayer.size(640,480);
</code>
```js
myPlayer.size(640,480);
```
### requestFullScreen() ###
Increase the size of the video to full screen. In some browsers, full screen is not supported natively, so it enters full window mode, where the video fills the browser window. In browsers and devices that support native full screen, sometimes the browser's default controls will be shown, and not the Video.js custom skin. This includes most mobile devices (iOS, Android) and older versions of Safari. Returns the player object.
<code type="javascript">
myPlayer.requestFullScreen();
</code>
```js
myPlayer.requestFullScreen();
```
### cancelFullScreen() ###
Return the video to its normal size after having been in full screen mode. Returns the player object.
<code type="javascript">
myPlayer.cancelFullScreen();
</code>
```js
myPlayer.cancelFullScreen();
```
Events
------
You can attach event listeners to the player similarly to how you would for a video element.
<code type="javascript">
var myFunc = function(){
var myPlayer = this;
// Do something when the event is fired
};
myPlayer.addEvent("eventName", myFunc);
</code>
```js
var myFunc = function(){
var myPlayer = this;
// Do something when the event is fired
};
myPlayer.on("eventName", myFunc);
```
You can also remove the listeners later.
<code type="javascript">
myPlayer.removeEvent("eventName", myFunc);
</code>
```js
myPlayer.off("eventName", myFunc);
```
### Event Types
@ -285,4 +223,4 @@ List of player events you can add listeners for.
<tr><td>volumechange</td><td>Fired when the volume changes.</td></tr>
<tr><td>error</td><td>Fired when there is an error in playback.</td></tr>
<tr><td>fullscreenchange</td><td>Fired when the player switches in or out of fullscreen mode.</td></tr>
</table>
</table>

91
docs/components.md Normal file
View File

@ -0,0 +1,91 @@
Components
===
The Video.js player is built on top of a simple, custom UI components architecture. The player class and all control classes inherit from the Component class, or a subclass of Component.
```js
videojs.Control = videojs.Component.extend({});
videojs.Button = videojs.Control.extend({});
videojs.PlayToggle = videojs.Button.extend({});
```
(The Class interface itself is provided using John Resig's [simple class inheritance](http://ejohn.org/blog/simple-javascript-inheritance/) also found in [JSNinja](http://jsninja.com).
The UI component architecture makes it easier to add child components to a parent component and build up an entire user interface, like the controls for the Video.js player.
```js
// Adding a new control to the player
myPlayer.addChild('BigPlayButton');
```
Every component has an associated DOM element, and when you add a child component, it inserts the element of that child into the element of the parent.
```js
myPlayer.addChild('BigPlayButton');
```
Results in:
```html
<!-- Player Element -->
<div class="video-js">
<!-- BigPlayButton Element -->
<div class="vjs-big-play-button"></div>
</div>
```
The actual default component structure of the Video.js player looks something like this:
```
Player
PosterImage
TextTrackDisplay
LoadingSpinner
BigPlayButton
ControlBar
PlayToggle
FullscreenToggle
CurrentTimeDisplay
TimeDivider
DurationDisplay
RemainingTimeDisplay
ProgressControl
SeekBar
LoadProgressBar
PlayProgressBar
SeekHandle
VolumeControl
VolumeBar
VolumeLevel
VolumeHandle
MuteToggle
```
Component Methods
-----------------
### addChild() ###
Add a child component to myComponent. This will also insert the child component's DOM element into myComponent's element.
```js
myComponent.addChild('');
```
myPlayer.addChild('BigPlayButton');
myPlayer.removeChild('BigPlayButton');
myPlayer.getChild('BiPlayButton');
myPlayer.children();
myPlayer.getChildById('biPlayButton');
myPlayer.removeChildById('my-player-big-play-button');
el();
getContentEl();
getChildren();
getParent();
#home_player_big-play-button

20
docs/glossary.md
View File

@ -1,26 +1,19 @@
---
layout: docs
title: VideoJS Glossary
description: Video.JS Glossary
body_id: glossary
body_class: docs subpage
---
Glossary
========
Terms related to web video.
### DOM (Document Object Model)
The container of elements on the page that must be loaded before you can interact with the elements with through Javascript.
http://en.wikipedia.org/wiki/Document_Object_Model
### Flash Fallback
The Flash video player (SWF) used to play a video when HTML5 isn't supported.
<a name="timerange"></a>
### TimeRange
<a name="html5-video"></a>
### HTML5 Video
HTML is the markup language that makes up every page on the web. The newest version, HTML5, includes specifications for a video tag, that is meant to allow website developers to add a video to a page the same way they would add an image. In order for this to work, web browser developers (Mozilla, Apple, Microsoft, Google, Opera, etc.) have to build the video playback functionality into their browsers. The W3C has created directions on how video should work in browsers, and it’s up to browser developers to follow those directions, so that video works the same across all browsers. This doesn’t always happen thanks to technology, legal, and financial choices made by browser developers, but so far no one’s varying too far from the specifications. However the specifications are still being changed and refined, so browsers developers have to keep up with that as well.
@ -28,7 +21,7 @@ Playing video in a web page may not seem so special since you can already view v
A prime example of this is the iPhone and iPad. Apple has decided not to support Flash on their mobile devices, but they do support HTML5 video. Since Flash is currently the most common way video is added to web pages, most web video (aside from YouTube who has a special relationship with Apple) can’t be viewed on the iPhone or iPad. These devices are very popular, so many web sites are switching to hybrid HTML5/Flash player setups (like VideoJS).
<a name="video-tag"></a>
### Video Tag
There are a number of great resources that will give you an introduction to the video tag an how it is used including:
@ -38,10 +31,9 @@ There are a number of great resources that will give you an introduction to the
An if you really want to dig in, you can read the (W3C Spec)[http://www.w3.org/TR/html5/video.html]. (Warning - not for the faint of heart)
<a name="skin"></a>
### Skin
"Skin" refers to the design of the player's controls, also sometimes called the chrome. With VideoJS, new skins can be built simply by creating a new stylesheet.
<a name="cdn"></a>
### Content Delivery Network (CDN)
A network of servers around the world that host copies of a file. When your browser requests one of these files, the CDN automatically determines which server is closest to your location and delivers the file from there. This drastically increases delivery time, especially internationally.

38
docs/index.md
View File

@ -1,29 +1,27 @@
---
layout: docs
title: Docs
description: Video.JS Docs
body_id: docs
body_class: docs subpage
---
[Video.js homepage](http://videojs.com)
<h1>Start</h1>
<h1>Video.js Documentation</h1>
The Video.js documentation is here to help you setup and use the player. These docs can be found and contributed to in the [Video.js library repository](https://github.com/zencoder/video-js/tree/master/docs).
### [Setup](/docs/setup)
Check out the [5 second setup](/#setup) if you're just getting started. The setup documentation gives a deeper view of the additional methods you can use to trigger the player setup.
## Getting Started
### [Options](/docs/options/)
There are a number of options that can be used to change how the player behaves, starting with the HTML5 media options like autoplay and preload, and expanding to Video.JS specific options.
* [Setup](setup.md) - Check out the [5 second setup](http://videojs.com/#section5) if you're just getting started. The setup documentation gives a deeper view of the additional methods you can use to trigger the player setup.
### [API](/docs/api/)
The Video.js API allows you to control the video through javascript or trigger event listeners, whether the video is playing through HTML5, flash, or another playback technology.
* [Options](options.md) - There are a number of options that can be used to change how the player behaves, starting with the HTML5 media options like autoplay and preload, and expanding to Video.JS specific options.
### [Skins](/docs/skins/)
You can change the look of the player across playback technologies just by editing a CSS file. The skins documentation gives you a intro to how the HTML and CSS of the default skin is put together.
* [Tracks](tracks.md) - Text Tracks are used to display subtitles and captions, and add a menu for navigating between chapters in a video.
### [Tech](/docs/tech/)
A 'playback technology' is the term we're using to represent HTML5 video, Flash, and other video plugins, as well as other players like the YouTube player. Basically anything that has a unique API to audio or video. Additional playback technologies can be added relatively easily.
## Customizing
### [Glossary](/docs/glossary/)
Some helpful definitions.
* [API](api.md) - The Video.js API allows you to control the video through javascript or trigger event listeners, whether the video is playing through HTML5, flash, or another playback technology.
* [Skins](skins.md) - You can change the look of the player across playback technologies just by editing a CSS file. The skins documentation gives you a intro to how the HTML and CSS of the default skin is put together.
* [Tech](tech.md) - A 'playback technology' is the term we're using to represent HTML5 video, Flash, and other video plugins, as well as other players like the YouTube player. Basically anything that has a unique API to audio or video. Additional playback technologies can be added relatively easily.
* [Plugins](plugins.md) - You can package up interesting Video.js customizations and reuse them elsewhere. Find out how to build your own plugin or use one created by someone else.
## Resources
* [Glossary](glossary.md) - Some helpful definitions.

139
docs/options.md
View File

@ -1,40 +1,26 @@
---
layout: docs
title: Options
description: Player Options
body_id: options
body_class: docs subpage
---
Options
=======
Setting Options
---------------
The Video.js emebed code is simply an HTML5 video tag, so for many of the options you can use the standard tag attributes to set the options.
The Video.js embed code is simply an HTML5 video tag, so for many of the options you can use the standard tag attributes to set the options.
<code type="html">
<video controls autoplay preload="auto" ...>
</code>
```html
<video controls autoplay preload="auto" ...>
```
Alternatively, you can use the data-setup attribute to provide options in the [JSON](http://json.org/example.html) format. This is also how you would set options that aren't standard to the video tag.
<code type="html">
<video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>
</code>
```html
<video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>
```
Finally, if you're not using the data-setup attribute to trigger the player setup, you can pass in an object with the player options as the second argument in the javascript setup function.
<code type="javascript">
_V_("example_video_1", { "controls": true, "autoplay": false, "preload": "auto" });
</code>
```js
videojs("example_video_1", { "controls": true, "autoplay": false, "preload": "auto" });
```
Individual Options
@ -42,44 +28,39 @@ Individual Options
> ### Note on Video Tag Attributes ###
> With HTML5 video tag attributes that can only be true or false (boolean), you simply include the attribute (no equals sign) to turn it on, or exclude it to turn it off. For example, to turn controls on:
>
> WRONG
> <code type="html">
>
> <video controls="true" ...>
>
> </code>
>
> RIGHT
> <code type="html">
>
> <video controls ...>
>
> </code>
>
WRONG
```html
<video controls="true" ...>
```
RIGHT
```html
<video controls ...>
```
> The biggest issue people run into is trying to set these values to false using false as the value (e.g. controls="false") which actually does the opposite and sets the value to true because the attribute is still included. If you need the attribute to include an equals sign for XHTML validation, you can set the attribute's value to the same as its name (e.g. controls="controls").
### controls ###
The controls option sets whether or not the player has controls that the user can interact with. Without controls the only way to start the video playing is with the autoplay attribute or through the API.
<code type="html">
<video controls ...>
or
{ "controls": true }
```html
<video controls ...>
or
{ "controls": true }
```
</code>
### autoplay ###
If autoplay is true, the video will start playing as soon as page is loaded (without any interaction from the user).
If autoplay is true, the video will start playing as soon as page is loaded (without any interaction from the user).
NOT SUPPORTED BY APPLE iOS DEVICES. Apple blocks the autoplay functionality in an effort to protect it's customers from unwillingly using a lot of their (often expensive) monthly data plans. A user touch/click is required to start the video in this case.
<code type="html">
```html
<video autoplay ...>
or
{ "autoplay": true }
```
<video autoplay ...>
or
{ "autoplay": true }
</code>
### preload ###
The preload attribute informs the browser whether or not the video data should begin downloading as soon as the video tag is loaded. The options are auto, metadata, and none.
@ -90,50 +71,44 @@ The preload attribute informs the browser whether or not the video data should b
'none': Don't preload any of the video data. This will wait until the user clicks play to begin downloading.
<code type="html">
```html
<video preload ...>
or
{ "preload": "auto" }
```
<video preload ...>
or
{ "preload": "auto" }
</code>
### poster ###
The poster attribute sets the image that displays before the video begins playing. This is often a frame of the video or a custom title screen. As soon as the user clicks play the image will go away.
<code type="html">
```html
<video poster="myPoster.jpg" ...>
or
{ "poster": "myPoster.jpg" }
```
<video poster="myPoster.jpg" ...>
or
{ "poster": "myPoster.jpg" }
</code>
### loop ###
The loop attribute causes the video to start over as soon as it ends. This could be used for a visual affect like clouds in the background.
<code type="html">
```html
<video loop ...>
or
{ "loop": "true" }
```
<video loop ...>
or
{ "loop": "true" }
</code>
### width ###
The width attribute sets the display width of the video.
<code type="html">
```html
<video width="640" ...>
or
{ "width": 640 }
```
<video width="640" ...>
or
{ "width": 640 }
</code>
### height ###
The height attribute sets the display height of the video.
<code type="html">
<video height="480" ...>
or
{ "height": 480 }
</code>
```html
<video height="480" ...>
or
{ "height": 480 }
```

41
docs/plugins.md Normal file
View File

@ -0,0 +1,41 @@
Plugins
=======
If you've built something cool with Video.js, you can easily share it with the rest of the world by creating a plugin.
Step 1: Write Some Javascript
-----------------------------
You may have already done this step. Code up something interesting and then wrap it in a function. At the most basic level, that's all a video.js plugin is. By convention, plugins take a hash of options as their first argument:
function examplePlugin(options) {
this.on('play', function(e) {
console.log('playback has started!');
});
};
When it's activated, `this` will be the Video.js player your plugin is attached to. You can use anything you'd like in the [Video.js API](api.md) when you're writing a plugin: change the `src`, mess up the DOM, or listen for and emit your own events.
Step 2: Registering A Plugin
-------------------------------
It's time to give the rest of the world the opportunity to be awed by your genius. When your plugin is loaded, it needs to let Video.js know this amazing new functionality is now available:
vjs.plugin('examplePlugin', examplePlugin);
From this point on, your plugin will be added to the Video.js prototype and will show up as a property on every instance created. Make sure you choose a unique name that doesn't clash with any of the properties already in Video.js. Which leads us to...
Step 3: Using A Plugin
----------------------
There are two ways to initialize a plugin. If you're creating your video tag dynamically, you can specify the plugins you'd like to initialize with it and any options you want to pass to them:
vjs('vidId', {
plugins: {
examplePlugin: {
exampleOption: true
}
}
});
If you've already initialized your video tag, you can activate a plugin at any time by calling its setup function directly:
video.examplePlugin({ exampleOption: true });
That's it. Head on over to the Video.js wiki and add your plugin to the list so everyone else can check it out.

81
docs/setup.md
View File

@ -1,11 +1,3 @@
---
layout: docs
title: Setup
description: Setup
body_id: setup
body_class: docs subpage
---
Setup
=====
@ -14,74 +6,65 @@ Video.js is pretty easy to set up. It can take a matter of seconds to get the pl
Step 1: Include the Video.js Javascript and CSS files in the head of your page.
------------------------------------------------------------------------------
You can download the Video.js source and host it on your own servers, or use the free CDN hosted version. It's often recommended now to put JavaScript before the end body tag (&lt;/body>) instead of the head (&lt;head>), but Video.js includes an 'HTML5 Shiv', which needs to be in the head for older IE versions to respect the video tag as a valid element.
You can download the Video.js source and host it on your own servers, or use the free CDN hosted version. It's often recommended now to put JavaScript before the end body tag (&lt;/body>) instead of the head (&lt;head>), but Video.js includes an 'HTML5 Shiv', which needs to be in the head for older IE versions to respect the video tag as a valid element.
> NOTE: If you're already using an HTML5 shiv like [Modernizr](http://modernizr.com/) you can include the Video.js JavaScript anywhere, however make sure your version of Modernizr includes the shiv for video.
### CDN Version ###
<code type="html">
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</code>
```html
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
```
### Self Hosted. ###
With the self hosted option you'll also want to update the location of the video-js.swf file.
<code type="html">
<link href="http://example.com/path/to/video-js.css" rel="stylesheet">
<script src="http://example.com/path/to/video.js"></script>
<script>
_V_.options.flash.swf = "http://example.com/path/to/video-js.swf"
</script>
</code>
```html
<link href="http://example.com/path/to/video-js.css" rel="stylesheet">
<script src="http://example.com/path/to/video.js"></script>
<script>
videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"
</script>
```
Step 2: Add an HTML5 video tag to your page.
--------------------------------------------
With Video.js you just use an HTML5 video tag to embed a video. Video.js will then read the tag and make it work in all browsers, not just ones that support HTML5 video. Beyond the basic markup, Video.js needs a few extra pieces.
1. The 'data-setup' Atrribute tells Video.js to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute (see ['options'](http://videojs.com/docs/options/)). There are other methods for initializing the player, but this is the easiest.
1. The 'data-setup' Atrribute tells Video.js to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute (see [options](options.md)). There are other methods for initializing the player, but this is the easiest.
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 Video.js 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.
- `video-js` applies styles that are required for Video.js 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.
<code type="html">
<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' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
</code>
```html
<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' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
```
Alternative Setup for Dynamically Loaded HTML
---------------------------------------------
If your web page or application loads the video tag dynamically (ajax, appendChild, etc.), so that it may not exist when the page loads, you'll want to manually set up the player instead of relying on the data-setup attribute. To do this, first remove the data-setup attribute from the tag so there's no confusion around when the player is initialized. Next, run the following javascript some time after the Video.js javascript library has loaded, and after the video tag has been loaded into the DOM.
```js
videojs("example_video_1", {}, function(){
// Player (this) is initialized and ready.
});
```
<code type="javascript">
The first argument in the `videojs` function is the ID of your video tag. Replace it with your own.
_V_("example_video_1", {}, function(){
// Player (this) is initialized and ready.
});
</code>
The first argument in the \_V_ function is the ID of your video tag. Replace it with your own.
The second argument is an options object. It allows you to set additional options like you can with the data-setup attribute.
The second argument is an options object. It allows you to set additional options like you can with the data-setup attribute.
The third argument is a 'ready' callback. Once Video.js has initialized it will call this function.

24
docs/skins.md
View File

@ -1,33 +1,21 @@
---
layout: docs
title: Skins
description: Controls Skins, Chrome, Design, look-and-feel.
body_id: skins
body_class: docs subpage
---
Skins
=====
The default Video.js skin is made using HTML and CSS, so there's no need to learn a complicated skinning language to update colors or even create an entirely new skin. New in version 3.0 is the use of a sprites image file (video-js.png). The image allows for a little bit more classy design, as well as compatibility with older versions of IE now that the HTML skin also shows when Flash is used for those browsers.
You can view the uncompressed CSS for the default skin by downloading the latest version of Video.js or viewing [the source version](https://github.com/zencoder/video-js/blob/master/design/video-js.css) on Github.
You can view the uncompressed CSS for the default skin by downloading the latest version of Video.js or viewing [the source version](https://github.com/videojs/video.js/blob/master/src/css/video-js.css) on Github.
You can either override styles in the default skin:
{% highlight css %}
```css
.vjs-default-skin .vjs-play-progress { background: #900; }
{% endhighlight %}
```
Or remove the 'vjs-default-skin' class from the video tag and create your own skin.
{% highlight html %}
```html
<video class="video-js my-custom-skin" ...>
```
{% endhighlight %}
More custom skins will be available for download soon. If you have one you'd like to contribute back, please email it to <script type="text/javascript">eval(decodeURIComponent('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%73%6b%69%6e%73%40%76%69%64%65%6f%6a%73%2e%63%6f%6d%22%3e%73%6b%69%6e%73%40%76%69%64%65%6f%6a%73%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script>.
More custom skins will be available for download soon. If you have one you'd like to contribute back, please email it to skins at videojs.

54
docs/tech.md
View File

@ -1,14 +1,6 @@
---
layout: docs
title: Playback Technology
description: Video.js Playback Technology
body_id: tech
body_class: docs subpage
---
Playback Technology ("Tech")
============================
Playback Technology refers to the specific browser or plugin technology used to play the video or audio. When using HTML5, the playback technology is the video or audio element. When using Flash, the playback technology is the specific Flash player used, e.g. Flowplayer, YouTube Player, video-js.swf, etc. (not just "Flash"). This could also include Silverlight, Quicktime, or any other plugin that will play back video in the browser, as long as there is an API wrapper written for it.
Playback Technology refers to the specific browser or plugin technology used to play the video or audio. When using HTML5, the playback technology is the video or audio element. When using Flash, the playback technology is the specific Flash player used, e.g. Flowplayer, YouTube Player, video-js.swf, etc. (not just "Flash"). This could also include Silverlight, Quicktime, or any other plugin that will play back video in the browser, as long as there is an API wrapper written for it.
Essentially we're using HTML5 and plugins only as video decoders, and using HTML and JavaScript to create a consistent API and skinning experience across all of them.
@ -44,3 +36,47 @@ timeupdate
progress
enterFullScreen
exitFullScreen
Adding Playback Technology
==================
When adding additional Tech to a video player, make sure to add the supported tech to the video object.
### Tag Method: ###
<video data-setup='{"techOrder": ["html5", "flash", "other supported tech"]}'
### Object Method: ###
videojs("videoID", {
techOrder: ["html5", "flash", "other supported tech"]
});
Youtube Technology
==================
To add a youtube source to your video tag, use the following source:
<source src="http://www.youtube.com/watch?v=[ytVideoId]" type="video/youtube"
Important Note:
------------------
> You can simply copy and paste the url of the youtube page from the browser and
> the Youtube Tech will be able to find the video id by itself. This is just the
> minimum needed to get the video working. (Useful for data storage)
Youtube Technology - Extra Options
----------------------------------
In Addition to the natively supported options, the Youtube API supports the following
added options:
### ytcontrols ###
Type: Boolean (T/F)
Default: False
Determines whether to show Youtube's basic Red/Black default play bar skin or to hide
it and use the native video-js play bar.
### hd ###
Type: Boolean (T/F)
Default: False
Determines whether or not to play back the video in HD.

34
docs/tracks.md
View File

@ -1,11 +1,3 @@
---
layout: docs
title: HTML5 Video Text Tracks (Subtitles, Captions, Chapters)
description: Video.js support for captions, subtitles, and chapters through the use of the HTML5 video track element.
body_id: tracks
body_class: docs subpage
---
Tracks
======
@ -21,26 +13,24 @@ Creating the Text File
----------------------
Timed text requires a text file in [WebVTT](http://dev.w3.org/html5/webvtt/) format. This format defines a list of "cues" that have a start time, and end time, and text to display. [Microsoft has a builder](http://ie.microsoft.com/testdrive/Graphics/CaptionMaker/) that can help you get started on the file.
When creating captions, there's also additional (caption formatting techniques)[http://www.theneitherworld.com/mcpoodle/SCC_TOOLS/DOCS/SCC_FORMAT.HTML#style] that would be good to use, like brackets around sound effects. [ sound effect ]
When creating captions, there's also additional [caption formatting techniques](http://www.theneitherworld.com/mcpoodle/SCC_TOOLS/DOCS/SCC_FORMAT.HTML#style) that would be good to use, like brackets around sound effects. [ sound effect ]
Adding to Video.js
------------------
Once you have your WebVTT file created, you can add it to Video.js using the track trag. Put your track track tag after all the source elements, and before any fallback content.
<code type="html">
```html
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
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' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
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' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<track kind="captions" src="http://example.com/path/to/captions.vtt" srclang="en" label="English" default>
<track kind="captions" src="http://example.com/path/to/captions.vtt" srclang="en" label="English" default>
</video>
</code>
</video>
```
Track Attributes
----------------
@ -232,4 +222,4 @@ The two-letter code (valid BCP 47 language tag) for the language of the text tra
</td>
</tr>
</table>
</table>

4
flash/swfobject.js
View File

File diff suppressed because one or more lines are too long

BIN
flash/video-js.swf
View File

Binary file not shown.

52
package.json Normal file
View File

@ -0,0 +1,52 @@
{
"name": "video.js",
"description": "An HTML5 and Flash video player with a common API and skin for both.",
"version": "4.0.0",
"copyright": "Copyright 2013 Brightcove, Inc. https://github.com/videojs/video.js/blob/master/LICENSE",
"keywords": [
"html5",
"flash",
"video",
"player"
],
"homepage": "http://videojs.com",
"author": "Steve Heffernan",
"scripts": {
"test": "grunt test --verbose"
},
"repository": {
"type": "git",
"url": "https://github.com/zencoder/video-js.git"
},
"devDependencies": {
"grunt-cli": "~0.1.0",
"grunt": "~0.4.0",
"grunt-contrib-jshint": "~0.4.3",
"grunt-contrib-watch": "~0.1.4",
"grunt-contrib-qunit": "~0.2.1",
"calcdeps": "~0.1.7",
"grunt-contrib-clean": "~0.4.0a",
"grunt-contrib-copy": "~0.3.2",
"mocha": "~1.8.1",
"contribflow": "~0.2.0",
"grunt-s3": "~0.2.0-alpha",
"semver": "~1.1.4"
},
"testling": {
"browsers": [
"ie6",
"ie7",
"ie8",
"ie9",
"firefox/15",
"chrome/22",
"opera/12",
"safari/5.1"
],
"harness": "mocha-qunit",
"scripts": [
"src/js/*.js",
"test/unit/*.js"
]
}
}

30
sandbox/index.html.example Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Video.js Sandbox</title>
<link href="../src/css/video-js.css" rel="stylesheet" type="text/css">
<!-- LOAD VIDEO.JS SOURCE FILES IN ORDER -->
<script src="../build/source-loader.js"></script>
</head>
<body>
<p style="background-color:#eee; border: 1px solid #777; padding: 10px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example, so please don't edit or add those files. To get started make a copy of index.html.example and rename it to index.html.</p>
<video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
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'>
<p>Video Playback Not Supported</p>
</video>
<script>
vid = document.getElementById("vid1");
</script>
</body>
</html>

46
sandbox/plugin.html.example Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Video.js Plugin Example</title>
<link href="../src/css/video-js.css" rel="stylesheet" type="text/css">
<!-- LOAD VIDEO.JS SOURCE FILES IN ORDER -->
<script src="../build/source-loader.js"></script>
</head>
<body>
<p style="background-color:#eee; border: 1px solid #777; padding: 10px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">This page shows you how to create, register and initialize a Video.js plugin.</p>
<video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png">
<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'>
<p>Video Playback Not Supported</p>
</video>
<script>
(function() {
var vid1, progressed;
// create a really simple plugin
// this one just logs the buffered percentage to the console whenever
// more data is downloaded
progressed = function(options) {
this.on('progress', function(e) {
console.log(this.bufferedPercent());
});
};
// register the plugin
vjs.plugin('progressed', progressed);
// initialize it
vid1 = vjs('vid1');
vid1.progressed();
})();
</script>
</body>
</html>

1
source-list.js
View File

@ -1 +0,0 @@
var vjsSourceList = [];

24
src/_begin.js
View File

@ -1,24 +0,0 @@
/*!
Video.js - HTML5 Video Player
Version GENERATED_AT_BUILD
LGPL v3 LICENSE INFO
This file is part of Video.js. Copyright 2011 Zencoder, Inc.
Video.js is free software: you can redistribute it and/or modify
it under the terms of the GNU Lesser General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Video.js is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License
along with Video.js. If not, see <http://www.gnu.org/licenses/>.
*/
// Self-executing function to prevent global vars and help with minification
;(function(window, undefined){
var document = window.document;

6
src/_end.js
View File

@ -1,6 +0,0 @@
// Expose to global
window.VideoJS = window._V_ = VideoJS;
// End self-executing function
})(window);

230
src/component.js
View File

@ -1,230 +0,0 @@
// 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;
// Allow for overridding default component options
options = this.options = _V_.merge(this.options || {}, options);
// Create element if one wasn't provided in options
if (options.el) {
this.el = options.el;
} else {
this.el = this.createElement();
}
// Add any components in options
this.initComponents();
},
destroy: function(){},
createElement: function(type, attrs){
return _V_.createElement(type || "div", attrs);
},
buildCSSClass: function(){
// Child classes can include a function that does:
// return "CLASS NAME" + this._super();
return "";
},
initComponents: function(){
var options = this.options;
if (options && options.components) {
// Loop through components and add them to the player
this.eachProp(options.components, function(name, opts){
// Allow waiting to add components until a specific event is called
var tempAdd = this.proxy(function(){
// Set property name on player. Could cause conflicts with other prop names, but it's worth making refs easy.
this[name] = this.addComponent(name, opts);
});
if (opts.loadEvent) {
this.one(opts.loadEvent, tempAdd)
} else {
tempAdd();
}
});
}
},
// 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(name, options){
var component, componentClass;
// If string, create new component with options
if (typeof name == "string") {
// Make sure options is at least an empty object to protect against errors
options = options || {};
// Assume name of set is a lowercased name of the UI Class (PlayButton, etc.)
componentClass = options.componentClass || _V_.uc(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);
} else {
component = name;
}
// Add the UI object's element to the container div (box)
this.el.appendChild(component.el);
// Return so it can stored on parent object if desired.
return component;
},
removeComponent: function(component){
this.el.removeChild(component.el);
},
/* Display
================================================================================ */
show: function(){
this.el.style.display = "block";
},
hide: function(){
this.el.style.display = "none";
},
fadeIn: function(){
this.removeClass("vjs-fade-out");
this.addClass("vjs-fade-in");
},
fadeOut: function(){
this.removeClass("vjs-fade-in");
this.addClass("vjs-fade-out");
},
lockShowing: function(){
var style = this.el.style;
style.display = "block";
style.opacity = 1;
style.visiblity = "visible";
},
unlockShowing: function(){
var style = this.el.style;
style.display = "";
style.opacity = "";
style.visiblity = "";
},
addClass: function(classToAdd){
_V_.addClass(this.el, classToAdd);
},
removeClass: function(classToRemove){
_V_.removeClass(this.el, classToRemove);
},
/* Events
================================================================================ */
addEvent: function(type, fn, uid){
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);
},
one: function(type, fn) {
_V_.one(this.el, type, _V_.proxy(this, fn));
},
/* Ready - Trigger functions when component is ready
================================================================================ */
ready: function(fn){
if (!fn) return this;
if (this.isReady) {
fn.call(this);
} else {
if (this.readyQueue === undefined) {
this.readyQueue = [];
}
this.readyQueue.push(fn);
}
return this;
},
triggerReady: function(){
this.isReady = true;
if (this.readyQueue && this.readyQueue.length > 0) {
// Call all functions in ready queue
this.each(this.readyQueue, function(fn){
fn.call(this);
});
// Reset Ready Queue
this.readyQueue = [];
// Allow for using event listeners also, in case you want to do something everytime a source is ready.
this.triggerEvent("ready");
}
},
/* Utility
================================================================================ */
each: function(arr, fn){ _V_.each.call(this, arr, fn); },
eachProp: function(obj, fn){ _V_.eachProp.call(this, obj, fn); },
extend: function(obj){ _V_.merge(this, obj) },
// More easily attach 'this' to functions
proxy: function(fn, uid){ return _V_.proxy(this, fn, uid); }
});

852
src/controls.js vendored
View File

@ -1,852 +0,0 @@
/* Control - Base class for all control elements
================================================================================ */
_V_.Control = _V_.Component.extend({
buildCSSClass: function(){
return "vjs-control " + this._super();
}
});
/* Control Bar
================================================================================ */
_V_.ControlBar = _V_.Component.extend({
options: {
loadEvent: "play",
components: {
"playToggle": {},
"fullscreenToggle": {},
"currentTimeDisplay": {},
"timeDivider": {},
"durationDisplay": {},
"remainingTimeDisplay": {},
"progressControl": {},
"volumeControl": {},
"muteToggle": {}
}
},
init: function(player, options){
this._super(player, options);
player.one("play", this.proxy(function(){
this.fadeIn();
this.player.addEvent("mouseover", this.proxy(this.fadeIn));
this.player.addEvent("mouseout", this.proxy(this.fadeOut));
}));
},
createElement: function(){
return _V_.createElement("div", {
className: "vjs-controls"
});
},
fadeIn: function(){
this._super();
this.player.triggerEvent("controlsvisible");
},
fadeOut: function(){
this._super();
this.player.triggerEvent("controlshidden");
},
lockShowing: function(){
this.el.style.opacity = "1";
}
});
/* Button - Base class for all buttons
================================================================================ */
_V_.Button = _V_.Control.extend({
init: function(player, options){
this._super(player, options);
this.addEvent("click", this.onClick);
this.addEvent("focus", this.onFocus);
this.addEvent("blur", this.onBlur);
},
createElement: function(type, attrs){
// Add standard Aria and Tabindex info
attrs = _V_.merge({
className: this.buildCSSClass(),
innerHTML: '<div><span class="vjs-control-text">' + (this.buttonText || "Need Text") + '</span></div>',
role: "button",
tabIndex: 0
}, attrs);
return this._super(type, attrs);
},
// 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.isFullScreen) {
this.player.requestFullScreen();
} else {
this.player.cancelFullScreen();
}
}
});
/* 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(){
// Go back to the beginning if big play button is showing at the end.
// Have to check for current time otherwise it might throw a 'not ready' error.
if(this.player.currentTime()) {
this.player.currentTime(0);
}
this.player.play();
}
});
/* Loading Spinner
================================================================================ */
_V_.LoadingSpinner = _V_.Component.extend({
init: function(player, options){
this._super(player, options);
player.addEvent("canplay", _V_.proxy(this, this.hide));
player.addEvent("canplaythrough", _V_.proxy(this, this.hide));
player.addEvent("playing", _V_.proxy(this, this.hide));
player.addEvent("seeking", _V_.proxy(this, this.show));
// in some browsers seeking does not trigger the 'playing' event,
// so we also need to trap 'seeked' if we are going to set a
// 'seeking' event
player.addEvent("seeked", _V_.proxy(this, this.hide));
player.addEvent("error", _V_.proxy(this, this.show));
// Not showing spinner on stalled any more. Browsers may stall and then not trigger any events that would remove the spinner.
// Checked in Chrome 16 and Safari 5.1.2. http://help.videojs.com/discussions/problems/883-why-is-the-download-progress-showing
// player.addEvent("stalled", _V_.proxy(this, this.show));
player.addEvent("waiting", _V_.proxy(this, this.show));
},
createElement: function(){
var classNameSpinner, innerHtmlSpinner;
if ( typeof this.player.el.style.WebkitBorderRadius == "string"
|| typeof this.player.el.style.MozBorderRadius == "string"
|| typeof this.player.el.style.KhtmlBorderRadius == "string"
|| typeof this.player.el.style.borderRadius == "string")
{
classNameSpinner = "vjs-loading-spinner";
innerHtmlSpinner = "<div class='ball1'></div><div class='ball2'></div><div class='ball3'></div><div class='ball4'></div><div class='ball5'></div><div class='ball6'></div><div class='ball7'></div><div class='ball8'></div>";
} else {
classNameSpinner = "vjs-loading-spinner-fallback";
innerHtmlSpinner = "";
}
return this._super("div", {
className: classNameSpinner,
innerHTML: innerHtmlSpinner
});
}
});
/* 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());
}
});
/* Slider - Parent for seek bar and volume slider
================================================================================ */
_V_.Slider = _V_.Component.extend({
init: function(player, options){
this._super(player, options);
player.addEvent(this.playerEvent, _V_.proxy(this, this.update));
this.addEvent("mousedown", this.onMouseDown);
this.addEvent("focus", this.onFocus);
this.addEvent("blur", this.onBlur);
this.player.addEvent("controlsvisible", this.proxy(this.update));
// This is actually to fix the volume handle position. http://twitter.com/#!/gerritvanaaken/status/159046254519787520
// this.player.one("timeupdate", this.proxy(this.update));
this.update();
},
createElement: function(type, attrs) {
attrs = _V_.merge({
role: "slider",
"aria-valuenow": 0,
"aria-valuemin": 0,
"aria-valuemax": 100,
tabIndex: 0
}, attrs);
return this._super(type, attrs);
},
onMouseDown: function(event){
event.preventDefault();
_V_.blockTextSelection();
_V_.addEvent(document, "mousemove", _V_.proxy(this, this.onMouseMove));
_V_.addEvent(document, "mouseup", _V_.proxy(this, this.onMouseUp));
this.onMouseMove(event);
},
onMouseUp: function(event) {
_V_.unblockTextSelection();
_V_.removeEvent(document, "mousemove", this.onMouseMove, false);
_V_.removeEvent(document, "mouseup", this.onMouseUp, false);
this.update();
},
update: function(){
// If scrubbing, we could use a cached value to make the handle keep up with the user's mouse.
// On HTML5 browsers scrubbing is really smooth, but some flash players are slow, so we might want to utilize this later.
// var progress = (this.player.scrubbing) ? this.player.values.currentTime / this.player.duration() : this.player.currentTime() / this.player.duration();
var barProgress,
progress = this.getPercent();
handle = this.handle,
bar = this.bar;
// Protect against no duration and other division issues
if (isNaN(progress)) { progress = 0; }
barProgress = progress;
// If there is a handle, we need to account for the handle in our calculation for progress bar
// so that it doesn't fall short of or extend past the handle.
if (handle) {
var box = this.el,
boxWidth = box.offsetWidth,
handleWidth = handle.el.offsetWidth,
// The width of the handle in percent of the containing box
// In IE, widths may not be ready yet causing NaN
handlePercent = (handleWidth) ? handleWidth / boxWidth : 0,
// Get the adjusted size of the box, considering that the handle's center never touches the left or right side.
// There is a margin of half the handle's width on both sides.
boxAdjustedPercent = 1 - handlePercent;
// Adjust the progress that we'll use to set widths to the new adjusted box width
adjustedProgress = progress * boxAdjustedPercent,
// The bar does reach the left side, so we need to account for this in the bar's width
barProgress = adjustedProgress + (handlePercent / 2);
// Move the handle from the left based on the adjected progress
handle.el.style.left = _V_.round(adjustedProgress * 100, 2) + "%";
}
// Set the new bar width
bar.el.style.width = _V_.round(barProgress * 100, 2) + "%";
},
calculateDistance: function(event){
var box = this.el,
boxX = _V_.findPosX(box),
boxW = box.offsetWidth,
handle = this.handle;
if (handle) {
var handleW = handle.el.offsetWidth;
// Adjusted X and Width, so handle doesn't go outside the bar
boxX = boxX + (handleW / 2);
boxW = boxW - handleW;
}
// Percent that the click is through the adjusted area
return Math.max(0, Math.min(1, (event.pageX - boxX) / boxW));
},
onFocus: function(event){
_V_.addEvent(document, "keyup", _V_.proxy(this, this.onKeyPress));
},
onKeyPress: function(event){
if (event.which == 37) { // Left Arrow
event.preventDefault();
this.stepBack();
} else if (event.which == 39) { // Right Arrow
event.preventDefault();
this.stepForward();
}
},
onBlur: function(event){
_V_.removeEvent(document, "keyup", _V_.proxy(this, this.onKeyPress));
}
});
/* Progress
================================================================================ */
// Progress Control: Seek, Load Progress, and Play Progress
_V_.ProgressControl = _V_.Component.extend({
options: {
components: {
"seekBar": {}
}
},
createElement: function(){
return this._super("div", {
className: "vjs-progress-control vjs-control"
});
}
});
// Seek Bar and holder for the progress bars
_V_.SeekBar = _V_.Slider.extend({
options: {
components: {
"loadProgressBar": {},
// Set property names to bar and handle to match with the parent Slider class is looking for
"bar": { componentClass: "PlayProgressBar" },
"handle": { componentClass: "SeekHandle" }
}
},
playerEvent: "timeupdate",
init: function(player, options){
this._super(player, options);
},
createElement: function(){
return this._super("div", {
className: "vjs-progress-holder"
});
},
getPercent: function(){
return this.player.currentTime() / this.player.duration();
},
onMouseDown: function(event){
this._super(event);
this.player.scrubbing = true;
this.videoWasPlaying = !this.player.paused();
this.player.pause();
},
onMouseMove: function(event){
var newTime = this.calculateDistance(event) * 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);
},
onMouseUp: function(event){
this._super(event);
this.player.scrubbing = false;
if (this.videoWasPlaying) {
this.player.play();
}
},
stepForward: function(){
this.player.currentTime(this.player.currentTime() + 1);
},
stepBack: function(){
this.player.currentTime(this.player.currentTime() - 1);
}
});
// 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>'
});
}
});
/* Volume Scrubber
================================================================================ */
// Progress Control: Seek, Load Progress, and Play Progress
_V_.VolumeControl = _V_.Component.extend({
options: {
components: {
"volumeBar": {}
}
},
createElement: function(){
return this._super("div", {
className: "vjs-volume-control vjs-control"
});
}
});
_V_.VolumeBar = _V_.Slider.extend({
options: {
components: {
"bar": { componentClass: "VolumeLevel" },
"handle": { componentClass: "VolumeHandle" }
}
},
playerEvent: "volumechange",
createElement: function(){
return this._super("div", {
className: "vjs-volume-bar"
});
},
onMouseMove: function(event) {
this.player.volume(this.calculateDistance(event));
},
getPercent: function(){
return this.player.volume();
},
stepForward: function(){
this.player.volume(this.player.volume() + 0.1);
},
stepBack: function(){
this.player.volume(this.player.volume() - 0.1);
}
});
_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);
}
});
/* Poster Image
================================================================================ */
_V_.PosterImage = _V_.Button.extend({
init: function(player, options){
this._super(player, options);
if (!this.player.options.poster) {
this.hide();
}
player.addEvent("play", _V_.proxy(this, this.hide));
},
createElement: function(){
return _V_.createElement("img", {
className: "vjs-poster",
src: this.player.options.poster,
// Don't want poster to be tabbable.
tabIndex: -1
});
},
onClick: function(){
this.player.play();
}
});
/* Menu
================================================================================ */
// The base for text track and settings menu buttons.
_V_.Menu = _V_.Component.extend({
init: function(player, options){
this._super(player, options);
},
addItem: function(component){
this.addComponent(component);
component.addEvent("click", this.proxy(function(){
this.unlockShowing();
}));
},
createElement: function(){
return this._super("ul", {
className: "vjs-menu"
});
}
});
_V_.MenuItem = _V_.Button.extend({
init: function(player, options){
this._super(player, options);
if (options.selected) {
this.addClass("vjs-selected");
}
},
createElement: function(type, attrs){
return this._super("li", _V_.merge({
className: "vjs-menu-item",
innerHTML: this.options.label
}, attrs));
},
onClick: function(){
this.selected(true);
},
selected: function(selected){
if (selected) {
this.addClass("vjs-selected");
} else {
this.removeClass("vjs-selected")
}
}
});

116
src/core.js
View File

@ -1,116 +0,0 @@
// HTML5 Shiv. Must be in <head> to support older browsers.
document.createElement("video");document.createElement("audio");
var VideoJS = function(id, addOptions, ready){
var tag; // Element of ID
// 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. (VideoJS)"); // 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(tag, addOptions, ready);
},
// Shortcut
_V_ = VideoJS,
// CDN Version. Used to target right flash swf.
CDN_VERSION = "GENERATED_CDN_VSN";
VideoJS.players = {};
VideoJS.options = {
// Default order of fallback technology
techOrder: ["html5","flash"],
// techOrder: ["flash","html5"],
html5: {},
flash: { swf: "http://vjs.zencdn.net/c/video-js.swf" },
// Default of web browser is 300x150. Should rely on source width/height.
width: 300,
height: 150,
// defaultVolume: 0.85,
defaultVolume: 0.00, // The freakin seaguls are driving me crazy!
// Included control sets
components: {
"posterImage": {},
"textTrackDisplay": {},
"loadingSpinner": {},
"bigPlayButton": {},
"controlBar": {}
}
// components: [
// "poster",
// "loadingSpinner",
// "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"*/
// ]
};
// Set CDN Version of swf
if (CDN_VERSION != "GENERATED_CDN_VSN") {
_V_.options.flash.swf = "http://vjs.zencdn.net/"+CDN_VERSION+"/video-js.swf"
}

BIN
src/css/font/vjs.eot Normal file
View File

Binary file not shown.

40
src/css/font/vjs.svg Normal file
View File

@ -0,0 +1,40 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
This is a custom SVG font generated by IcoMoon.
<iconset grid="16"></iconset>
</metadata>
<defs>
<font id="VideoJS" horiz-adv-x="512" >
<font-face units-per-em="512" ascent="480" descent="-32" />
<missing-glyph horiz-adv-x="512" />
<glyph unicode="&#xe000;" d="M 512.00,480.00 L 512.00,272.00 L 432.00,352.00 L 336.00,256.00 L 288.00,304.00 L 384.00,400.00 L 304.00,480.00 ZM 224.00,144.00 L 128.00,48.00 L 208.00-32.00 L 0.00-32.00 L 0.00,176.00 L 80.00,96.00 L 176.00,192.00 Z" />
<glyph unicode="&#xe001;" d="M 96.00,416.00L 416.00,224.00L 96.00,32.00 z" />
<glyph unicode="&#xe002;" d="M 64.00,416.00L 224.00,416.00L 224.00,32.00L 64.00,32.00zM 288.00,416.00L 448.00,416.00L 448.00,32.00L 288.00,32.00z" />
<glyph unicode="&#xe003;" d="M 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z" />
<glyph unicode="&#xe004;" d="M 274.51,109.49c-6.143,0.00-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0.00,33.941
c 40.55,40.55, 40.55,106.529,0.00,147.078c-9.373,9.373-9.373,24.569,0.00,33.941c 9.373,9.372, 24.568,9.372, 33.941,0.00
c 59.265-59.265, 59.265-155.696,0.00-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z" />
<glyph unicode="&#xe005;" d="M 359.765,64.235c-6.143,0.00-12.284,2.343-16.971,7.029c-9.372,9.372-9.372,24.568,0.00,33.941
c 65.503,65.503, 65.503,172.085,0.00,237.588c-9.372,9.373-9.372,24.569,0.00,33.941c 9.372,9.371, 24.569,9.372, 33.941,0.00
C 417.532,335.938, 440.00,281.696, 440.00,224.00c0.00-57.695-22.468-111.938-63.265-152.735C 372.049,66.578, 365.907,64.235, 359.765,64.235zM 274.51,109.49c-6.143,0.00-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0.00,33.941
c 40.55,40.55, 40.55,106.529,0.00,147.078c-9.373,9.373-9.373,24.569,0.00,33.941c 9.373,9.372, 24.568,9.372, 33.941,0.00
c 59.265-59.265, 59.265-155.696,0.00-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z" />
<glyph unicode="&#xe006;" d="M 445.02,18.98c-6.143,0.00-12.284,2.343-16.971,7.029c-9.372,9.373-9.372,24.568,0.00,33.941
C 471.868,103.771, 496.001,162.03, 496.001,224.00c0.00,61.969-24.133,120.229-67.952,164.049c-9.372,9.373-9.372,24.569,0.00,33.941
c 9.372,9.372, 24.569,9.372, 33.941,0.00c 52.885-52.886, 82.011-123.20, 82.011-197.99c0.00-74.791-29.126-145.104-82.011-197.99
C 457.304,21.323, 451.162,18.98, 445.02,18.98zM 359.765,64.235c-6.143,0.00-12.284,2.343-16.971,7.029c-9.372,9.372-9.372,24.568,0.00,33.941
c 65.503,65.503, 65.503,172.085,0.00,237.588c-9.372,9.373-9.372,24.569,0.00,33.941c 9.372,9.371, 24.569,9.372, 33.941,0.00
C 417.532,335.938, 440.00,281.696, 440.00,224.00c0.00-57.695-22.468-111.938-63.265-152.735C 372.049,66.578, 365.907,64.235, 359.765,64.235zM 274.51,109.49c-6.143,0.00-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0.00,33.941
c 40.55,40.55, 40.55,106.529,0.00,147.078c-9.373,9.373-9.373,24.569,0.00,33.941c 9.373,9.372, 24.568,9.372, 33.941,0.00
c 59.265-59.265, 59.265-155.696,0.00-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z" horiz-adv-x="544" />
<glyph unicode="&#xe007;" d="M 256.00,480.00L 96.00,224.00L 256.00-32.00L 416.00,224.00 z" />
<glyph unicode="&#xe008;" d="M 0.00,480.00 L 687.158,480.00 L 687.158-35.207 L 0.00-35.207 L 0.00,480.00 z M 622.731,224.638 C 621.878,314.664 618.46,353.922 597.131,381.656 C 593.291,387.629 586.038,391.042 580.065,395.304 C 559.158,410.669 460.593,416.211 346.247,416.211 C 231.896,416.211 128.642,410.669 108.162,395.304 C 101.762,391.042 94.504,387.629 90.242,381.656 C 69.331,353.922 66.349,314.664 65.069,224.638 C 66.349,134.607 69.331,95.353 90.242,67.62 C 94.504,61.22 101.762,58.233 108.162,53.967 C 128.642,38.18 231.896,33.06 346.247,32.207 C 460.593,33.06 559.158,38.18 580.065,53.967 C 586.038,58.233 593.291,61.22 597.131,67.62 C 618.46,95.353 621.878,134.607 622.731,224.638 z M 331.179,247.952 C 325.389,318.401 287.924,359.905 220.901,359.905 C 159.672,359.905 111.54,304.689 111.54,215.965 C 111.54,126.859 155.405,71.267 227.907,71.267 C 285.79,71.267 326.306,113.916 332.701,184.742 L 263.55,184.742 C 260.81,158.468 249.843,138.285 226.69,138.285 C 190.136,138.285 183.435,174.462 183.435,212.92 C 183.435,265.854 198.665,292.886 223.951,292.886 C 246.492,292.886 260.81,276.511 262.939,247.952 L 331.179,247.952 z M 570.013,247.952 C 564.228,318.401 526.758,359.905 459.74,359.905 C 398.507,359.905 350.379,304.689 350.379,215.965 C 350.379,126.859 394.244,71.267 466.746,71.267 C 524.625,71.267 565.14,113.916 571.536,184.742 L 502.384,184.742 C 499.649,158.468 488.682,138.285 465.529,138.285 C 428.971,138.285 422.27,174.462 422.27,212.92 C 422.27,265.854 437.504,292.886 462.785,292.886 C 485.327,292.886 499.649,276.511 501.778,247.952 L 570.013,247.952 z " horiz-adv-x="687.1578947368421" />
<glyph unicode="&#xe009;" d="M 64.00,416.00L 448.00,416.00L 448.00,32.00L 64.00,32.00z" />
<glyph unicode="&#xe00a;" d="M 192.00,416.00A64.00,64.00 12780.00 1 1 320.00,416A64.00,64.00 12780.00 1 1 192.00,416zM 327.765,359.765A64.00,64.00 12780.00 1 1 455.765,359.765A64.00,64.00 12780.00 1 1 327.765,359.765zM 416.00,224.00A32.00,32.00 12780.00 1 1 480.00,224A32.00,32.00 12780.00 1 1 416.00,224zM 359.765,88.235A32.00,32.00 12780.00 1 1 423.765,88.23500000000001A32.00,32.00 12780.00 1 1 359.765,88.23500000000001zM 224.001,32.00A32.00,32.00 12780.00 1 1 288.001,32A32.00,32.00 12780.00 1 1 224.001,32zM 88.236,88.235A32.00,32.00 12780.00 1 1 152.236,88.23500000000001A32.00,32.00 12780.00 1 1 88.236,88.23500000000001zM 72.236,359.765A48.00,48.00 12780.00 1 1 168.236,359.765A48.00,48.00 12780.00 1 1 72.236,359.765zM 28.00,224.00A36.00,36.00 12780.00 1 1 100.00,224A36.00,36.00 12780.00 1 1 28.00,224z" />
<glyph unicode="&#xe00b;" d="M 224.00,192.00 L 224.00-16.00 L 144.00,64.00 L 48.00-32.00 L 0.00,16.00 L 96.00,112.00 L 16.00,192.00 ZM 512.00,432.00 L 416.00,336.00 L 496.00,256.00 L 288.00,256.00 L 288.00,464.00 L 368.00,384.00 L 464.00,480.00 Z" />
<glyph unicode="&#xe00c;" d="M 256.00,448.00 C 397.385,448.00 512.00,354.875 512.00,240.00 C 512.00,125.124 397.385,32.00 256.00,32.00 C 242.422,32.00 229.095,32.867 216.088,34.522 C 161.099-20.467 95.463-30.328 32.00-31.776 L 32.00-18.318 C 66.268-1.529 96.00,29.052 96.00,64.00 C 96.00,68.877 95.621,73.665 94.918,78.348 C 37.02,116.48 0.00,174.725 0.00,240.00 C 0.00,354.875 114.615,448.00 256.00,448.00 Z" />
<glyph unicode="&#x20;" horiz-adv-x="256" />
<glyph class="hidden" unicode="&#xf000;" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
</font></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

BIN
src/css/font/vjs.ttf Normal file
View File

Binary file not shown.

BIN
src/css/font/vjs.woff Normal file
View File

Binary file not shown.

730
src/css/video-js.css Normal file
View File

@ -0,0 +1,730 @@
/*
VideoJS Default Styles (http://videojs.com)
Version GENERATED_AT_BUILD
*/
/*
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;
/* Allow poster to be vertially aligned. */
vertical-align: middle;
/* display: table-cell; */ /*This works in Safari but not Firefox.*/
}
/* 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%;
}
/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when checking fullScreenEnabled. */
.video-js:-moz-full-screen { position: absolute; }
/* 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) */
}
.video-js:-webkit-full-screen {
width: 100% !important; height: 100% !important;
}
/* Poster Styles */
.vjs-poster {
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
cursor: pointer;
height: 100%;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
.vjs-poster img {
display: block;
margin: 0 auto;
max-height: 100%;
padding: 0;
width: 100%;
}
/* Text Track Styles */
/* Overall track holder for both captions and subtitles */
.video-js .vjs-text-track-display {
text-align: center;
position: absolute;
bottom: 4em;
left: 1em; /* Leave padding on left and right */
right: 1em;
font-family: Arial, sans-serif;
}
/* Individual tracks */
.video-js .vjs-text-track {
display: none;
font-size: 1.4em;
text-align: center;
margin-bottom: 0.1em;
/* Transparent black background, or fallback to all black (oldIE) */
background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50);
}
.video-js .vjs-subtitles { color: #fff; } /* Subtitles are white */
.video-js .vjs-captions { color: #fc6; } /* Captions are yellow */
.vjs-tt-cue { display: block; }
/* Fading sytles, used to fade control bar. */
.vjs-fade-in {
display: block !important;
visibility: visible; /* Needed to make sure things hide in older browsers too. */
opacity: 1;
-webkit-transition: visibility 0.1s, opacity 0.1s;
-moz-transition: visibility 0.1s, opacity 0.1s;
-ms-transition: visibility 0.1s, opacity 0.1s;
-o-transition: visibility 0.1s, opacity 0.1s;
transition: visibility 0.1s, opacity 0.1s;
}
.vjs-fade-out {
display: block !important;
visibility: hidden;
opacity: 0;
-webkit-transition: visibility 1.5s, opacity 1.5s;
-moz-transition: visibility 1.5s, opacity 1.5s;
-ms-transition: visibility 1.5s, opacity 1.5s;
-o-transition: visibility 1.5s, opacity 1.5s;
transition: visibility 1.5s, opacity 1.5s;
/* Wait a moment before fading out the control bar */
-webkit-transition-delay: 2s;
-moz-transition-delay: 2s;
-ms-transition-delay: 2s;
-o-transition-delay: 2s;
transition-delay: 2s;
}
/* Hide disabled or unsupported controls */
.vjs-default-skin .vjs-hidden { display: none; }
.vjs-lock-showing {
display: block !important;
opacity: 1;
visibility: visible;
}
/* DEFAULT SKIN (override in another file to create new skins)
================================================================================
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. */
/* Base UI Component Classes
-------------------------------------------------------------------------------- */
@font-face{
font-family: 'VideoJS';
src: url('font/vjs.eot');
src: url('font/vjs.eot') format('embedded-opentype'),
url('font/vjs.woff') format('woff'),
url('font/vjs.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.vjs-default-skin {
color: #ccc;
}
/* Slider - used for Volume bar and Seek bar */
.vjs-default-skin .vjs-slider {
outline: 0; /* Replace browser focus hightlight with handle highlight */
position: relative;
cursor: pointer;
padding: 0;
background: rgb(50, 50, 50); /* IE8- Fallback */
background: rgba(100, 100, 100, 0.5);
}
.vjs-default-skin .vjs-slider:focus {
background: rgb(70, 70, 70); /* IE8- Fallback */
background: rgba(100, 100, 100, 0.70);
-webkit-box-shadow: 0 0 2em rgba(255, 255, 255, 1);
-moz-box-shadow: 0 0 2em rgba(255, 255, 255, 1);
box-shadow: 0 0 2em rgba(255, 255, 255, 1);
}
.vjs-default-skin .vjs-slider-handle {
position: absolute;
/* Needed for IE6 */
left: 0;
top: 0;
}
.vjs-default-skin .vjs-slider-handle:before {
/*content: "\f111";*/ /* Circle icon = f111 */
content: "\e009"; /* Square icon */
font-family: VideoJS;
font-size: 1em;
line-height: 1;
text-align: center;
text-shadow: 0em 0em 1em #fff;
position: absolute;
top: 0;
left: 0;
/* Rotate the square icon to make a diamond */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
/* Control Bar
-------------------------------------------------------------------------------- */
/* The default control bar. Created by controls.js */
.vjs-default-skin .vjs-control-bar {
display: none; /* Start hidden */
position: absolute;
/* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
bottom: 0;
/* 100% width of player div */
left: 0;
right: 0;
/* Controls are absolutely position, so no padding necessary */
padding: 0;
margin: 0;
/* Height includes any margin you want above or below control items */
height: 3.0em;
background-color: rgb(0, 0, 0);
/* Slight blue so it can be seen more easily on black. */
background-color: rgba(7, 40, 50, 0.7);
/* Default font settings */
font-style: normal;
font-weight: normal;
font-family: Arial, sans-serif;
}
/* General styles for individual controls. */
.vjs-default-skin .vjs-control {
outline: none;
position: relative;
float: left;
text-align: center;
margin: 0;
padding: 0;
height: 3.0em;
width: 4em;
}
/* FontAwsome button icons */
.vjs-default-skin .vjs-control:before {
font-family: VideoJS;
font-size: 1.5em;
line-height: 2;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
/* Replacement for focus outline */
.vjs-default-skin .vjs-control:focus:before,
.vjs-default-skin .vjs-control:hover:before {
text-shadow: 0em 0em 1em rgba(255, 255, 255, 1);
}
.vjs-default-skin .vjs-control:focus { /* outline: 0; */ /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 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;
}
.vjs-default-skin .vjs-play-control:before {
content: "\e001"; /* Play Icon */
}
.vjs-default-skin.vjs-playing .vjs-play-control:before {
content: "\e002"; /* Pause Icon */
}
/* 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,
.vjs-default-skin .vjs-volume-menu-button {
cursor: pointer;
float: right;
}
.vjs-default-skin .vjs-mute-control:before,
.vjs-default-skin .vjs-volume-menu-button:before {
content: "\e006"; /* Full volume */
}
.vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
content: "\e003"; /* No volume */
}
.vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
content: "\e004"; /* Half volume */
}
.vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
content: "\e005"; /* Full volume */
}
.vjs-default-skin .vjs-volume-control {
width: 5em;
float: right;
}
.vjs-default-skin .vjs-volume-bar {
width: 5em;
height: 0.6em;
margin: 1.1em auto 0;
}
.vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
height: 2.9em;
}
.vjs-default-skin .vjs-volume-level {
position: absolute;
top: 0;
left: 0;
height: 0.5em;
background: #66A8CC
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC)
-50% 0 repeat;
}
.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
width: 0.5em;
height: 0.5em;
}
.vjs-default-skin .vjs-volume-handle:before {
font-size: 0.9em;
top: -0.2em;
left: -0.2em;
width: 1em;
height: 1em;
}
.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
width: 6em;
left: -4em;
}
/*.vjs-default-skin .vjs-menu-button .vjs-volume-control {
height: 1.5em;
}*/
/* Progress
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-progress-control {
position: absolute;
left: 0;
right: 0;
width: auto;
font-size: 0.3em;
height: 1em;
/* Set above the rest of the controls. */
top: -1em;
/* Shrink the bar slower than it grows. */
-webkit-transition: top 0.4s, height 0.4s, font-size 0.4s, -webkit-transform 0.4s;
-moz-transition: top 0.4s, height 0.4s, font-size 0.4s, -moz-transform 0.4s;
-o-transition: top 0.4s, height 0.4s, font-size 0.4s, -o-transform 0.4s;
transition: top 0.4s, height 0.4s, font-size 0.4s, transform 0.4s;
}
/* On hover, make the progress bar grow to something that's more clickable.
This simply changes the overall font for the progress bar, and this
updates both the em-based widths and heights, as wells as the icon font */
.vjs-default-skin:hover .vjs-progress-control {
font-size: .9em;
/* Even though we're not changing the top/height, we need to include them in
the transition so they're handled correctly. */
-webkit-transition: top 0.2s, height 0.2s, font-size 0.2s, -webkit-transform 0.2s;
-moz-transition: top 0.2s, height 0.2s, font-size 0.2s, -moz-transform 0.2s;
-o-transition: top 0.2s, height 0.2s, font-size 0.2s, -o-transform 0.2s;
transition: top 0.2s, height 0.2s, font-size 0.2s, transform 0.2s;
}
/* Box containing play and load progresses. Also acts as seek scrubber. */
.vjs-default-skin .vjs-progress-holder {
/* Placement within the progress control item */
height: 100%;
}
/* Progress Bars */
.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
.vjs-default-skin .vjs-progress-holder .vjs-load-progress {
position: absolute;
display: block;
height: 100%;
margin: 0;
padding: 0;
/* Needed for IE6 */
left: 0;
top: 0;
}
.vjs-default-skin .vjs-play-progress {
/*
Using a data URI to create the white diagonal lines with a transparent
background. Surprising works in IE8.
Created using http://www.patternify.com
Changing the first color value will change the bar color.
Also using a paralax effect to make the lines move backwards.
The -50% left position makes that happen.
*/
background: #66A8CC
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC)
-50% 0 repeat;
}
.vjs-default-skin .vjs-load-progress {
background: rgb(100, 100, 100); /* IE8- Fallback */
background: rgba(255, 255, 255, 0.4);
}
.vjs-default-skin .vjs-seek-handle {
width: 1.5em;
height: 100%;
}
.vjs-default-skin .vjs-seek-handle:before {
padding-top: 0.1em; /* Minor adjustment */
}
/* Time Display
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-time-controls {
font-size: 1em;
/* Align vertically by making the line height the same as the control bar */
line-height: 3em;
}
.vjs-default-skin .vjs-current-time { float: left; }
.vjs-default-skin .vjs-duration { float: left; }
/* Remaining time is in the HTML, but not included in default design */
.vjs-default-skin .vjs-remaining-time { display: none; float: left; }
.vjs-time-divider { float: left; line-height: 3em; }
/* Fullscreen
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-fullscreen-control {
width: 3.8em;
cursor: pointer;
float: right;
}
.vjs-default-skin .vjs-fullscreen-control:before {
content: "\e000"; /* Enter full screen */
}
.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
content: "\e00b"; /* Exit full screen */
}
/* Big Play Button (at start)
---------------------------------------------------------*/
.vjs-default-skin .vjs-big-play-button {
display: block;
z-index: 2;
position: absolute;
top: 2em;
left: 2em;
width: 12.0em;
height: 8.0em;
margin: 0;
text-align: center;
vertical-align: middle;
cursor: pointer;
opacity: 1;
/* Need a slightly gray bg so it can be seen on black backgrounds */
background-color: rgb(40, 40, 40);
background-color: rgba(7, 40, 50, 0.7);
border: 0.3em solid rgb(50, 50, 50);
border-color: rgba(255, 255, 255, 0.25);
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
-webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
-moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
-webkit-transition: border 0.4s, -webkit-box-shadow 0.4s, -webkit-transform 0.4s;
-moz-transition: border 0.4s, -moz-box-shadow 0.4s, -moz-transform 0.4s;
-o-transition: border 0.4s, -o-box-shadow 0.4s, -o-transform 0.4s;
transition: border 0.4s, box-shadow 0.4s, transform 0.4s;
}
.vjs-default-skin:hover .vjs-big-play-button,
.vjs-default-skin .vjs-big-play-button:focus {
outline: 0;
border-color: rgb(255, 255, 255);
border-color: rgba(255, 255, 255, 1);
/* IE8 needs a non-glow hover state */
background-color: rgb(80, 80, 80);
background-color: rgba(50, 50, 50, 0.75);
-webkit-box-shadow: 0 0 3em #fff;
-moz-box-shadow: 0 0 3em #fff;
box-shadow: 0 0 3em #fff;
-webkit-transition: border 0s, -webkit-box-shadow 0s, -webkit-transform 0s;
-moz-transition: border 0s, -moz-box-shadow 0s, -moz-transform 0s;
-o-transition: border 0s, -o-box-shadow 0s, -o-transform 0s;
transition: border 0s, box-shadow 0s, transform 0s;
}
.vjs-default-skin .vjs-big-play-button:before {
content: "\e001"; /* Play icon */
font-family: VideoJS;
font-size: 3em;
line-height: 2.66;
text-shadow: 0.05em 0.05em 0.1em #000;
text-align: center; /* Needed for IE8 */
position: absolute;
left: 0;
width: 100%;
height: 100%;
}
/* Loading Spinner
---------------------------------------------------------*/
.vjs-loading-spinner {
display: none;
position: absolute;
top: 50%;
left: 50%;
font-size: 5em;
line-height: 1;
width: 1em;
height: 1em;
margin-left: -0.5em;
margin-top: -0.5em;
opacity: 0.75;
-webkit-animation: spin 1.5s infinite linear;
-moz-animation: spin 1.5s infinite linear;
-o-animation: spin 1.5s infinite linear;
animation: spin 1.5s infinite linear;
}
.vjs-default-skin .vjs-loading-spinner:before {
content: "\e00a"; /* Loading spinner icon */
font-family: VideoJS;
position: absolute;
width: 1em;
height: 1em;
text-align: center;
text-shadow: 0em 0em 0.1em #000;
}
/* Add a gradient to the spinner by overlaying another copy.
Text gradient plus a text shadow doesn't work
and `background-clip: text` only works in Webkit. */
.vjs-default-skin .vjs-loading-spinner:after {
content: "\e00a"; /* Loading spinner icon */
font-family: VideoJS;
position: absolute;
width: 1em;
height: 1em;
text-align: center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); }
}
@-o-keyframes spin {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(359deg); }
}
@-ms-keyframes spin {
0% { -ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(359deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
/* Menu Buttons (Captions/Subtitles/etc.)
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-menu-button {
float: right;
cursor: pointer;
}
.vjs-default-skin .vjs-menu {
display: none;
position: absolute;
bottom: 0;
left: 0em; /* (Width of vjs-menu - width of button) / 2 */
width: 0em;
height: 0em;
margin-bottom: 3em;
border-left: 2em solid transparent;
border-right: 2em solid transparent;
border-top: 1.55em solid rgb(0, 0, 0); /* Same top as ul bottom */
border-top-color: rgba(7, 40, 50, 0.5); /* Same as ul background */
}
/* Button Pop-up Menu */
.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
display: block;
padding: 0; margin: 0;
position: absolute;
width: 10em;
bottom: 1.5em; /* Same bottom as vjs-menu border-top */
max-height: 15em;
overflow: auto;
left: -5em; /* Width of menu - width of button / 2 */
background-color: rgb(0, 0, 0);
background-color: rgba(7, 40, 50, 0.7);
-webkit-box-shadow: -20px -20px 0px rgba(255, 255, 255, 0.5);
-moz-box-shadow: 0 0 1em rgba(255, 255, 255, 0.5);
box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
}
/*.vjs-default-skin .vjs-menu-button:focus ul,*/ /* This is not needed because keyboard accessibility for the caption button is not handled with the focus any more. */
.vjs-default-skin .vjs-menu-button:hover .vjs-menu {
display: block;
}
.vjs-default-skin .vjs-menu-button ul li {
list-style: none;
margin: 0;
padding: 0.3em 0 0.3em 0;
line-height: 1.4em;
font-size: 1.2em;
font-weight: normal;
text-align: center;
text-transform: lowercase;
}
.vjs-default-skin .vjs-menu-button ul li.vjs-selected {
background-color: #000;
}
.vjs-default-skin .vjs-menu-button ul li:focus,
.vjs-default-skin .vjs-menu-button ul li:hover,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.75);
color: #111;
outline: 0;
-webkit-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
-moz-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
box-shadow: 0 0 1em rgba(255, 255, 255, 1);
}
.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
text-align: center;
text-transform: uppercase;
font-size: 1em;
line-height: 2em;
padding: 0;
margin: 0 0 0.3em 0;
font-weight: bold;
cursor: default;
}
/* Subtitles Button */
.vjs-default-skin .vjs-subtitles-button:before { content: "\e00c"; }
/* There's unfortunately no CC button in FontAwesome, so we need
to manually create one. Please +1 the fontawesome request.
https://github.com/FortAwesome/Font-Awesome/issues/968 */
.vjs-default-skin .vjs-captions-button {
font-size: 1em; /* Font icons are 1.5em */
}
.vjs-default-skin .vjs-captions-button:before {
content: "\e008";
font-family: VideoJS;
font-size: 1.5em;
line-height: 2;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
text-shadow: none;
}
/* Replacement for focus outline */
.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
.vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
-webkit-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
-moz-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
box-shadow: 0 0 1em rgba(255, 255, 255, 1);
}

40
src/css/video-js.font.dev.svg Normal file
View File

@ -0,0 +1,40 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
This is a custom SVG font generated by IcoMoon.
<iconset grid="16"></iconset>
</metadata>
<defs>
<font id="VideoJS" horiz-adv-x="512" >
<font-face units-per-em="512" ascent="480" descent="-32" />
<missing-glyph horiz-adv-x="512" />
<glyph unicode="&#xe000;" d="M 512.00,480.00 L 512.00,272.00 L 432.00,352.00 L 336.00,256.00 L 288.00,304.00 L 384.00,400.00 L 304.00,480.00 ZM 224.00,144.00 L 128.00,48.00 L 208.00-32.00 L 0.00-32.00 L 0.00,176.00 L 80.00,96.00 L 176.00,192.00 Z" data-tags="expand, enlarge, maximize, fullscreen" />
<glyph unicode="&#xe001;" d="M 96.00,416.00L 416.00,224.00L 96.00,32.00 z" data-tags="play, media control, audio" />
<glyph unicode="&#xe002;" d="M 64.00,416.00L 224.00,416.00L 224.00,32.00L 64.00,32.00zM 288.00,416.00L 448.00,416.00L 448.00,32.00L 288.00,32.00z" data-tags="pause, media control, audio" />
<glyph unicode="&#xe003;" d="M 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z" data-tags="volume-mute, speaker, media control, audio, mute" />
<glyph unicode="&#xe004;" d="M 274.51,109.49c-6.143,0.00-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0.00,33.941
c 40.55,40.55, 40.55,106.529,0.00,147.078c-9.373,9.373-9.373,24.569,0.00,33.941c 9.373,9.372, 24.568,9.372, 33.941,0.00
c 59.265-59.265, 59.265-155.696,0.00-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z" data-tags="volume-low, speaker, media control, audio" />
<glyph unicode="&#xe005;" d="M 359.765,64.235c-6.143,0.00-12.284,2.343-16.971,7.029c-9.372,9.372-9.372,24.568,0.00,33.941
c 65.503,65.503, 65.503,172.085,0.00,237.588c-9.372,9.373-9.372,24.569,0.00,33.941c 9.372,9.371, 24.569,9.372, 33.941,0.00
C 417.532,335.938, 440.00,281.696, 440.00,224.00c0.00-57.695-22.468-111.938-63.265-152.735C 372.049,66.578, 365.907,64.235, 359.765,64.235zM 274.51,109.49c-6.143,0.00-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0.00,33.941
c 40.55,40.55, 40.55,106.529,0.00,147.078c-9.373,9.373-9.373,24.569,0.00,33.941c 9.373,9.372, 24.568,9.372, 33.941,0.00
c 59.265-59.265, 59.265-155.696,0.00-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z" data-tags="volume-medium, speaker, media control, audio" />
<glyph unicode="&#xe006;" d="M 445.02,18.98c-6.143,0.00-12.284,2.343-16.971,7.029c-9.372,9.373-9.372,24.568,0.00,33.941
C 471.868,103.771, 496.001,162.03, 496.001,224.00c0.00,61.969-24.133,120.229-67.952,164.049c-9.372,9.373-9.372,24.569,0.00,33.941
c 9.372,9.372, 24.569,9.372, 33.941,0.00c 52.885-52.886, 82.011-123.20, 82.011-197.99c0.00-74.791-29.126-145.104-82.011-197.99
C 457.304,21.323, 451.162,18.98, 445.02,18.98zM 359.765,64.235c-6.143,0.00-12.284,2.343-16.971,7.029c-9.372,9.372-9.372,24.568,0.00,33.941
c 65.503,65.503, 65.503,172.085,0.00,237.588c-9.372,9.373-9.372,24.569,0.00,33.941c 9.372,9.371, 24.569,9.372, 33.941,0.00
C 417.532,335.938, 440.00,281.696, 440.00,224.00c0.00-57.695-22.468-111.938-63.265-152.735C 372.049,66.578, 365.907,64.235, 359.765,64.235zM 274.51,109.49c-6.143,0.00-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0.00,33.941
c 40.55,40.55, 40.55,106.529,0.00,147.078c-9.373,9.373-9.373,24.569,0.00,33.941c 9.373,9.372, 24.568,9.372, 33.941,0.00
c 59.265-59.265, 59.265-155.696,0.00-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z" horiz-adv-x="544" data-tags="volume-high, speaker, media control, audio" />
<glyph unicode="&#xe007;" d="M 256.00,480.00L 96.00,224.00L 256.00-32.00L 416.00,224.00 z" data-tags="diamonds, bet, game, gamble, cards" />
<glyph unicode="&#xe008;" d="M 0.00,480.00 L 687.158,480.00 L 687.158-35.207 L 0.00-35.207 L 0.00,480.00 z M 622.731,224.638 C 621.878,314.664 618.46,353.922 597.131,381.656 C 593.291,387.629 586.038,391.042 580.065,395.304 C 559.158,410.669 460.593,416.211 346.247,416.211 C 231.896,416.211 128.642,410.669 108.162,395.304 C 101.762,391.042 94.504,387.629 90.242,381.656 C 69.331,353.922 66.349,314.664 65.069,224.638 C 66.349,134.607 69.331,95.353 90.242,67.62 C 94.504,61.22 101.762,58.233 108.162,53.967 C 128.642,38.18 231.896,33.06 346.247,32.207 C 460.593,33.06 559.158,38.18 580.065,53.967 C 586.038,58.233 593.291,61.22 597.131,67.62 C 618.46,95.353 621.878,134.607 622.731,224.638 z M 331.179,247.952 C 325.389,318.401 287.924,359.905 220.901,359.905 C 159.672,359.905 111.54,304.689 111.54,215.965 C 111.54,126.859 155.405,71.267 227.907,71.267 C 285.79,71.267 326.306,113.916 332.701,184.742 L 263.55,184.742 C 260.81,158.468 249.843,138.285 226.69,138.285 C 190.136,138.285 183.435,174.462 183.435,212.92 C 183.435,265.854 198.665,292.886 223.951,292.886 C 246.492,292.886 260.81,276.511 262.939,247.952 L 331.179,247.952 z M 570.013,247.952 C 564.228,318.401 526.758,359.905 459.74,359.905 C 398.507,359.905 350.379,304.689 350.379,215.965 C 350.379,126.859 394.244,71.267 466.746,71.267 C 524.625,71.267 565.14,113.916 571.536,184.742 L 502.384,184.742 C 499.649,158.468 488.682,138.285 465.529,138.285 C 428.971,138.285 422.27,174.462 422.27,212.92 C 422.27,265.854 437.504,292.886 462.785,292.886 C 485.327,292.886 499.649,276.511 501.778,247.952 L 570.013,247.952 z " horiz-adv-x="687.1578947368421" data-tags="Closed_captioning_symbol" />
<glyph unicode="&#xe009;" d="M 64.00,416.00L 448.00,416.00L 448.00,32.00L 64.00,32.00z" data-tags="stop, media control, audio, square" />
<glyph unicode="&#xe00a;" d="M 192.00,416.00A64.00,64.00 12780.00 1 1 320.00,416A64.00,64.00 12780.00 1 1 192.00,416zM 327.765,359.765A64.00,64.00 12780.00 1 1 455.765,359.765A64.00,64.00 12780.00 1 1 327.765,359.765zM 416.00,224.00A32.00,32.00 12780.00 1 1 480.00,224A32.00,32.00 12780.00 1 1 416.00,224zM 359.765,88.235A32.00,32.00 12780.00 1 1 423.765,88.23500000000001A32.00,32.00 12780.00 1 1 359.765,88.23500000000001zM 224.001,32.00A32.00,32.00 12780.00 1 1 288.001,32A32.00,32.00 12780.00 1 1 224.001,32zM 88.236,88.235A32.00,32.00 12780.00 1 1 152.236,88.23500000000001A32.00,32.00 12780.00 1 1 88.236,88.23500000000001zM 72.236,359.765A48.00,48.00 12780.00 1 1 168.236,359.765A48.00,48.00 12780.00 1 1 72.236,359.765zM 28.00,224.00A36.00,36.00 12780.00 1 1 100.00,224A36.00,36.00 12780.00 1 1 28.00,224z" data-tags="spinner, loading, busy, wait, wheel" />
<glyph unicode="&#xe00b;" d="M 224.00,192.00 L 224.00-16.00 L 144.00,64.00 L 48.00-32.00 L 0.00,16.00 L 96.00,112.00 L 16.00,192.00 ZM 512.00,432.00 L 416.00,336.00 L 496.00,256.00 L 288.00,256.00 L 288.00,464.00 L 368.00,384.00 L 464.00,480.00 Z" data-tags="contract, minimize, shrink, collapse" />
<glyph unicode="&#xe00c;" d="M 256.00,448.00 C 397.385,448.00 512.00,354.875 512.00,240.00 C 512.00,125.124 397.385,32.00 256.00,32.00 C 242.422,32.00 229.095,32.867 216.088,34.522 C 161.099-20.467 95.463-30.328 32.00-31.776 L 32.00-18.318 C 66.268-1.529 96.00,29.052 96.00,64.00 C 96.00,68.877 95.621,73.665 94.918,78.348 C 37.02,116.48 0.00,174.725 0.00,240.00 C 0.00,354.875 114.615,448.00 256.00,448.00 Z" data-tags="bubble, comment, chat, talk" />
<glyph unicode="&#x20;" horiz-adv-x="256" />
<glyph class="hidden" unicode="&#xf000;" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
</font></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
src/css/video-js.fw.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
src/css/video-js.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

217
src/ecma.js
View File

@ -1,217 +0,0 @@
// ECMA-262 is the standard for javascript.
// The following methods are impelemented EXACTLY as described in the standard (according to Mozilla Docs), and do not override the default method if one exists.
// This may conflict with other libraries that modify the array prototype, but those libs should update to use the standard.
// [].indexOf
// https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/indexOf
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {
"use strict";
if (this === void 0 || this === null) {
throw new TypeError();
}
var t = Object(this);
var len = t.length >>> 0;
if (len === 0) {
return -1;
}
var n = 0;
if (arguments.length > 0) {
n = Number(arguments[1]);
if (n !== n) { // shortcut for verifying if it's NaN
n = 0;
} else if (n !== 0 && n !== (1 / 0) && n !== -(1 / 0)) {
n = (n > 0 || -1) * Math.floor(Math.abs(n));
}
}
if (n >= len) {
return -1;
}
var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
for (; k < len; k++) {
if (k in t && t[k] === searchElement) {
return k;
}
}
return -1;
}
}
// NOT NEEDED YET
// [].lastIndexOf
// https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/lastIndexOf
// if (!Array.prototype.lastIndexOf)
// {
// Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/)
// {
// "use strict";
//
// if (this === void 0 || this === null)
// throw new TypeError();
//
// var t = Object(this);
// var len = t.length >>> 0;
// if (len === 0)
// return -1;
//
// var n = len;
// if (arguments.length > 1)
// {
// n = Number(arguments[1]);
// if (n !== n)
// n = 0;
// else if (n !== 0 && n !== (1 / 0) && n !== -(1 / 0))
// n = (n > 0 || -1) * Math.floor(Math.abs(n));
// }
//
// var k = n >= 0
// ? Math.min(n, len - 1)
// : len - Math.abs(n);
//
// for (; k >= 0; k--)
// {
// if (k in t && t[k] === searchElement)
// return k;
// }
// return -1;
// };
// }
// NOT NEEDED YET
// Array forEach per ECMA standard https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/array/foreach
// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: http://es5.github.com/#x15.4.4.18
// if ( !Array.prototype.forEach ) {
//
// Array.prototype.forEach = function( callback, thisArg ) {
//
// var T, k;
//
// if ( this == null ) {
// throw new TypeError( " this is null or not defined" );
// }
//
// // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
// var O = Object(this);
//
// // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
// // 3. Let len be ToUint32(lenValue).
// var len = O.length >>> 0;
//
// // 4. If IsCallable(callback) is false, throw a TypeError exception.
// // See: http://es5.github.com/#x9.11
// if ( {}.toString.call(callback) != "[object Function]" ) {
// throw new TypeError( callback + " is not a function" );
// }
//
// // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
// if ( thisArg ) {
// T = thisArg;
// }
//
// // 6. Let k be 0
// k = 0;
//
// // 7. Repeat, while k < len
// while( k < len ) {
//
// var kValue;
//
// // a. Let Pk be ToString(k).
// // This is implicit for LHS operands of the in operator
// // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
// // This step can be combined with c
// // c. If kPresent is true, then
// if ( k in O ) {
//
// // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
// kValue = O[ Pk ];
//
// // ii. Call the Call internal method of callback with T as the this value and
// // argument list containing kValue, k, and O.
// callback.call( T, kValue, k, O );
// }
// // d. Increase k by 1.
// k++;
// }
// // 8. return undefined
// };
// }
// NOT NEEDED YET
// https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/map
// Production steps of ECMA-262, Edition 5, 15.4.4.19
// Reference: http://es5.github.com/#x15.4.4.19
// if (!Array.prototype.map) {
// Array.prototype.map = function(callback, thisArg) {
//
// var T, A, k;
//
// if (this == null) {
// throw new TypeError(" this is null or not defined");
// }
//
// // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
// var O = Object(this);
//
// // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
// // 3. Let len be ToUint32(lenValue).
// var len = O.length >>> 0;
//
// // 4. If IsCallable(callback) is false, throw a TypeError exception.
// // See: http://es5.github.com/#x9.11
// if ({}.toString.call(callback) != "[object Function]") {
// throw new TypeError(callback + " is not a function");
// }
//
// // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
// if (thisArg) {
// T = thisArg;
// }
//
// // 6. Let A be a new array created as if by the expression new Array(len) where Array is
// // the standard built-in constructor with that name and len is the value of len.
// A = new Array(len);
//
// // 7. Let k be 0
// k = 0;
//
// // 8. Repeat, while k < len
// while(k < len) {
//
// var kValue, mappedValue;
//
// // a. Let Pk be ToString(k).
// // This is implicit for LHS operands of the in operator
// // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
// // This step can be combined with c
// // c. If kPresent is true, then
// if (k in O) {
//
// // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
// kValue = O[ k ];
//
// // ii. Let mappedValue be the result of calling the Call internal method of callback
// // with T as the this value and argument list containing kValue, k, and O.
// mappedValue = callback.call(T, kValue, k, O);
//
// // iii. Call the DefineOwnProperty internal method of A with arguments
// // Pk, Property Descriptor {Value: mappedValue, Writable: true, Enumerable: true, Configurable: true},
// // and false.
//
// // In browsers that support Object.defineProperty, use the following:
// // Object.defineProperty(A, Pk, { value: mappedValue, writable: true, enumerable: true, configurable: true });
//
// // For best browser support, use the following:
// A[ k ] = mappedValue;
// }
// // d. Increase k by 1.
// k++;
// }
//
// // 9. return A
// return A;
// };
// }

302
src/events.js
View File

@ -1,302 +0,0 @@
// 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
// robust as jquery's, so there's probably some differences.
//
// When you add an event listener using _V_.addEvent,
// it stores the handler function in seperate cache object,
// and adds a generic handler to the element's event,
// along with a unique id (guid) to the element.
_V_.extend({
// Add an event listener to element
// It stores the handler function in a separate cache object
// and adds a generic handler to the element's event,
// along with a unique id (guid) to the element.
addEvent: function(elem, type, fn){
var data = _V_.getData(elem), handlers;
// We only need to generate one handler per element
if (data && !data.handler) {
// Our new meta-handler that fixes the event object and the context
data.handler = function(event){
event = _V_.fixEvent(event);
var handlers = _V_.getData(elem).events[event.type];
// Go through and call all the real bound handlers
if (handlers) {
// Copy handlers so if handlers are added/removed during the process it doesn't throw everything off.
var handlersCopy = [];
_V_.each(handlers, function(handler, i){
handlersCopy[i] = handler;
})
for (var i = 0, l = handlersCopy.length; i < l; i++) {
handlersCopy[i].call(elem, event);
}
}
};
}
// We need a place to store all our event data
if (!data.events) { data.events = {}; }
// And a place to store the handlers for this event type
handlers = data.events[type];
if (!handlers) {
handlers = data.events[ type ] = [];
// Attach our meta-handler to the element, since one doesn't exist
if (document.addEventListener) {
elem.addEventListener(type, data.handler, false);
} else if (document.attachEvent) {
elem.attachEvent("on" + type, data.handler);
}
}
if (!fn.guid) { fn.guid = _V_.guid++; }
handlers.push(fn);
},
removeEvent: function(elem, type, fn) {
var data = _V_.getData(elem), handlers;
// If no events exist, nothing to unbind
if (!data.events) { return; }
// Are we removing all bound events?
if (!type) {
for (type in data.events) {
_V_.cleanUpEvents(elem, type);
}
return;
}
// And a place to store the handlers for this event type
handlers = data.events[type];
// If no handlers exist, nothing to unbind
if (!handlers) { return; }
// See if we're only removing a single handler
if (fn && fn.guid) {
for (var i = 0; i < handlers.length; i++) {
// We found a match (don't stop here, there could be a couple bound)
if (handlers[i].guid === fn.guid) {
// Remove the handler from the array of handlers
handlers.splice(i--, 1);
}
}
}
_V_.cleanUpEvents(elem, type);
},
cleanUpEvents: function(elem, type) {
var data = _V_.getData(elem);
// Remove the events of a particular type if there are none left
if (data.events[type].length === 0) {
delete data.events[type];
// Remove the meta-handler from the element
if (document.removeEventListener) {
elem.removeEventListener(type, data.handler, false);
} else if (document.detachEvent) {
elem.detachEvent("on" + type, data.handler);
}
}
// Remove the events object if there are no types left
if (_V_.isEmpty(data.events)) {
delete data.events;
delete data.handler;
}
// Finally remove the expando if there is no data left
if (_V_.isEmpty(data)) {
_V_.removeData(elem);
}
},
fixEvent: function(event) {
if (event[_V_.expando]) { return event; }
// store a copy of the original event object
// and "clone" to set read-only properties
var originalEvent = event;
event = new _V_.Event(originalEvent);
for ( var i = _V_.Event.props.length, prop; i; ) {
prop = _V_.Event.props[ --i ];
event[prop] = originalEvent[prop];
}
// Fix target property, if necessary
if (!event.target) { event.target = event.srcElement || document; }
// check if target is a textnode (safari)
if (event.target.nodeType === 3) { event.target = event.target.parentNode; }
// Add relatedTarget, if necessary
if (!event.relatedTarget && event.fromElement) {
event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
}
// Calculate pageX/Y if missing and clientX/Y available
if ( event.pageX == null && event.clientX != null ) {
var eventDocument = event.target.ownerDocument || document,
doc = eventDocument.documentElement,
body = eventDocument.body;
event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
}
// Add which for key events
if (event.which == null && (event.charCode != null || event.keyCode != null)) {
event.which = event.charCode != null ? event.charCode : event.keyCode;
}
// Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs)
if ( !event.metaKey && event.ctrlKey ) {
event.metaKey = event.ctrlKey;
}
// Add which for click: 1 === left; 2 === middle; 3 === right
// Note: button is not normalized, so don't use it
if ( !event.which && event.button !== undefined ) {
event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
}
return event;
},
triggerEvent: function(elem, event) {
var data = _V_.getData(elem),
parent = elem.parentNode || elem.ownerDocument,
type = event.type || event,
handler;
if (data) { handler = data.handler }
// Added in attion to book. Book code was broke.
event = typeof event === "object" ?
event[_V_.expando] ?
event :
new _V_.Event(type, event) :
new _V_.Event(type);
event.type = type;
if (handler) {
handler.call(elem, event);
}
// Clean up the event in case it is being reused
event.result = undefined;
event.target = elem;
// Bubble the event up the tree to the document,
// Unless it's been explicitly stopped
// if (parent && !event.isPropagationStopped()) {
// _V_.triggerEvent(parent, event);
//
// // We're at the top document so trigger the default action
// } else if (!parent && !event.isDefaultPrevented()) {
// // log(type);
// var targetData = _V_.getData(event.target);
// // log(targetData);
// var targetHandler = targetData.handler;
// // log("2");
// if (event.target[event.type]) {
// // Temporarily disable the bound handler,
// // don't want to execute it twice
// if (targetHandler) {
// targetData.handler = function(){};
// }
//
// // Trigger the native event (click, focus, blur)
// event.target[event.type]();
//
// // Restore the handler
// if (targetHandler) {
// targetData.handler = targetHandler;
// }
// }
// }
},
one: function(elem, type, fn) {
_V_.addEvent(elem, type, function(){
_V_.removeEvent(elem, type, arguments.callee)
fn.apply(this, arguments);
});
}
});
// Custom Event object for standardizing event objects between browsers.
_V_.Event = function(src, props){
// Event object
if (src && src.type) {
this.originalEvent = src;
this.type = src.type;
// Events bubbling up the document may have been marked as prevented
// by a handler lower down the tree; reflect the correct value.
this.isDefaultPrevented = (src.defaultPrevented || src.returnValue === false ||
src.getPreventDefault && src.getPreventDefault()) ? returnTrue : returnFalse;
// Event type
} else {
this.type = src;
}
// Put explicitly provided properties onto the event object
if (props) { _V_.merge(this, props); }
this.timeStamp = (new Date).getTime();
// Mark it as fixed
this[_V_.expando] = true;
};
_V_.Event.prototype = {
preventDefault: function() {
this.isDefaultPrevented = returnTrue;
var e = this.originalEvent;
if (!e) { return; }
// if preventDefault exists run it on the original event
if (e.preventDefault) {
e.preventDefault();
// otherwise set the returnValue property of the original event to false (IE)
} else {
e.returnValue = false;
}
},
stopPropagation: function() {
this.isPropagationStopped = returnTrue;
var e = this.originalEvent;
if (!e) { return; }
// if stopPropagation exists run it on the original event
if (e.stopPropagation) { e.stopPropagation(); }
// otherwise set the cancelBubble property of the original event to true (IE)
e.cancelBubble = true;
},
stopImmediatePropagation: function() {
this.isImmediatePropagationStopped = returnTrue;
this.stopPropagation();
},
isDefaultPrevented: returnFalse,
isPropagationStopped: returnFalse,
isImmediatePropagationStopped: returnFalse
};
_V_.Event.props = "altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode metaKey newValue offsetX offsetY pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" ");
function returnTrue(){ return true; }
function returnFalse(){ return false; }

38
src/js/big-play-button.js Normal file
View File

@ -0,0 +1,38 @@
/* Big Play Button
================================================================================ */
/**
* Initial play button. Shows before the video has played.
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.BigPlayButton = vjs.Button.extend({
/** @constructor */
init: function(player, options){
vjs.Button.call(this, player, options);
if (!player.controls()) {
this.hide();
}
player.on('play', vjs.bind(this, this.hide));
// player.on('ended', vjs.bind(this, this.show));
}
});
vjs.BigPlayButton.prototype.createEl = function(){
return vjs.Button.prototype.createEl.call(this, 'div', {
className: 'vjs-big-play-button',
innerHTML: '<span></span>',
'aria-label': 'play video'
});
};
vjs.BigPlayButton.prototype.onClick = function(){
// Go back to the beginning if big play button is showing at the end.
// Have to check for current time otherwise it might throw a 'not ready' error.
//if(this.player_.currentTime()) {
//this.player_.currentTime(0);
//}
this.player_.play();
};

74
src/js/button.js Normal file
View File

@ -0,0 +1,74 @@
/* Button - Base class for all buttons
================================================================================ */
/**
* Base class for all buttons
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.Button = vjs.Component.extend({
/** @constructor */
init: function(player, options){
vjs.Component.call(this, player, options);
var touchstart = false;
this.on('touchstart', function() {
touchstart = true;
});
this.on('touchmove', function() {
touchstart = false;
});
var self = this;
this.on('touchend', function(event) {
if (touchstart) {
self.onClick(event);
}
event.preventDefault();
event.stopPropagation();
});
this.on('click', this.onClick);
this.on('focus', this.onFocus);
this.on('blur', this.onBlur);
}
});
vjs.Button.prototype.createEl = function(type, props){
// Add standard Aria and Tabindex info
props = vjs.obj.merge({
className: this.buildCSSClass(),
innerHTML: '<div class="vjs-control-content"><span class="vjs-control-text">' + (this.buttonText || 'Need Text') + '</span></div>',
role: 'button',
'aria-live': 'polite', // let the screen reader user know that the text of the button may change
tabIndex: 0
}, props);
return vjs.Component.prototype.createEl.call(this, type, props);
};
vjs.Button.prototype.buildCSSClass = function(){
// TODO: Change vjs-control to vjs-button?
return 'vjs-control ' + vjs.Component.prototype.buildCSSClass.call(this);
};
// Click - Override with specific functionality for button
vjs.Button.prototype.onClick = function(){};
// Focus - Add keyboard functionality to element
vjs.Button.prototype.onFocus = function(){
vjs.on(document, 'keyup', vjs.bind(this, this.onKeyPress));
};
// KeyPress (document level) - Trigger click when keys are pressed
vjs.Button.prototype.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
vjs.Button.prototype.onBlur = function(){
vjs.off(document, 'keyup', vjs.bind(this, this.onKeyPress));
};

693
src/js/component.js Normal file
View File

@ -0,0 +1,693 @@
/**
* @fileoverview Player Component - Base class for all UI objects
*
*/
/**
* Base UI Component class
* @param {Object} player Main Player
* @param {Object=} options
* @constructor
*/
vjs.Component = vjs.CoreObject.extend({
/** @constructor */
init: function(player, options, ready){
this.player_ = player;
// Make a copy of prototype.options_ to protect against overriding global defaults
this.options_ = vjs.obj.copy(this.options_);
// Updated options with supplied options
options = this.options(options);
// Get ID from options, element, or create using player ID and unique ID
this.id_ = options['id'] || ((options['el'] && options['el']['id']) ? options['el']['id'] : player.id() + '_component_' + vjs.guid++ );
this.name_ = options['name'] || null;
// Create element if one wasn't provided in options
this.el_ = options['el'] || this.createEl();
this.children_ = [];
this.childIndex_ = {};
this.childNameIndex_ = {};
// Add any child components in options
this.initChildren();
this.ready(ready);
// Don't want to trigger ready here or it will before init is actually
// finished for all children that run this constructor
}
});
/**
* Dispose of the component and all child components.
*/
vjs.Component.prototype.dispose = function(){
// Dispose all children.
if (this.children_) {
for (var i = this.children_.length - 1; i >= 0; i--) {
if (this.children_[i].dispose) {
this.children_[i].dispose();
}
}
}
// Delete child references
this.children_ = null;
this.childIndex_ = null;
this.childNameIndex_ = null;
// Remove all event listeners.
this.off();
// Remove element from DOM
if (this.el_.parentNode) {
this.el_.parentNode.removeChild(this.el_);
}
vjs.removeData(this.el_);
this.el_ = null;
};
/**
* Reference to main player instance.
* @type {vjs.Player}
* @private
*/
vjs.Component.prototype.player_;
/**
* Return the component's player.
* @return {vjs.Player}
*/
vjs.Component.prototype.player = function(){
return this.player_;
};
/**
* Component options object.
* @type {Object}
* @private
*/
vjs.Component.prototype.options_;
/**
* Deep merge of options objects
* Whenever a property is an object on both options objects
* the two properties will be merged using vjs.obj.deepMerge.
*
* This is used for merging options for child components. We
* want it to be easy to override individual options on a child
* component without having to rewrite all the other default options.
*
* Parent.prototype.options_ = {
* children: {
* 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
* 'childTwo': {},
* 'childThree': {}
* }
* }
* newOptions = {
* children: {
* 'childOne': { 'foo': 'baz', 'abc': '123' }
* 'childTwo': null,
* 'childFour': {}
* }
* }
*
* this.options(newOptions);
*
* RESULT
*
* {
* children: {
* 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
* 'childTwo': null, // Disabled. Won't be initialized.
* 'childThree': {},
* 'childFour': {}
* }
* }
*
* @param {Object} obj Object whose values will be overwritten
* @return {Object} NEW merged object. Does not return obj1.
*/
vjs.Component.prototype.options = function(obj){
if (obj === undefined) return this.options_;
return this.options_ = vjs.obj.deepMerge(this.options_, obj);
};
/**
* The DOM element for the component.
* @type {Element}
* @private
*/
vjs.Component.prototype.el_;
/**
* Create the component's DOM element.
* @param {String=} tagName Element's node type. e.g. 'div'
* @param {Object=} attributes An object of element attributes that should be set on the element.
* @return {Element}
*/
vjs.Component.prototype.createEl = function(tagName, attributes){
return vjs.createEl(tagName, attributes);
};
/**
* Return the component's DOM element.
* @return {Element}
*/
vjs.Component.prototype.el = function(){
return this.el_;
};
/**
* An optional element where, if defined, children will be inserted
* instead of directly in el_
* @type {Element}
* @private
*/
vjs.Component.prototype.contentEl_;
/**
* Return the component's DOM element for embedding content.
* will either be el_ or a new element defined in createEl
* @return {Element}
*/
vjs.Component.prototype.contentEl = function(){
return this.contentEl_ || this.el_;
};
/**
* The ID for the component.
* @type {String}
* @private
*/
vjs.Component.prototype.id_;
/**
* Return the component's ID.
* @return {String}
*/
vjs.Component.prototype.id = function(){
return this.id_;
};
/**
* The name for the component. Often used to reference the component.
* @type {String}
* @private
*/
vjs.Component.prototype.name_;
/**
* Return the component's ID.
* @return {String}
*/
vjs.Component.prototype.name = function(){
return this.name_;
};
/**
* Array of child components
* @type {Array}
* @private
*/
vjs.Component.prototype.children_;
/**
* Returns array of all child components.
* @return {Array}
*/
vjs.Component.prototype.children = function(){
return this.children_;
};
/**
* Object of child components by ID
* @type {Object}
* @private
*/
vjs.Component.prototype.childIndex_;
/**
* Returns a child component with the provided ID.
* @return {Array}
*/
vjs.Component.prototype.getChildById = function(id){
return this.childIndex_[id];
};
/**
* Object of child components by Name
* @type {Object}
* @private
*/
vjs.Component.prototype.childNameIndex_;
/**
* Returns a child component with the provided ID.
* @return {Array}
*/
vjs.Component.prototype.getChild = function(name){
return this.childNameIndex_[name];
};
/**
* Adds a child component inside this component.
* @param {String|vjs.Component} child The class name or instance of a child to add.
* @param {Object=} options Optional options, including options to be passed to
* children of the child.
* @return {vjs.Component} The child component, because it might be created in this process.
* @suppress {accessControls|checkRegExp|checkTypes|checkVars|const|constantProperty|deprecated|duplicate|es5Strict|fileoverviewTags|globalThis|invalidCasts|missingProperties|nonStandardJsDocs|strictModuleDepCheck|undefinedNames|undefinedVars|unknownDefines|uselessCode|visibility}
*/
vjs.Component.prototype.addChild = function(child, options){
var component, componentClass, componentName, componentId;
// If string, create new component with options
if (typeof child === 'string') {
componentName = child;
// Make sure options is at least an empty object to protect against errors
options = options || {};
// Assume name of set is a lowercased name of the UI Class (PlayButton, etc.)
componentClass = options['componentClass'] || vjs.capitalize(componentName);
// Set name through options
options['name'] = componentName;
// Create a new object & element for this controls set
// If there's no .player_, this is a player
// Closure Compiler throws an 'incomplete alias' warning if we use the vjs variable directly.
// Every class should be exported, so this should never be a problem here.
component = new window['videojs'][componentClass](this.player_ || this, options);
// child is a component instance
} else {
component = child;
}
this.children_.push(component);
if (typeof component.id === 'function') {
this.childIndex_[component.id()] = component;
}
// If a name wasn't used to create the component, check if we can use the
// name function of the component
componentName = componentName || (component.name && component.name());
if (componentName) {
this.childNameIndex_[componentName] = component;
}
// Add the UI object's element to the container div (box)
// Having an element is not required
if (typeof component['el'] === 'function' && component['el']()) {
this.contentEl().appendChild(component['el']());
}
// Return so it can stored on parent object if desired.
return component;
};
vjs.Component.prototype.removeChild = function(component){
if (typeof component === 'string') {
component = this.getChild(component);
}
if (!component || !this.children_) return;
var childFound = false;
for (var i = this.children_.length - 1; i >= 0; i--) {
if (this.children_[i] === component) {
childFound = true;
this.children_.splice(i,1);
break;
}
}
if (!childFound) return;
this.childIndex_[component.id] = null;
this.childNameIndex_[component.name] = null;
var compEl = component.el();
if (compEl && compEl.parentNode === this.contentEl()) {
this.contentEl().removeChild(component.el());
}
};
/**
* Initialize default child components from options
*/
vjs.Component.prototype.initChildren = function(){
var options = this.options_;
if (options && options['children']) {
var self = this;
// Loop through components and add them to the player
vjs.obj.each(options['children'], function(name, opts){
// Allow for disabling default components
// e.g. vjs.options['children']['posterImage'] = false
if (opts === false) return;
// Allow waiting to add components until a specific event is called
var tempAdd = function(){
// Set property name on player. Could cause conflicts with other prop names, but it's worth making refs easy.
self[name] = self.addChild(name, opts);
};
if (opts['loadEvent']) {
// this.one(opts.loadEvent, tempAdd)
} else {
tempAdd();
}
});
}
};
vjs.Component.prototype.buildCSSClass = function(){
// Child classes can include a function that does:
// return 'CLASS NAME' + this._super();
return '';
};
/* Events
============================================================================= */
/**
* Add an event listener to this component's element. Context will be the component.
* @param {String} type Event type e.g. 'click'
* @param {Function} fn Event listener
* @return {vjs.Component}
*/
vjs.Component.prototype.on = function(type, fn){
vjs.on(this.el_, type, vjs.bind(this, fn));
return this;
};
/**
* Remove an event listener from the component's element
* @param {String=} type Optional event type. Without type it will remove all listeners.
* @param {Function=} fn Optional event listener. Without fn it will remove all listeners for a type.
* @return {vjs.Component}
*/
vjs.Component.prototype.off = function(type, fn){
vjs.off(this.el_, type, fn);
return this;
};
/**
* Add an event listener to be triggered only once and then removed
* @param {String} type Event type
* @param {Function} fn Event listener
* @return {vjs.Component}
*/
vjs.Component.prototype.one = function(type, fn) {
vjs.one(this.el_, type, vjs.bind(this, fn));
return this;
};
/**
* Trigger an event on an element
* @param {String} type Event type to trigger
* @param {Event|Object} event Event object to be passed to the listener
* @return {vjs.Component}
*/
vjs.Component.prototype.trigger = function(type, event){
vjs.trigger(this.el_, type, event);
return this;
};
/* Ready
================================================================================ */
/**
* Is the component loaded.
* @type {Boolean}
* @private
*/
vjs.Component.prototype.isReady_;
/**
* Trigger ready as soon as initialization is finished.
* Allows for delaying ready. Override on a sub class prototype.
* If you set this.isReadyOnInitFinish_ it will affect all components.
* Specially used when waiting for the Flash player to asynchrnously load.
* @type {Boolean}
* @private
*/
vjs.Component.prototype.isReadyOnInitFinish_ = true;
/**
* List of ready listeners
* @type {Array}
* @private
*/
vjs.Component.prototype.readyQueue_;
/**
* Bind a listener to the component's ready state.
* Different from event listeners in that if the ready event has already happend
* it will trigger the function immediately.
* @param {Function} fn Ready listener
* @return {vjs.Component}
*/
vjs.Component.prototype.ready = function(fn){
if (fn) {
if (this.isReady_) {
fn.call(this);
} else {
if (this.readyQueue_ === undefined) {
this.readyQueue_ = [];
}
this.readyQueue_.push(fn);
}
}
return this;
};
/**
* Trigger the ready listeners
* @return {vjs.Component}
*/
vjs.Component.prototype.triggerReady = function(){
this.isReady_ = true;
var readyQueue = this.readyQueue_;
if (readyQueue && readyQueue.length > 0) {
for (var i = 0, j = readyQueue.length; i < j; i++) {
readyQueue[i].call(this);
}
// Reset Ready Queue
this.readyQueue_ = [];
// Allow for using event listeners also, in case you want to do something everytime a source is ready.
this.trigger('ready');
}
};
/* Display
============================================================================= */
/**
* Add a CSS class name to the component's element
* @param {String} classToAdd Classname to add
* @return {vjs.Component}
*/
vjs.Component.prototype.addClass = function(classToAdd){
vjs.addClass(this.el_, classToAdd);
return this;
};
/**
* Remove a CSS class name from the component's element
* @param {String} classToRemove Classname to remove
* @return {vjs.Component}
*/
vjs.Component.prototype.removeClass = function(classToRemove){
vjs.removeClass(this.el_, classToRemove);
return this;
};
/**
* Show the component element if hidden
* @return {vjs.Component}
*/
vjs.Component.prototype.show = function(){
this.el_.style.display = 'block';
return this;
};
/**
* Hide the component element if hidden
* @return {vjs.Component}
*/
vjs.Component.prototype.hide = function(){
this.el_.style.display = 'none';
return this;
};
/**
* Fade a component in using CSS
* @return {vjs.Component}
*/
vjs.Component.prototype.fadeIn = function(){
this.removeClass('vjs-fade-out');
this.addClass('vjs-fade-in');
return this;
};
/**
* Fade a component out using CSS
* @return {vjs.Component}
*/
vjs.Component.prototype.fadeOut = function(){
this.removeClass('vjs-fade-in');
this.addClass('vjs-fade-out');
return this;
};
/**
* Lock an item in its visible state. To be used with fadeIn/fadeOut.
* @return {vjs.Component}
*/
vjs.Component.prototype.lockShowing = function(){
this.addClass('vjs-lock-showing');
return this;
};
/**
* Unlock an item to be hidden. To be used with fadeIn/fadeOut.
* @return {vjs.Component}
*/
vjs.Component.prototype.unlockShowing = function(){
this.removeClass('vjs-lock-showing');
return this;
};
/**
* Disable component by making it unshowable
*/
vjs.Component.prototype.disable = function(){
this.hide();
this.show = function(){};
this.fadeIn = function(){};
};
// TODO: Get enable working
// vjs.Component.prototype.enable = function(){
// this.fadeIn = vjs.Component.prototype.fadeIn;
// this.show = vjs.Component.prototype.show;
// };
/**
* If a value is provided it will change the width of the player to that value
* otherwise the width is returned
* http://dev.w3.org/html5/spec/dimension-attributes.html#attr-dim-height
* Video tag width/height only work in pixels. No percents.
* But allowing limited percents use. e.g. width() will return number+%, not computed width
* @param {Number|String=} num Optional width number
* @param {[type]} skipListeners Skip the 'resize' event trigger
* @return {vjs.Component|Number|String} Returns 'this' if dimension was set.
* Otherwise it returns the dimension.
*/
vjs.Component.prototype.width = function(num, skipListeners){
return this.dimension('width', num, skipListeners);
};
/**
* Get or set the height of the player
* @param {Number|String=} num Optional new player height
* @param {Boolean=} skipListeners Optional skip resize event trigger
* @return {vjs.Component|Number|String} The player, or the dimension
*/
vjs.Component.prototype.height = function(num, skipListeners){
return this.dimension('height', num, skipListeners);
};
/**
* Set both width and height at the same time.
* @param {Number|String} width
* @param {Number|String} height
* @return {vjs.Component} The player.
*/
vjs.Component.prototype.dimensions = function(width, height){
// Skip resize listeners on width for optimization
return this.width(width, true).height(height);
};
/**
* Get or set width or height.
* All for an integer, integer + 'px' or integer + '%';
* Known issue: hidden elements. Hidden elements officially have a width of 0.
* So we're defaulting to the style.width value and falling back to computedStyle
* which has the hidden element issue.
* Info, but probably not an efficient fix:
* http://www.foliotek.com/devblog/getting-the-width-of-a-hidden-element-with-jquery-using-width/
* @param {String=} widthOrHeight 'width' or 'height'
* @param {Number|String=} num New dimension
* @param {Boolean=} skipListeners Skip resize event trigger
* @return {vjs.Component|Number|String} Return the player if setting a dimension.
* Otherwise it returns the dimension.
*/
vjs.Component.prototype.dimension = function(widthOrHeight, num, skipListeners){
if (num !== undefined) {
// Check if using css width/height (% or px) and adjust
if ((''+num).indexOf('%') !== -1 || (''+num).indexOf('px') !== -1) {
this.el_.style[widthOrHeight] = num;
} else if (num === 'auto') {
this.el_.style[widthOrHeight] = '';
} else {
this.el_.style[widthOrHeight] = num+'px';
}
// skipListeners allows us to avoid triggering the resize event when setting both width and height
if (!skipListeners) { this.trigger('resize'); }
// Return component
return this;
}
// Not setting a value, so getting it
// Make sure element exists
if (!this.el_) return 0;
// Get dimension value from style
var val = this.el_.style[widthOrHeight];
var pxIndex = val.indexOf('px');
if (pxIndex !== -1) {
// Return the pixel value with no 'px'
return parseInt(val.slice(0,pxIndex), 10);
// No px so using % or no style was set, so falling back to offsetWidth/height
// If component has display:none, offset will return 0
// TODO: handle display:none and no dimension style using px
} else {
return parseInt(this.el_['offset'+vjs.capitalize(widthOrHeight)], 10);
// ComputedStyle version.
// Only difference is if the element is hidden it will return
// the percent value (e.g. '100%'')
// instead of zero like offsetWidth returns.
// var val = vjs.getComputedStyleValue(this.el_, widthOrHeight);
// var pxIndex = val.indexOf('px');
// if (pxIndex !== -1) {
// return val.slice(0, pxIndex);
// } else {
// return val;
// }
}
};

87
src/js/control-bar/control-bar.js Normal file
View File

@ -0,0 +1,87 @@
/**
* Container of main controls
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.ControlBar = vjs.Component.extend({
/** @constructor */
init: function(player, options){
vjs.Component.call(this, player, options);
if (!player.controls()) {
this.disable();
}
player.one('play', vjs.bind(this, function(){
var touchstart,
fadeIn = vjs.bind(this, this.fadeIn),
fadeOut = vjs.bind(this, this.fadeOut);
this.fadeIn();
if ( !('ontouchstart' in window) ) {
this.player_.on('mouseover', fadeIn);
this.player_.on('mouseout', fadeOut);
this.player_.on('pause', vjs.bind(this, this.lockShowing));
this.player_.on('play', vjs.bind(this, this.unlockShowing));
}
touchstart = false;
this.player_.on('touchstart', function() {
touchstart = true;
});
this.player_.on('touchmove', function() {
touchstart = false;
});
this.player_.on('touchend', vjs.bind(this, function(event) {
var idx;
if (touchstart) {
idx = this.el().className.search('fade-in');
if (idx !== -1) {
this.fadeOut();
} else {
this.fadeIn();
}
}
touchstart = false;
if (!this.player_.paused()) {
event.preventDefault();
}
}));
}));
}
});
vjs.ControlBar.prototype.options_ = {
loadEvent: 'play',
children: {
'playToggle': {},
'currentTimeDisplay': {},
'timeDivider': {},
'durationDisplay': {},
'remainingTimeDisplay': {},
'progressControl': {},
'fullscreenToggle': {},
'volumeControl': {},
'muteToggle': {}
// 'volumeMenuButton': {}
}
};
vjs.ControlBar.prototype.createEl = function(){
return vjs.createEl('div', {
className: 'vjs-control-bar'
});
};
vjs.ControlBar.prototype.fadeIn = function(){
vjs.Component.prototype.fadeIn.call(this);
this.player_.trigger('controlsvisible');
};
vjs.ControlBar.prototype.fadeOut = function(){
vjs.Component.prototype.fadeOut.call(this);
this.player_.trigger('controlshidden');
};

28
src/js/control-bar/fullscreen-toggle.js Normal file
View File

@ -0,0 +1,28 @@
/**
* Toggle fullscreen video
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.FullscreenToggle = vjs.Button.extend({
/** @constructor */
init: function(player, options){
vjs.Button.call(this, player, options);
}
});
vjs.FullscreenToggle.prototype.buttonText = 'Fullscreen';
vjs.FullscreenToggle.prototype.buildCSSClass = function(){
return 'vjs-fullscreen-control ' + vjs.Button.prototype.buildCSSClass.call(this);
};
vjs.FullscreenToggle.prototype.onClick = function(){
if (!this.player_.isFullScreen) {
this.player_.requestFullScreen();
this.el_.children[0].children[0].innerHTML = 'Non-Fullscreen'; // change the button text to "Non-Fullscreen"
} else {
this.player_.cancelFullScreen();
this.el_.children[0].children[0].innerHTML = 'Fullscreen'; // change the button to "Fullscreen"
}
};

69
src/js/control-bar/mute-toggle.js Normal file
View File

@ -0,0 +1,69 @@
/**
* Mute the audio
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.MuteToggle = vjs.Button.extend({
/** @constructor */
init: function(player, options){
vjs.Button.call(this, player, options);
player.on('volumechange', vjs.bind(this, this.update));
// hide mute toggle if the current tech doesn't support volume control
if (player.tech && player.tech.features && player.tech.features.volumeControl === false) {
this.addClass('vjs-hidden');
}
player.on('loadstart', vjs.bind(this, function(){
if (player.tech.features && player.tech.features.volumeControl === false) {
this.addClass('vjs-hidden');
} else {
this.removeClass('vjs-hidden');
}
}));
}
});
vjs.MuteToggle.prototype.createEl = function(){
return vjs.Button.prototype.createEl.call(this, 'div', {
className: 'vjs-mute-control vjs-control',
innerHTML: '<div><span class="vjs-control-text">Mute</span></div>'
});
};
vjs.MuteToggle.prototype.onClick = function(){
this.player_.muted( this.player_.muted() ? false : true );
};
vjs.MuteToggle.prototype.update = function(){
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;
}
// Don't rewrite the button text if the actual text doesn't change.
// This causes unnecessary and confusing information for screen reader users.
// This check is needed because this function gets called every time the volume level is changed.
if(this.player_.muted()){
if(this.el_.children[0].children[0].innerHTML!='Unmute'){
this.el_.children[0].children[0].innerHTML = 'Unmute'; // change the button text to "Unmute"
}
} else {
if(this.el_.children[0].children[0].innerHTML!='Mute'){
this.el_.children[0].children[0].innerHTML = 'Mute'; // change the button text to "Mute"
}
}
/* TODO improve muted icon classes */
for (var i = 0; i < 4; i++) {
vjs.removeClass(this.el_, 'vjs-vol-'+i);
}
vjs.addClass(this.el_, 'vjs-vol-'+level);
};

44
src/js/control-bar/play-toggle.js Normal file
View File

@ -0,0 +1,44 @@
/**
* Button to toggle between play and pause
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.PlayToggle = vjs.Button.extend({
/** @constructor */
init: function(player, options){
vjs.Button.call(this, player, options);
player.on('play', vjs.bind(this, this.onPlay));
player.on('pause', vjs.bind(this, this.onPause));
}
});
vjs.PlayToggle.prototype.buttonText = 'Play';
vjs.PlayToggle.prototype.buildCSSClass = function(){
return 'vjs-play-control ' + vjs.Button.prototype.buildCSSClass.call(this);
};
// OnClick - Toggle between play and pause
vjs.PlayToggle.prototype.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
vjs.PlayToggle.prototype.onPlay = function(){
vjs.removeClass(this.el_, 'vjs-paused');
vjs.addClass(this.el_, 'vjs-playing');
this.el_.children[0].children[0].innerHTML = 'Pause'; // change the button text to "Pause"
};
// OnPause - Add the vjs-paused class to the element so it can change appearance
vjs.PlayToggle.prototype.onPause = function(){
vjs.removeClass(this.el_, 'vjs-playing');
vjs.addClass(this.el_, 'vjs-paused');
this.el_.children[0].children[0].innerHTML = 'Play'; // change the button text to "Play"
};

171
src/js/control-bar/progress-control.js Normal file
View File

@ -0,0 +1,171 @@
/**
* Seek, Load Progress, and Play Progress
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.ProgressControl = vjs.Component.extend({
/** @constructor */
init: function(player, options){
vjs.Component.call(this, player, options);
}
});
vjs.ProgressControl.prototype.options_ = {
children: {
'seekBar': {}
}
};
vjs.ProgressControl.prototype.createEl = function(){
return vjs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-progress-control vjs-control'
});
};
/**
* Seek Bar and holder for the progress bars
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.SeekBar = vjs.Slider.extend({
/** @constructor */
init: function(player, options){
vjs.Slider.call(this, player, options);
player.on('timeupdate', vjs.bind(this, this.updateARIAAttributes));
player.ready(vjs.bind(this, this.updateARIAAttributes));
}
});
vjs.SeekBar.prototype.options_ = {
children: {
'loadProgressBar': {},
'playProgressBar': {},
'seekHandle': {}
},
'barName': 'playProgressBar',
'handleName': 'seekHandle'
};
vjs.SeekBar.prototype.playerEvent = 'timeupdate';
vjs.SeekBar.prototype.createEl = function(){
return vjs.Slider.prototype.createEl.call(this, 'div', {
className: 'vjs-progress-holder',
'aria-label': 'video progress bar'
});
};
vjs.SeekBar.prototype.updateARIAAttributes = function(){
// Allows for smooth scrubbing, when player can't keep up.
var time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime();
this.el_.setAttribute('aria-valuenow',vjs.round(this.getPercent()*100, 2)); // machine readable value of progress bar (percentage complete)
this.el_.setAttribute('aria-valuetext',vjs.formatTime(time, this.player_.duration())); // human readable value of progress bar (time complete)
};
vjs.SeekBar.prototype.getPercent = function(){
return this.player_.currentTime() / this.player_.duration();
};
vjs.SeekBar.prototype.onMouseDown = function(event){
vjs.Slider.prototype.onMouseDown.call(this, event);
this.player_.scrubbing = true;
this.videoWasPlaying = !this.player_.paused();
this.player_.pause();
};
vjs.SeekBar.prototype.onMouseMove = function(event){
var newTime = this.calculateDistance(event) * 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);
};
vjs.SeekBar.prototype.onMouseUp = function(event){
vjs.Slider.prototype.onMouseUp.call(this, event);
this.player_.scrubbing = false;
if (this.videoWasPlaying) {
this.player_.play();
}
};
vjs.SeekBar.prototype.stepForward = function(){
this.player_.currentTime(this.player_.currentTime() + 5); // more quickly fast forward for keyboard-only users
};
vjs.SeekBar.prototype.stepBack = function(){
this.player_.currentTime(this.player_.currentTime() - 5); // more quickly rewind for keyboard-only users
};
/**
* Shows load progres
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.LoadProgressBar = vjs.Component.extend({
/** @constructor */
init: function(player, options){
vjs.Component.call(this, player, options);
player.on('progress', vjs.bind(this, this.update));
}
});
vjs.LoadProgressBar.prototype.createEl = function(){
return vjs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-load-progress',
innerHTML: '<span class="vjs-control-text">Loaded: 0%</span>'
});
};
vjs.LoadProgressBar.prototype.update = function(){
if (this.el_.style) { this.el_.style.width = vjs.round(this.player_.bufferedPercent() * 100, 2) + '%'; }
};
/**
* Shows play progress
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.PlayProgressBar = vjs.Component.extend({
/** @constructor */
init: function(player, options){
vjs.Component.call(this, player, options);
}
});
vjs.PlayProgressBar.prototype.createEl = function(){
return vjs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-play-progress',
innerHTML: '<span class="vjs-control-text">Progress: 0%</span>'
});
};
/**
* SeekBar component includes play progress bar, and seek handle
* Needed so it can determine seek position based on handle position/size
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.SeekHandle = vjs.SliderHandle.extend();
/** @inheritDoc */
vjs.SeekHandle.prototype.defaultValue = '00:00';
/** @inheritDoc */
vjs.SeekHandle.prototype.createEl = function(){
return vjs.SliderHandle.prototype.createEl.call(this, 'div', {
className: 'vjs-seek-handle'
});
};

133
src/js/control-bar/time-display.js Normal file
View File

@ -0,0 +1,133 @@
/**
* Displays the current time
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.CurrentTimeDisplay = vjs.Component.extend({
/** @constructor */
init: function(player, options){
vjs.Component.call(this, player, options);
player.on('timeupdate', vjs.bind(this, this.updateContent));
}
});
vjs.CurrentTimeDisplay.prototype.createEl = function(){
var el = vjs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-current-time vjs-time-controls vjs-control'
});
this.content = vjs.createEl('div', {
className: 'vjs-current-time-display',
innerHTML: '<span class="vjs-control-text">Current Time </span>' + '0:00', // label the current time for screen reader users
'aria-live': 'off' // tell screen readers not to automatically read the time as it changes
});
el.appendChild(vjs.createEl('div').appendChild(this.content));
return el;
};
vjs.CurrentTimeDisplay.prototype.updateContent = function(){
// Allows for smooth scrubbing, when player can't keep up.
var time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime();
this.content.innerHTML = '<span class="vjs-control-text">Current Time </span>' + vjs.formatTime(time, this.player_.duration());
};
/**
* Displays the duration
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.DurationDisplay = vjs.Component.extend({
/** @constructor */
init: function(player, options){
vjs.Component.call(this, player, options);
player.on('timeupdate', vjs.bind(this, this.updateContent)); // this might need to be changes to 'durationchange' instead of 'timeupdate' eventually, however the durationchange event fires before this.player_.duration() is set, so the value cannot be written out using this method. Once the order of durationchange and this.player_.duration() being set is figured out, this can be updated.
}
});
vjs.DurationDisplay.prototype.createEl = function(){
var el = vjs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-duration vjs-time-controls vjs-control'
});
this.content = vjs.createEl('div', {
className: 'vjs-duration-display',
innerHTML: '<span class="vjs-control-text">Duration Time </span>' + '0:00', // label the duration time for screen reader users
'aria-live': 'off' // tell screen readers not to automatically read the time as it changes
});
el.appendChild(vjs.createEl('div').appendChild(this.content));
return el;
};
vjs.DurationDisplay.prototype.updateContent = function(){
if (this.player_.duration()) {
this.content.innerHTML = '<span class="vjs-control-text">Duration Time </span>' + vjs.formatTime(this.player_.duration()); // label the duration time for screen reader users
}
};
/**
* Time Separator (Not used in main skin, but still available, and could be used as a 'spare element')
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.TimeDivider = vjs.Component.extend({
/** @constructor */
init: function(player, options){
vjs.Component.call(this, player, options);
}
});
vjs.TimeDivider.prototype.createEl = function(){
return vjs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-time-divider',
innerHTML: '<div><span>/</span></div>'
});
};
/**
* Displays the time left in the video
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.RemainingTimeDisplay = vjs.Component.extend({
/** @constructor */
init: function(player, options){
vjs.Component.call(this, player, options);
player.on('timeupdate', vjs.bind(this, this.updateContent));
}
});
vjs.RemainingTimeDisplay.prototype.createEl = function(){
var el = vjs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-remaining-time vjs-time-controls vjs-control'
});
this.content = vjs.createEl('div', {
className: 'vjs-remaining-time-display',
innerHTML: '<span class="vjs-control-text">Remaining Time </span>' + '-0:00', // label the remaining time for screen reader users
'aria-live': 'off' // tell screen readers not to automatically read the time as it changes
});
el.appendChild(vjs.createEl('div').appendChild(this.content));
return el;
};
vjs.RemainingTimeDisplay.prototype.updateContent = function(){
if (this.player_.duration()) {
if (this.player_.duration()) {
this.content.innerHTML = '<span class="vjs-control-text">Remaining Time </span>' + '-'+ vjs.formatTime(this.player_.remainingTime());
}
}
// Allows for smooth scrubbing, when player can't keep up.
// var time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime();
// this.content.innerHTML = vjs.formatTime(time, this.player_.duration());
};

134
src/js/control-bar/volume-control.js Normal file
View File

@ -0,0 +1,134 @@
/**
* Control the volume
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.VolumeControl = vjs.Component.extend({
/** @constructor */
init: function(player, options){
vjs.Component.call(this, player, options);
// hide volume controls when they're not supported by the current tech
if (player.tech && player.tech.features && player.tech.features.volumeControl === false) {
this.addClass('vjs-hidden');
}
player.on('loadstart', vjs.bind(this, function(){
if (player.tech.features && player.tech.features.volumeControl === false) {
this.addClass('vjs-hidden');
} else {
this.removeClass('vjs-hidden');
}
}));
}
});
vjs.VolumeControl.prototype.options_ = {
children: {
'volumeBar': {}
}
};
vjs.VolumeControl.prototype.createEl = function(){
return vjs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-volume-control vjs-control'
});
};
/**
* Contains volume level
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.VolumeBar = vjs.Slider.extend({
/** @constructor */
init: function(player, options){
vjs.Slider.call(this, player, options);
player.on('volumechange', vjs.bind(this, this.updateARIAAttributes));
player.ready(vjs.bind(this, this.updateARIAAttributes));
setTimeout(vjs.bind(this, this.update), 0); // update when elements is in DOM
}
});
vjs.VolumeBar.prototype.updateARIAAttributes = function(){
// Current value of volume bar as a percentage
this.el_.setAttribute('aria-valuenow',vjs.round(this.player_.volume()*100, 2));
this.el_.setAttribute('aria-valuetext',vjs.round(this.player_.volume()*100, 2)+'%');
};
vjs.VolumeBar.prototype.options_ = {
children: {
'volumeLevel': {},
'volumeHandle': {}
},
'barName': 'volumeLevel',
'handleName': 'volumeHandle'
};
vjs.VolumeBar.prototype.playerEvent = 'volumechange';
vjs.VolumeBar.prototype.createEl = function(){
return vjs.Slider.prototype.createEl.call(this, 'div', {
className: 'vjs-volume-bar',
'aria-label': 'volume level'
});
};
vjs.VolumeBar.prototype.onMouseMove = function(event) {
this.player_.volume(this.calculateDistance(event));
};
vjs.VolumeBar.prototype.getPercent = function(){
if (this.player_.muted()) {
return 0;
} else {
return this.player_.volume();
}
};
vjs.VolumeBar.prototype.stepForward = function(){
this.player_.volume(this.player_.volume() + 0.1);
};
vjs.VolumeBar.prototype.stepBack = function(){
this.player_.volume(this.player_.volume() - 0.1);
};
/**
* Shows volume level
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.VolumeLevel = vjs.Component.extend({
/** @constructor */
init: function(player, options){
vjs.Component.call(this, player, options);
}
});
vjs.VolumeLevel.prototype.createEl = function(){
return vjs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-volume-level',
innerHTML: '<span class="vjs-control-text"></span>'
});
};
/**
* Change volume level
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.VolumeHandle = vjs.SliderHandle.extend();
/** @inheritDoc */
vjs.VolumeHandle.prototype.defaultValue = '00:00';
/** @inheritDoc */
vjs.VolumeHandle.prototype.createEl = function(){
return vjs.SliderHandle.prototype.createEl.call(this, 'div', {
className: 'vjs-volume-handle'
});
};

48
src/js/control-bar/volume-menu-button.js Normal file
View File

@ -0,0 +1,48 @@
/**
* Menu button with a popup for showing the volume slider.
* @constructor
*/
vjs.VolumeMenuButton = vjs.MenuButton.extend({
/** @constructor */
init: function(player, options){
vjs.MenuButton.call(this, player, options);
// Same listeners as MuteToggle
player.on('volumechange', vjs.bind(this, this.update));
// hide mute toggle if the current tech doesn't support volume control
if (player.tech && player.tech.features && player.tech.features.volumeControl === false) {
this.addClass('vjs-hidden');
}
player.on('loadstart', vjs.bind(this, function(){
if (player.tech.features && player.tech.features.volumeControl === false) {
this.addClass('vjs-hidden');
} else {
this.removeClass('vjs-hidden');
}
}));
this.addClass('vjs-menu-button');
}
});
vjs.VolumeMenuButton.prototype.createMenu = function(){
var menu = new vjs.Menu(this.player_, {
contentElType: 'div'
});
var vc = new vjs.VolumeBar(this.player_, vjs.obj.merge({vertical: true}, this.options_.volumeBar));
menu.addChild(vc);
return menu;
};
vjs.VolumeMenuButton.prototype.onClick = function(){
vjs.MuteToggle.prototype.onClick.call(this);
vjs.MenuButton.prototype.onClick.call(this);
};
vjs.VolumeMenuButton.prototype.createEl = function(){
return vjs.Button.prototype.createEl.call(this, 'div', {
className: 'vjs-volume-menu-button vjs-menu-button vjs-control',
innerHTML: '<div><span class="vjs-control-text">Mute</span></div>'
});
};
vjs.VolumeMenuButton.prototype.update = vjs.MuteToggle.prototype.update;

75
src/js/core-object.js Normal file
View File

@ -0,0 +1,75 @@
/**
* Core Object/Class for objects that use inheritance + contstructors
* @constructor
*/
vjs.CoreObject = vjs['CoreObject'] = function(){};
// Manually exporting vjs['CoreObject'] here for Closure Compiler
// because of the use of the extend/create class methods
// If we didn't do this, those functions would get flattend to something like
// `a = ...` and `this.prototype` would refer to the global object instead of
// CoreObject
/**
* Create a new object that inherits from this Object
* @param {Object} props Functions and properties to be applied to the
* new object's prototype
* @return {vjs.CoreObject} Returns an object that inherits from CoreObject
* @this {*}
*/
vjs.CoreObject.extend = function(props){
var init, subObj;
props = props || {};
// Set up the constructor using the supplied init method
// or using the init of the parent object
// Make sure to check the unobfuscated version for external libs
init = props['init'] || props.init || this.prototype['init'] || this.prototype.init || function(){};
// In Resig's simple class inheritance (previously used) the constructor
// is a function that calls `this.init.apply(arguments)`
// However that would prevent us from using `ParentObject.call(this);`
// in a Child constuctor because the `this` in `this.init`
// would still refer to the Child and cause an inifinite loop.
// We would instead have to do
// `ParentObject.prototype.init.apply(this, argumnents);`
// Bleh. We're not creating a _super() function, so it's good to keep
// the parent constructor reference simple.
subObj = function(){
init.apply(this, arguments);
};
// Inherit from this object's prototype
subObj.prototype = vjs.obj.create(this.prototype);
// Reset the constructor property for subObj otherwise
// instances of subObj would have the constructor of the parent Object
subObj.prototype.constructor = subObj;
// Make the class extendable
subObj.extend = vjs.CoreObject.extend;
// Make a function for creating instances
subObj.create = vjs.CoreObject.create;
// Extend subObj's prototype with functions and other properties from props
for (var name in props) {
if (props.hasOwnProperty(name)) {
subObj.prototype[name] = props[name];
}
}
return subObj;
};
/**
* Create a new instace of this Object class
* @return {vjs.CoreObject} Returns an instance of a CoreObject subclass
* @this {*}
*/
vjs.CoreObject.create = function(){
// Create a new object that inherits from this object's prototype
var inst = vjs.obj.create(this.prototype);
// Apply this constructor function to the new object
this.apply(inst, arguments);
// Return the new object
return inst;
};

103
src/js/core.js Normal file
View File

@ -0,0 +1,103 @@
/**
* @fileoverview Main function src.
*/
// HTML5 Shiv. Must be in <head> to support older browsers.
document.createElement('video');document.createElement('audio');
/**
* Doubles as the main function for users to create a player instance and also
* the main library object.
*
* @param {String|Element} id Video element or video element ID
* @param {Object=} options Optional options object for config/settings
* @param {Function=} ready Optional ready callback
* @return {vjs.Player} A player instance
*/
var vjs = function(id, options, ready){
var tag; // Element of ID
// 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 (vjs.players[id]) {
return vjs.players[id];
// Otherwise get element for ID
} else {
tag = vjs.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. (videojs)'); // 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 vjs.Player(tag, options, ready);
};
// Extended name, also available externally, window.videojs
var videojs = vjs;
window.videojs = window.vjs = vjs;
// CDN Version. Used to target right flash swf.
vjs.CDN_VERSION = 'GENERATED_CDN_VSN';
vjs.ACCESS_PROTOCOL = ('https:' == document.location.protocol ? 'https://' : 'http://');
/**
* Global Player instance options, surfaced from vjs.Player.prototype.options_
* vjs.options = vjs.Player.prototype.options_
* All options should use string keys so they avoid
* renaming by closure compiler
* @type {Object}
*/
vjs.options = {
// Default order of fallback technology
'techOrder': ['html5','flash'],
// techOrder: ['flash','html5'],
'html5': {},
'flash': { 'swf': vjs.ACCESS_PROTOCOL + 'vjs.zencdn.net/4.0/video-js.swf' },
// Default of web browser is 300x150. Should rely on source width/height.
'width': 300,
'height': 150,
// defaultVolume: 0.85,
'defaultVolume': 0.00, // The freakin seaguls are driving me crazy!
// Included control sets
'children': {
'mediaLoader': {},
'posterImage': {},
'textTrackDisplay': {},
'loadingSpinner': {},
'bigPlayButton': {},
'controlBar': {}
}
};
/**
* Global player list
* @type {Object}
*/
vjs.players = {};
// Set CDN Version of swf
if (vjs.CDN_VERSION != 'GENERATED_CDN_VSN') {
videojs.options['flash']['swf'] = vjs.ACCESS_PROTOCOL + 'vjs.zencdn.net/'+vjs.CDN_VERSION+'/video-js.swf';
}

333
src/js/events.js Normal file
View File

@ -0,0 +1,333 @@
/**
* @fileoverview Event System (John Resig - Secrets of a JS Ninja http://jsninja.com/)
* (Original book version wasn't completely usable, so fixed some things and made Closure Compiler compatible)
* This should work very similarly to jQuery's events, however it's based off the book version which isn't as
* robust as jquery's, so there's probably some differences.
*/
/**
* Add an event listener to element
* It stores the handler function in a separate cache object
* and adds a generic handler to the element's event,
* along with a unique id (guid) to the element.
* @param {Element|Object} elem Element or object to bind listeners to
* @param {String} type Type of event to bind to.
* @param {Function} fn Event listener.
*/
vjs.on = function(elem, type, fn){
var data = vjs.getData(elem);
// We need a place to store all our handler data
if (!data.handlers) data.handlers = {};
if (!data.handlers[type]) data.handlers[type] = [];
if (!fn.guid) fn.guid = vjs.guid++;
data.handlers[type].push(fn);
if (!data.dispatcher) {
data.disabled = false;
data.dispatcher = function (event){
if (data.disabled) return;
event = vjs.fixEvent(event);
var handlers = data.handlers[event.type];
if (handlers) {
// Copy handlers so if handlers are added/removed during the process it doesn't throw everything off.
var handlersCopy = handlers.slice(0);
for (var m = 0, n = handlersCopy.length; m < n; m++) {
if (event.isImmediatePropagationStopped()) {
break;
} else {
handlersCopy[m].call(elem, event);
}
}
}
};
}
if (data.handlers[type].length == 1) {
if (document.addEventListener) {
elem.addEventListener(type, data.dispatcher, false);
} else if (document.attachEvent) {
elem.attachEvent('on' + type, data.dispatcher);
}
}
};
/**
* Removes event listeners from an element
* @param {Element|Object} elem Object to remove listeners from
* @param {String=} type Type of listener to remove. Don't include to remove all events from element.
* @param {Function} fn Specific listener to remove. Don't incldue to remove listeners for an event type.
*/
vjs.off = function(elem, type, fn) {
// Don't want to add a cache object through getData if not needed
if (!vjs.hasData(elem)) return;
var data = vjs.getData(elem);
// If no events exist, nothing to unbind
if (!data.handlers) { return; }
// Utility function
var removeType = function(t){
data.handlers[t] = [];
vjs.cleanUpEvents(elem,t);
};
// Are we removing all bound events?
if (!type) {
for (var t in data.handlers) removeType(t);
return;
}
var handlers = data.handlers[type];
// If no handlers exist, nothing to unbind
if (!handlers) return;
// If no listener was provided, remove all listeners for type
if (!fn) {
removeType(type);
return;
}
// We're only removing a single handler
if (fn.guid) {
for (var n = 0; n < handlers.length; n++) {
if (handlers[n].guid === fn.guid) {
handlers.splice(n--, 1);
}
}
}
vjs.cleanUpEvents(elem, type);
};
/**
* Clean up the listener cache and dispatchers
* @param {Element|Object} elem Element to clean up
* @param {String} type Type of event to clean up
*/
vjs.cleanUpEvents = function(elem, type) {
var data = vjs.getData(elem);
// Remove the events of a particular type if there are none left
if (data.handlers[type].length === 0) {
delete data.handlers[type];
// data.handlers[type] = null;
// Setting to null was causing an error with data.handlers
// Remove the meta-handler from the element
if (document.removeEventListener) {
elem.removeEventListener(type, data.dispatcher, false);
} else if (document.detachEvent) {
elem.detachEvent('on' + type, data.dispatcher);
}
}
// Remove the events object if there are no types left
if (vjs.isEmpty(data.handlers)) {
delete data.handlers;
delete data.dispatcher;
delete data.disabled;
// data.handlers = null;
// data.dispatcher = null;
// data.disabled = null;
}
// Finally remove the expando if there is no data left
if (vjs.isEmpty(data)) {
vjs.removeData(elem);
}
};
/**
* Fix a native event to have standard property values
* @param {Object} event Event object to fix
* @return {Object}
*/
vjs.fixEvent = function(event) {
function returnTrue() { return true; }
function returnFalse() { return false; }
// Test if fixing up is needed
// Used to check if !event.stopPropagation instead of isPropagationStopped
// But native events return true for stopPropagation, but don't have
// other expected methods like isPropagationStopped. Seems to be a problem
// with the Javascript Ninja code. So we're just overriding all events now.
if (!event || !event.isPropagationStopped) {
var old = event || window.event;
event = {};
// Clone the old object so that we can modify the values event = {};
// IE8 Doesn't like when you mess with native event properties
// Firefox returns false for event.hasOwnProperty('type') and other props
// which makes copying more difficult.
// TODO: Probably best to create a whitelist of event props
for (var key in old) {
event[key] = old[key];
}
// The event occurred on this element
if (!event.target) {
event.target = event.srcElement || document;
}
// Handle which other element the event is related to
event.relatedTarget = event.fromElement === event.target ?
event.toElement :
event.fromElement;
// Stop the default browser action
event.preventDefault = function () {
if (old.preventDefault) {
old.preventDefault();
}
event.returnValue = false;
event.isDefaultPrevented = returnTrue;
};
event.isDefaultPrevented = returnFalse;
// Stop the event from bubbling
event.stopPropagation = function () {
if (old.stopPropagation) {
old.stopPropagation();
}
event.cancelBubble = true;
event.isPropagationStopped = returnTrue;
};
event.isPropagationStopped = returnFalse;
// Stop the event from bubbling and executing other handlers
event.stopImmediatePropagation = function () {
if (old.stopImmediatePropagation) {
old.stopImmediatePropagation();
}
event.isImmediatePropagationStopped = returnTrue;
event.stopPropagation();
};
event.isImmediatePropagationStopped = returnFalse;
// Handle mouse position
if (event.clientX != null) {
var doc = document.documentElement, body = document.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0);
}
// Handle key presses
event.which = event.charCode || event.keyCode;
// Fix button for mouse clicks:
// 0 == left; 1 == middle; 2 == right
if (event.button != null) {
event.button = (event.button & 1 ? 0 :
(event.button & 4 ? 1 :
(event.button & 2 ? 2 : 0)));
}
}
// Returns fixed-up instance
return event;
};
/**
* Trigger an event for an element
* @param {Element|Object} elem Element to trigger an event on
* @param {String} event Type of event to trigger
*/
vjs.trigger = function(elem, event) {
// Fetches element data and a reference to the parent (for bubbling).
// Don't want to add a data object to cache for every parent,
// so checking hasData first.
var elemData = (vjs.hasData(elem)) ? vjs.getData(elem) : {};
var parent = elem.parentNode || elem.ownerDocument;
// type = event.type || event,
// handler;
// If an event name was passed as a string, creates an event out of it
if (typeof event === 'string') {
event = { type:event, target:elem };
}
// Normalizes the event properties.
event = vjs.fixEvent(event);
// If the passed element has a dispatcher, executes the established handlers.
if (elemData.dispatcher) {
elemData.dispatcher.call(elem, event);
}
// Unless explicitly stopped, recursively calls this function to bubble the event up the DOM.
if (parent && !event.isPropagationStopped()) {
vjs.trigger(parent, event);
// If at the top of the DOM, triggers the default action unless disabled.
} else if (!parent && !event.isDefaultPrevented()) {
var targetData = vjs.getData(event.target);
// Checks if the target has a default action for this event.
if (event.target[event.type]) {
// Temporarily disables event dispatching on the target as we have already executed the handler.
targetData.disabled = true;
// Executes the default action.
if (typeof event.target[event.type] === 'function') {
event.target[event.type]();
}
// Re-enables event dispatching.
targetData.disabled = false;
}
}
// Inform the triggerer if the default was prevented by returning false
return !event.isDefaultPrevented();
/* Original version of js ninja events wasn't complete.
* We've since updated to the latest version, but keeping this around
* for now just in case.
*/
// // Added in attion to book. Book code was broke.
// event = typeof event === 'object' ?
// event[vjs.expando] ?
// event :
// new vjs.Event(type, event) :
// new vjs.Event(type);
// event.type = type;
// if (handler) {
// handler.call(elem, event);
// }
// // Clean up the event in case it is being reused
// event.result = undefined;
// event.target = elem;
};
/**
* Trigger a listener only once for an event
* @param {Element|Object} elem Element or object to
* @param {[type]} type [description]
* @param {Function} fn [description]
* @return {[type]}
*/
vjs.one = function(elem, type, fn) {
vjs.on(elem, type, function(){
vjs.off(elem, type, arguments.callee);
fn.apply(this, arguments);
});
};

129
src/js/exports.js Normal file
View File

@ -0,0 +1,129 @@
/**
* @fileoverview Exports for Video.js.
* Exports are publically available variables.
* All other variables (including function names) will probably
* be renamed by closure compiler.
*/
/**
* vjs (internal only) = videojs = _V_ (external only)
*
* vjs is the same as the goog var in Closure Library. It holds all variables
* used in Video.js development. Closure compiler will rename all variables,
* including class prototype functions, except those specifcally
* exported (eports.js). Don't assume any function you can use in Video.js
* development will be available on window.videojs for use with other js.
*
* For example, vjs.trim is an internal function and will be renamed by compiler
* to something like 'a.b', or actually more likely 'a' removing it from
* a parent object.
*
* videojs is a var that helps bridge bewteen internal and external development.
* Avoid using it over vjs when developing the Video.js core.
*
* _V_ is only external. It's just cute and short(er). Like jQuery === $.
* Also because it's nice having a different var for internal (vjs) vs.
* external (_V_) because it makes it clearer what context we're in.
*/
goog.exportSymbol('videojs', vjs);
goog.exportSymbol('_V_', vjs);
goog.exportSymbol('videojs.options', vjs.options);
// Allow external components to use global cache
goog.exportSymbol('videojs.cache', vjs.cache);
// goog.exportSymbol('videojs.CoreObject', vjs.CoreObject);
// goog.exportProperty(vjs.CoreObject, 'create', vjs.CoreObject.create);
goog.exportSymbol('videojs.Component', vjs.Component);
goog.exportProperty(vjs.Component.prototype, 'dispose', vjs.Component.prototype.dispose);
goog.exportProperty(vjs.Component.prototype, 'createEl', vjs.Component.prototype.createEl);
goog.exportProperty(vjs.Component.prototype, 'el', vjs.Component.prototype.el);
goog.exportProperty(vjs.Component.prototype, 'addChild', vjs.Component.prototype.addChild);
goog.exportProperty(vjs.Component.prototype, 'children', vjs.Component.prototype.children);
goog.exportProperty(vjs.Component.prototype, 'on', vjs.Component.prototype.on);
goog.exportProperty(vjs.Component.prototype, 'off', vjs.Component.prototype.off);
goog.exportProperty(vjs.Component.prototype, 'one', vjs.Component.prototype.one);
goog.exportProperty(vjs.Component.prototype, 'trigger', vjs.Component.prototype.trigger);
goog.exportProperty(vjs.Component.prototype, 'triggerReady', vjs.Component.prototype.triggerReady);
goog.exportProperty(vjs.Component.prototype, 'show', vjs.Component.prototype.show);
goog.exportProperty(vjs.Component.prototype, 'hide', vjs.Component.prototype.hide);
goog.exportProperty(vjs.Component.prototype, 'width', vjs.Component.prototype.width);
goog.exportProperty(vjs.Component.prototype, 'height', vjs.Component.prototype.height);
goog.exportProperty(vjs.Component.prototype, 'dimensions', vjs.Component.prototype.dimensions);
goog.exportProperty(vjs.Component.prototype, 'ready', vjs.Component.prototype.ready);
goog.exportSymbol('videojs.Player', vjs.Player);
goog.exportProperty(vjs.Player.prototype, 'dispose', vjs.Player.prototype.dispose);
goog.exportSymbol('videojs.MediaLoader', vjs.MediaLoader);
goog.exportSymbol('videojs.TextTrackDisplay', vjs.TextTrackDisplay);
goog.exportSymbol('videojs.ControlBar', vjs.ControlBar);
goog.exportSymbol('videojs.Button', vjs.Button);
goog.exportSymbol('videojs.PlayToggle', vjs.PlayToggle);
goog.exportSymbol('videojs.FullscreenToggle', vjs.FullscreenToggle);
goog.exportSymbol('videojs.BigPlayButton', vjs.BigPlayButton);
goog.exportSymbol('videojs.LoadingSpinner', vjs.LoadingSpinner);
goog.exportSymbol('videojs.CurrentTimeDisplay', vjs.CurrentTimeDisplay);
goog.exportSymbol('videojs.DurationDisplay', vjs.DurationDisplay);
goog.exportSymbol('videojs.TimeDivider', vjs.TimeDivider);
goog.exportSymbol('videojs.RemainingTimeDisplay', vjs.RemainingTimeDisplay);
goog.exportSymbol('videojs.Slider', vjs.Slider);
goog.exportSymbol('videojs.ProgressControl', vjs.ProgressControl);
goog.exportSymbol('videojs.SeekBar', vjs.SeekBar);
goog.exportSymbol('videojs.LoadProgressBar', vjs.LoadProgressBar);
goog.exportSymbol('videojs.PlayProgressBar', vjs.PlayProgressBar);
goog.exportSymbol('videojs.SeekHandle', vjs.SeekHandle);
goog.exportSymbol('videojs.VolumeControl', vjs.VolumeControl);
goog.exportSymbol('videojs.VolumeBar', vjs.VolumeBar);
goog.exportSymbol('videojs.VolumeLevel', vjs.VolumeLevel);
goog.exportSymbol('videojs.VolumeHandle', vjs.VolumeHandle);
goog.exportSymbol('videojs.MuteToggle', vjs.MuteToggle);
goog.exportSymbol('videojs.PosterImage', vjs.PosterImage);
goog.exportSymbol('videojs.Menu', vjs.Menu);
goog.exportSymbol('videojs.MenuItem', vjs.MenuItem);
goog.exportSymbol('videojs.SubtitlesButton', vjs.SubtitlesButton);
goog.exportSymbol('videojs.CaptionsButton', vjs.CaptionsButton);
goog.exportSymbol('videojs.ChaptersButton', vjs.ChaptersButton);
goog.exportSymbol('videojs.MediaTechController', vjs.MediaTechController);
goog.exportProperty(vjs.MediaTechController.prototype, 'features', vjs.MediaTechController.prototype.features);
goog.exportProperty(vjs.MediaTechController.prototype.features, 'volumeControl', vjs.MediaTechController.prototype.features.volumeControl);
goog.exportProperty(vjs.MediaTechController.prototype.features, 'fullscreenResize', vjs.MediaTechController.prototype.features.fullscreenResize);
goog.exportProperty(vjs.MediaTechController.prototype.features, 'progressEvents', vjs.MediaTechController.prototype.features.progressEvents);
goog.exportProperty(vjs.MediaTechController.prototype.features, 'timeupdateEvents', vjs.MediaTechController.prototype.features.timeupdateEvents);
goog.exportSymbol('videojs.Html5', vjs.Html5);
goog.exportProperty(vjs.Html5, 'Events', vjs.Html5.Events);
goog.exportProperty(vjs.Html5, 'isSupported', vjs.Html5.isSupported);
goog.exportProperty(vjs.Html5, 'canPlaySource', vjs.Html5.canPlaySource);
// Export non-standard HTML5 video API methods.
// Standard method names already protected by default externs.
goog.exportProperty(vjs.Html5.prototype, 'setCurrentTime', vjs.Html5.prototype.setCurrentTime);
goog.exportProperty(vjs.Html5.prototype, 'setVolume', vjs.Html5.prototype.setVolume);
goog.exportProperty(vjs.Html5.prototype, 'setMuted', vjs.Html5.prototype.setMuted);
goog.exportProperty(vjs.Html5.prototype, 'setPreload', vjs.Html5.prototype.setPreload);
goog.exportProperty(vjs.Html5.prototype, 'setAutoplay', vjs.Html5.prototype.setAutoplay);
goog.exportProperty(vjs.Html5.prototype, 'setLoop', vjs.Html5.prototype.setLoop);
goog.exportSymbol('videojs.Flash', vjs.Flash);
goog.exportProperty(vjs.Flash, 'isSupported', vjs.Flash.isSupported);
goog.exportProperty(vjs.Flash, 'canPlaySource', vjs.Flash.canPlaySource);
goog.exportProperty(vjs.Flash, 'onReady', vjs.Flash['onReady']);
goog.exportSymbol('videojs.TextTrack', vjs.TextTrack);
goog.exportProperty(vjs.TextTrack.prototype, 'label', vjs.TextTrack.prototype.label);
goog.exportSymbol('videojs.CaptionsTrack', vjs.CaptionsTrack);
goog.exportSymbol('videojs.SubtitlesTrack', vjs.SubtitlesTrack);
goog.exportSymbol('videojs.ChaptersTrack', vjs.ChaptersTrack);
goog.exportSymbol('videojs.autoSetup', vjs.autoSetup);
goog.exportSymbol('videojs.plugin', vjs.plugin);
goog.exportSymbol('videojs.createTimeRange', vjs.createTimeRange);

69
src/js/json.js Normal file
View File

@ -0,0 +1,69 @@
/**
* @fileoverview Add JSON support
* @suppress {undefinedVars}
* (Compiler doesn't like JSON not being declared)
*/
/**
* Javascript JSON implementation
* (Parse Method Only)
* https://github.com/douglascrockford/JSON-js/blob/master/json2.js
* Only using for parse method when parsing data-setup attribute JSON.
* @type {Object}
* @suppress {undefinedVars}
*/
vjs.JSON;
/**
* @suppress {undefinedVars}
*/
if (typeof window.JSON !== 'undefined' && window.JSON.parse === 'function') {
vjs.JSON = window.JSON;
} else {
vjs.JSON = {};
var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
vjs.JSON.parse = function (text, reviver) {
var j;
function walk(holder, key) {
var k, v, value = holder[key];
if (value && typeof value === 'object') {
for (k in value) {
if (Object.prototype.hasOwnProperty.call(value, k)) {
v = walk(value, k);
if (v !== undefined) {
value[k] = v;
} else {
delete value[k];
}
}
}
}
return reviver.call(holder, key, value);
}
text = String(text);
cx.lastIndex = 0;
if (cx.test(text)) {
text = text.replace(cx, function (a) {
return '\\u' +
('0000' + a.charCodeAt(0).toString(16)).slice(-4);
});
}
if (/^[\],:{}\s]*$/
.test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@')
.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']')
.replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
j = eval('(' + text + ')');
return typeof reviver === 'function' ?
walk({'': j}, '') : j;
}
throw new SyntaxError('JSON.parse(): invalid or malformed JSON data');
};
}

624
src/js/lib.js Normal file
View File

@ -0,0 +1,624 @@
var hasOwnProp = Object.prototype.hasOwnProperty;
/**
* Creates an element and applies properties.
* @param {String=} tagName Name of tag to be created.
* @param {Object=} properties Element properties to be applied.
* @return {Element}
*/
vjs.createEl = function(tagName, properties){
var el = document.createElement(tagName || 'div');
for (var propName in properties){
if (hasOwnProp.call(properties, propName)) {
//el[propName] = properties[propName];
// Not remembering why we were checking for dash
// but using setAttribute means you have to use getAttribute
// The check for dash checks for the aria-* attributes, like aria-label, aria-valuemin.
// The additional check for "role" is because the default method for adding attributes does not
// add the attribute "role". My guess is because it's not a valid attribute in some namespaces, although
// browsers handle the attribute just fine. The W3C allows for aria-* attributes to be used in pre-HTML5 docs.
// http://www.w3.org/TR/wai-aria-primer/#ariahtml. Using setAttribute gets around this problem.
if (propName.indexOf('aria-') !== -1 || propName=='role') {
el.setAttribute(propName, properties[propName]);
} else {
el[propName] = properties[propName];
}
}
}
return el;
};
/**
* Uppercase the first letter of a string
* @param {String} string String to be uppercased
* @return {String}
*/
vjs.capitalize = function(string){
return string.charAt(0).toUpperCase() + string.slice(1);
};
/**
* Object functions container
* @type {Object}
*/
vjs.obj = {};
/**
* Object.create shim for prototypal inheritance.
* https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/create
* @param {Object} obj Object to use as prototype
*/
vjs.obj.create = Object.create || function(obj){
//Create a new function called 'F' which is just an empty object.
function F() {}
//the prototype of the 'F' function should point to the
//parameter of the anonymous function.
F.prototype = obj;
//create a new constructor function based off of the 'F' function.
return new F();
};
/**
* Loop through each property in an object and call a function
* whose arguments are (key,value)
* @param {Object} obj Object of properties
* @param {Function} fn Function to be called on each property.
* @this {*}
*/
vjs.obj.each = function(obj, fn, context){
for (var key in obj) {
if (hasOwnProp.call(obj, key)) {
fn.call(context || this, key, obj[key]);
}
}
};
/**
* Merge two objects together and return the original.
* @param {Object} obj1
* @param {Object} obj2
* @return {Object}
*/
vjs.obj.merge = function(obj1, obj2){
if (!obj2) { return obj1; }
for (var key in obj2){
if (hasOwnProp.call(obj2, key)) {
obj1[key] = obj2[key];
}
}
return obj1;
};
/**
* Merge two objects, and merge any properties that are objects
* instead of just overwriting one. Uses to merge options hashes
* where deeper default settings are important.
* @param {Object} obj1 Object to override
* @param {Object} obj2 Overriding object
* @return {Object} New object. Obj1 and Obj2 will be untouched.
*/
vjs.obj.deepMerge = function(obj1, obj2){
var key, val1, val2, objDef;
objDef = '[object Object]';
// Make a copy of obj1 so we're not ovewriting original values.
// like prototype.options_ and all sub options objects
obj1 = vjs.obj.copy(obj1);
for (key in obj2){
if (hasOwnProp.call(obj2, key)) {
val1 = obj1[key];
val2 = obj2[key];
// Check if both properties are pure objects and do a deep merge if so
if (vjs.obj.isPlain(val1) && vjs.obj.isPlain(val2)) {
obj1[key] = vjs.obj.deepMerge(val1, val2);
} else {
obj1[key] = obj2[key];
}
}
}
return obj1;
};
/**
* Make a copy of the supplied object
* @param {Object} obj Object to copy
* @return {Object} Copy of object
*/
vjs.obj.copy = function(obj){
return vjs.obj.merge({}, obj);
};
/**
* Check if an object is plain, and not a dom node or any object sub-instance
* @param {Object} obj Object to check
* @return {Boolean} True if plain, false otherwise
*/
vjs.obj.isPlain = function(obj){
return !!obj
&& typeof obj === 'object'
&& obj.toString() === '[object Object]'
&& obj.constructor === Object;
};
/**
* Bind (a.k.a proxy or Context). A simple method for changing the context of a function
It also stores a unique id on the function so it can be easily removed from events
* @param {*} context The object to bind as scope
* @param {Function} fn The function to be bound to a scope
* @param {Number=} uid An optional unique ID for the function to be set
* @return {Function}
*/
vjs.bind = function(context, fn, uid) {
// Make sure the function has a unique ID
if (!fn.guid) { fn.guid = vjs.guid++; }
// Create the new function that changes the context
var ret = function() {
return fn.apply(context, arguments);
};
// Allow for the ability to individualize this function
// Needed in the case where multiple objects might share the same prototype
// IF both items add an event listener with the same function, then you try to remove just one
// it will remove both because they both have the same guid.
// when using this, you need to use the bind method when you remove the listener as well.
// currently used in text tracks
ret.guid = (uid) ? uid + '_' + fn.guid : fn.guid;
return ret;
};
/**
* Element Data Store. Allows for binding data to an element without putting it directly on the element.
* Ex. Event listneres are stored here.
* (also from jsninja.com, slightly modified and updated for closure compiler)
* @type {Object}
*/
vjs.cache = {};
/**
* Unique ID for an element or function
* @type {Number}
*/
vjs.guid = 1;
/**
* Unique attribute name to store an element's guid in
* @type {String}
* @constant
*/
vjs.expando = 'vdata' + (new Date()).getTime();
/**
* Returns the cache object where data for an element is stored
* @param {Element} el Element to store data for.
* @return {Object}
*/
vjs.getData = function(el){
var id = el[vjs.expando];
if (!id) {
id = el[vjs.expando] = vjs.guid++;
vjs.cache[id] = {};
}
return vjs.cache[id];
};
/**
* Returns the cache object where data for an element is stored
* @param {Element} el Element to store data for.
* @return {Object}
*/
vjs.hasData = function(el){
var id = el[vjs.expando];
return !(!id || vjs.isEmpty(vjs.cache[id]));
};
/**
* Delete data for the element from the cache and the guid attr from getElementById
* @param {Element} el Remove data for an element
*/
vjs.removeData = function(el){
var id = el[vjs.expando];
if (!id) { return; }
// Remove all stored data
// Changed to = null
// http://coding.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/
// vjs.cache[id] = null;
delete vjs.cache[id];
// Remove the expando property from the DOM node
try {
delete el[vjs.expando];
} catch(e) {
if (el.removeAttribute) {
el.removeAttribute(vjs.expando);
} else {
// IE doesn't appear to support removeAttribute on the document element
el[vjs.expando] = null;
}
}
};
vjs.isEmpty = function(obj) {
for (var prop in obj) {
// Inlude null properties as empty.
if (obj[prop] !== null) {
return false;
}
}
return true;
};
/**
* Add a CSS class name to an element
* @param {Element} element Element to add class name to
* @param {String} classToAdd Classname to add
*/
vjs.addClass = function(element, classToAdd){
if ((' '+element.className+' ').indexOf(' '+classToAdd+' ') == -1) {
element.className = element.className === '' ? classToAdd : element.className + ' ' + classToAdd;
}
};
/**
* Remove a CSS class name from an element
* @param {Element} element Element to remove from class name
* @param {String} classToAdd Classname to remove
*/
vjs.removeClass = function(element, classToRemove){
if (element.className.indexOf(classToRemove) == -1) { return; }
var classNames = element.className.split(' ');
// IE8 Does not support array.indexOf so using a for loop
for (var i = classNames.length - 1; i >= 0; i--) {
if (classNames[i] === classToRemove) {
classNames.splice(i,1);
}
}
// classNames.splice(classNames.indexOf(classToRemove),1);
element.className = classNames.join(' ');
};
/**
* Element for testing browser HTML5 video capabilities
* @type {Element}
* @constant
*/
vjs.TEST_VID = vjs.createEl('video');
/**
* Useragent for browser testing.
* @type {String}
* @constant
*/
vjs.USER_AGENT = navigator.userAgent;
/**
* Device is an iPhone
* @type {Boolean}
* @constant
*/
vjs.IS_IPHONE = !!vjs.USER_AGENT.match(/iPhone/i);
vjs.IS_IPAD = !!vjs.USER_AGENT.match(/iPad/i);
vjs.IS_IPOD = !!vjs.USER_AGENT.match(/iPod/i);
vjs.IS_IOS = vjs.IS_IPHONE || vjs.IS_IPAD || vjs.IS_IPOD;
vjs.IOS_VERSION = (function(){
var match = vjs.USER_AGENT.match(/OS (\d+)_/i);
if (match && match[1]) { return match[1]; }
})();
vjs.IS_ANDROID = !!vjs.USER_AGENT.match(/Android.*AppleWebKit/i);
vjs.ANDROID_VERSION = (function() {
var match = vjs.USER_AGENT.match(/Android (\d+)\./i);
if (match && match[1]) {
return match[1];
}
return null;
})();
vjs.IS_FIREFOX = function(){ return !!vjs.USER_AGENT.match('Firefox'); };
/**
* Get an element's attribute values, as defined on the HTML tag
* Attributs are not the same as properties. They're defined on the tag
* or with setAttribute (which shouldn't be used with HTML)
* This will return true or false for boolean attributes.
* @param {Element} tag Element from which to get tag attributes
* @return {Object}
*/
vjs.getAttributeValues = function(tag){
var obj = {};
// Known boolean attributes
// We can check for matching boolean properties, but older browsers
// won't know about HTML5 boolean attributes that we still read from.
// Bookending with commas to allow for an easy string search.
var knownBooleans = ','+'autoplay,controls,loop,muted,default'+',';
if (tag && tag.attributes && tag.attributes.length > 0) {
var attrs = tag.attributes;
var attrName, attrVal;
for (var i = attrs.length - 1; i >= 0; i--) {
attrName = attrs[i].name;
attrVal = attrs[i].value;
// Check for known booleans
// The matching element property will return a value for typeof
if (typeof tag[attrName] === 'boolean' || knownBooleans.indexOf(','+attrName+',') !== -1) {
// The value of an included boolean attribute is typically an empty string ('')
// which would equal false if we just check for a false value.
// We also don't want support bad code like autoplay='false'
attrVal = (attrVal !== null) ? true : false;
}
obj[attrName] = attrVal;
}
}
return obj;
};
/**
* Get the computed style value for an element
* From http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/
* @param {Element} el Element to get style value for
* @param {String} strCssRule Style name
* @return {String} Style value
*/
vjs.getComputedDimension = function(el, strCssRule){
var strValue = '';
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(el, '').getPropertyValue(strCssRule);
} else if(el.currentStyle){
// IE8 Width/Height support
strValue = el['client'+strCssRule.substr(0,1).toUpperCase() + strCssRule.substr(1)] + 'px';
}
return strValue;
};
/**
* Insert an element as the first child node of another
* @param {Element} child Element to insert
* @param {[type]} parent Element to insert child into
*/
vjs.insertFirst = function(child, parent){
if (parent.firstChild) {
parent.insertBefore(child, parent.firstChild);
} else {
parent.appendChild(child);
}
};
/**
* Object to hold browser support information
* @type {Object}
*/
vjs.support = {};
/**
* Shorthand for document.getElementById()
* Also allows for CSS (jQuery) ID syntax. But nothing other than IDs.
* @param {String} id Element ID
* @return {Element} Element with supplied ID
*/
vjs.el = function(id){
if (id.indexOf('#') === 0) {
id = id.slice(1);
}
return document.getElementById(id);
};
/**
* Format seconds as a time string, H:MM:SS or M:SS
* Supplying a guide (in seconds) will force a number of leading zeros
* to cover the length of the guide
* @param {Number} seconds Number of seconds to be turned into a string
* @param {Number} guide Number (in seconds) to model the string after
* @return {String} Time formatted as H:MM:SS or M:SS
*/
vjs.formatTime = function(seconds, guide) {
guide = guide || seconds; // Default to using seconds as guide
var s = Math.floor(seconds % 60),
m = Math.floor(seconds / 60 % 60),
h = Math.floor(seconds / 3600),
gm = Math.floor(guide / 60 % 60),
gh = Math.floor(guide / 3600);
// Check if we need to show hours
h = (h > 0 || gh > 0) ? h + ':' : '';
// If hours are showing, we may need to add a leading zero.
// Always show at least one digit of minutes.
m = (((h || gm >= 10) && m < 10) ? '0' + m : m) + ':';
// Check if leading zero is need for seconds
s = (s < 10) ? '0' + s : s;
return h + m + s;
};
// Attempt to block the ability to select text while dragging controls
vjs.blockTextSelection = function(){
document.body.focus();
document.onselectstart = function () { return false; };
};
// Turn off text selection blocking
vjs.unblockTextSelection = function(){ document.onselectstart = function () { return true; }; };
/**
* Trim whitespace from the ends of a string.
* @param {String} string String to trim
* @return {String} Trimmed string
*/
vjs.trim = function(string){
return string.toString().replace(/^\s+/, '').replace(/\s+$/, '');
};
/**
* Should round off a number to a decimal place
* @param {Number} num Number to round
* @param {Number} dec Number of decimal places to round to
* @return {Number} Rounded number
*/
vjs.round = function(num, dec) {
if (!dec) { dec = 0; }
return Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
};
/**
* Should create a fake TimeRange object
* Mimics an HTML5 time range instance, which has functions that
* return the start and end times for a range
* TimeRanges are returned by the buffered() method
* @param {Number} start Start time in seconds
* @param {Number} end End time in seconds
* @return {Object} Fake TimeRange object
*/
vjs.createTimeRange = function(start, end){
return {
length: 1,
start: function() { return start; },
end: function() { return end; }
};
};
/**
* Simple http request for retrieving external files (e.g. text tracks)
* @param {String} url URL of resource
* @param {Function=} onSuccess Success callback
* @param {Function=} onError Error callback
*/
vjs.get = function(url, onSuccess, onError){
var local = (url.indexOf('file:') === 0 || (window.location.href.indexOf('file:') === 0 && url.indexOf('http') === -1));
if (typeof XMLHttpRequest === 'undefined') {
window.XMLHttpRequest = function () {
try { return new window.ActiveXObject('Msxml2.XMLHTTP.6.0'); } catch (e) {}
try { return new window.ActiveXObject('Msxml2.XMLHTTP.3.0'); } catch (f) {}
try { return new window.ActiveXObject('Msxml2.XMLHTTP'); } catch (g) {}
throw new Error('This browser does not support XMLHttpRequest.');
};
}
var request = new XMLHttpRequest();
try {
request.open('GET', url);
} catch(e) {
onError(e);
}
request.onreadystatechange = function() {
if (request.readyState === 4) {
if (request.status === 200 || local && request.status === 0) {
onSuccess(request.responseText);
} else {
if (onError) {
onError();
}
}
}
};
try {
request.send();
} catch(e) {
if (onError) {
onError(e);
}
}
};
/* Local Storage
================================================================================ */
vjs.setLocalStorage = function(key, value){
try {
// IE was throwing errors referencing the var anywhere without this
var localStorage = window.localStorage || false;
if (!localStorage) { return; }
localStorage[key] = value;
} catch(e) {
if (e.code == 22 || e.code == 1014) { // Webkit == 22 / Firefox == 1014
vjs.log('LocalStorage Full (VideoJS)', e);
} else {
if (e.code == 18) {
vjs.log('LocalStorage not allowed (VideoJS)', e);
} else {
vjs.log('LocalStorage Error (VideoJS)', e);
}
}
}
};
/**
* Get abosolute version of relative URL. Used to tell flash correct URL.
* http://stackoverflow.com/questions/470832/getting-an-absolute-url-from-a-relative-one-ie6-issue
* @param {String} url URL to make absolute
* @return {String} Absolute URL
*/
vjs.getAbsoluteURL = function(url){
// Check if absolute URL
if (!url.match(/^https?:\/\//)) {
// Convert to absolute URL. Flash hosted off-site needs an absolute URL.
url = vjs.createEl('div', {
innerHTML: '<a href="'+url+'">x</a>'
}).firstChild.href;
}
return url;
};
// usage: log('inside coolFunc',this,arguments);
// http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
vjs.log = function(){
vjs.log.history = vjs.log.history || []; // store logs to an array for reference
vjs.log.history.push(arguments);
if(window.console){
window.console.log(Array.prototype.slice.call(arguments));
}
};
// Offset Left
// getBoundingClientRect technique from John Resig http://ejohn.org/blog/getboundingclientrect-is-awesome/
vjs.findPosition = function(el) {
var box, docEl, body, clientLeft, scrollLeft, left, clientTop, scrollTop, top;
if (el.getBoundingClientRect && el.parentNode) {
box = el.getBoundingClientRect();
}
if (!box) {
return {
left: 0,
top: 0
};
}
docEl = document.documentElement;
body = document.body;
clientLeft = docEl.clientLeft || body.clientLeft || 0;
scrollLeft = window.pageXOffset || body.scrollLeft;
left = box.left + scrollLeft - clientLeft;
clientTop = docEl.clientTop || body.clientTop || 0;
scrollTop = window.pageYOffset || body.scrollTop;
top = box.top + scrollTop - clientTop;
return {
left: left,
top: top
};
};

40
src/js/loading-spinner.js Normal file
View File

@ -0,0 +1,40 @@
/* Loading Spinner
================================================================================ */
/**
* Loading spinner for waiting events
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.LoadingSpinner = vjs.Component.extend({
/** @constructor */
init: function(player, options){
vjs.Component.call(this, player, options);
player.on('canplay', vjs.bind(this, this.hide));
player.on('canplaythrough', vjs.bind(this, this.hide));
player.on('playing', vjs.bind(this, this.hide));
player.on('seeked', vjs.bind(this, this.hide));
player.on('seeking', vjs.bind(this, this.show));
// in some browsers seeking does not trigger the 'playing' event,
// so we also need to trap 'seeked' if we are going to set a
// 'seeking' event
player.on('seeked', vjs.bind(this, this.hide));
player.on('error', vjs.bind(this, this.show));
// Not showing spinner on stalled any more. Browsers may stall and then not trigger any events that would remove the spinner.
// Checked in Chrome 16 and Safari 5.1.2. http://help.videojs.com/discussions/problems/883-why-is-the-download-progress-showing
// player.on('stalled', vjs.bind(this, this.show));
player.on('waiting', vjs.bind(this, this.show));
}
});
vjs.LoadingSpinner.prototype.createEl = function(){
return vjs.Component.prototype.createEl.call(this, 'div', {
className: 'vjs-loading-spinner'
});
};

27
src/js/media/flash.externs.js Normal file
View File

@ -0,0 +1,27 @@
/**
* @fileoverview Externs for video-js.swf. Externs are functions
* that the compiler shouldn't obfuscate.
*/
/**
* @param {string} name
*/
HTMLObjectElement.prototype.vjs_getProperty = function(name) {};
/**
* @param {string} name
* @param {string|number} value
*/
HTMLObjectElement.prototype.vjs_setProperty = function(name, value) {};
/**
* Control methods
*/
HTMLObjectElement.prototype.vjs_play = function() {};
HTMLObjectElement.prototype.vjs_pause = function() {};
HTMLObjectElement.prototype.vjs_load = function() {};
/**
* @param {string} src
*/
HTMLObjectElement.prototype.vjs_src = function(src) {};

455
src/js/media/flash.js Normal file
View File

@ -0,0 +1,455 @@
/**
* @fileoverview VideoJS-SWF - Custom Flash Player with HTML5-ish API
* https://github.com/zencoder/video-js-swf
* Not using setupTriggers. Using global onEvent func to distribute events
*/
/**
* HTML5 Media Controller - Wrapper for HTML5 Media API
* @param {vjs.Player|Object} player
* @param {Object=} options
* @param {Function=} ready
* @constructor
*/
vjs.Flash = vjs.MediaTechController.extend({
/** @constructor */
init: function(player, options, ready){
vjs.MediaTechController.call(this, player, options, ready);
var source = options['source'],
// Which element to embed in
parentEl = options['parentEl'],
// Create a temporary element to be replaced by swf object
placeHolder = this.el_ = vjs.createEl('div', { id: player.id() + '_temp_flash' }),
// Generate ID for swf object
objId = player.id()+'_flash_api',
// Store player options in local var for optimization
// TODO: switch to using player methods instead of options
// e.g. player.autoplay();
playerOptions = player.options_,
// Merge default flashvars with ones passed in to init
flashVars = vjs.obj.merge({
// SWF Callback Functions
'readyFunction': 'videojs.Flash.onReady',
'eventProxyFunction': 'videojs.Flash.onEvent',
'errorEventProxyFunction': 'videojs.Flash.onError',
// Player Settings
'autoplay': playerOptions.autoplay,
'preload': playerOptions.preload,
'loop': playerOptions.loop,
'muted': playerOptions.muted
}, options['flashVars']),
// Merge default parames with ones passed in
params = vjs.obj.merge({
'wmode': 'opaque', // Opaque is needed to overlay controls, but can affect playback performance
'bgcolor': '#000000' // Using bgcolor prevents a white flash when the object is loading
}, options['params']),
// Merge default attributes with ones passed in
attributes = vjs.obj.merge({
'id': objId,
'name': objId, // Both ID and Name needed or swf to identifty itself
'class': 'vjs-tech'
}, options['attributes'])
;
// If source was supplied pass as a flash var.
if (source) {
flashVars['src'] = encodeURIComponent(vjs.getAbsoluteURL(source.src));
}
// Add placeholder to player div
vjs.insertFirst(placeHolder, parentEl);
// Having issues with Flash reloading on certain page actions (hide/resize/fullscreen) in certain browsers
// This allows resetting the playhead when we catch the reload
if (options['startTime']) {
this.ready(function(){
this.load();
this.play();
this.currentTime(options['startTime']);
});
}
// Flash iFrame Mode
// In web browsers there are multiple instances where changing the parent element or visibility of a plugin causes the plugin to reload.
// - Firefox just about always. https://bugzilla.mozilla.org/show_bug.cgi?id=90268 (might be fixed by version 13)
// - Webkit when hiding the plugin
// - Webkit and Firefox when using requestFullScreen on a parent element
// Loading the flash plugin into a dynamically generated iFrame gets around most of these issues.
// Issues that remain include hiding the element and requestFullScreen in Firefox specifically
// There's on particularly annoying issue with this method which is that Firefox throws a security error on an offsite Flash object loaded into a dynamically created iFrame.
// Even though the iframe was inserted into a page on the web, Firefox + Flash considers it a local app trying to access an internet file.
// I tried mulitple ways of setting the iframe src attribute but couldn't find a src that worked well. Tried a real/fake source, in/out of domain.
// Also tried a method from stackoverflow that caused a security error in all browsers. http://stackoverflow.com/questions/2486901/how-to-set-document-domain-for-a-dynamically-generated-iframe
// In the end the solution I found to work was setting the iframe window.location.href right before doing a document.write of the Flash object.
// The only downside of this it seems to trigger another http request to the original page (no matter what's put in the href). Not sure why that is.
// NOTE (2012-01-29): Cannot get Firefox to load the remote hosted SWF into a dynamically created iFrame
// Firefox 9 throws a security error, unleess you call location.href right before doc.write.
// Not sure why that even works, but it causes the browser to look like it's continuously trying to load the page.
// Firefox 3.6 keeps calling the iframe onload function anytime I write to it, causing an endless loop.
if (options['iFrameMode'] === true && !vjs.IS_FIREFOX) {
// Create iFrame with vjs-tech class so it's 100% width/height
var iFrm = vjs.createEl('iframe', {
'id': objId + '_iframe',
'name': objId + '_iframe',
'className': 'vjs-tech',
'scrolling': 'no',
'marginWidth': 0,
'marginHeight': 0,
'frameBorder': 0
});
// Update ready function names in flash vars for iframe window
flashVars['readyFunction'] = 'ready';
flashVars['eventProxyFunction'] = 'events';
flashVars['errorEventProxyFunction'] = 'errors';
// Tried multiple methods to get this to work in all browsers
// Tried embedding the flash object in the page first, and then adding a place holder to the iframe, then replacing the placeholder with the page object.
// The goal here was to try to load the swf URL in the parent page first and hope that got around the firefox security error
// var newObj = vjs.Flash.embed(options['swf'], placeHolder, flashVars, params, attributes);
// (in onload)
// var temp = vjs.createEl('a', { id:'asdf', innerHTML: 'asdf' } );
// iDoc.body.appendChild(temp);
// Tried embedding the flash object through javascript in the iframe source.
// This works in webkit but still triggers the firefox security error
// iFrm.src = 'javascript: document.write('"+vjs.Flash.getEmbedCode(options['swf'], flashVars, params, attributes)+"');";
// Tried an actual local iframe just to make sure that works, but it kills the easiness of the CDN version if you require the user to host an iframe
// We should add an option to host the iframe locally though, because it could help a lot of issues.
// iFrm.src = "iframe.html";
// Wait until iFrame has loaded to write into it.
vjs.on(iFrm, 'load', vjs.bind(this, function(){
var iDoc,
iWin = iFrm.contentWindow;
// The one working method I found was to use the iframe's document.write() to create the swf object
// This got around the security issue in all browsers except firefox.
// I did find a hack where if I call the iframe's window.location.href='', it would get around the security error
// However, the main page would look like it was loading indefinitely (URL bar loading spinner would never stop)
// Plus Firefox 3.6 didn't work no matter what I tried.
// if (vjs.USER_AGENT.match('Firefox')) {
// iWin.location.href = '';
// }
// Get the iFrame's document depending on what the browser supports
iDoc = iFrm.contentDocument ? iFrm.contentDocument : iFrm.contentWindow.document;
// Tried ensuring both document domains were the same, but they already were, so that wasn't the issue.
// Even tried adding /. that was mentioned in a browser security writeup
// document.domain = document.domain+'/.';
// iDoc.domain = document.domain+'/.';
// Tried adding the object to the iframe doc's innerHTML. Security error in all browsers.
// iDoc.body.innerHTML = swfObjectHTML;
// Tried appending the object to the iframe doc's body. Security error in all browsers.
// iDoc.body.appendChild(swfObject);
// Using document.write actually got around the security error that browsers were throwing.
// Again, it's a dynamically generated (same domain) iframe, loading an external Flash swf.
// Not sure why that's a security issue, but apparently it is.
iDoc.write(vjs.Flash.getEmbedCode(options['swf'], flashVars, params, attributes));
// Setting variables on the window needs to come after the doc write because otherwise they can get reset in some browsers
// So far no issues with swf ready event being called before it's set on the window.
iWin['player'] = this.player_;
// Create swf ready function for iFrame window
iWin['ready'] = vjs.bind(this.player_, function(currSwf){
var el = iDoc.getElementById(currSwf),
player = this,
tech = player.tech;
// Update reference to playback technology element
tech.el_ = el;
// Now that the element is ready, make a click on the swf play the video
vjs.on(el, 'click', tech.bind(tech.onClick));
// Make sure swf is actually ready. Sometimes the API isn't actually yet.
vjs.Flash.checkReady(tech);
});
// Create event listener for all swf events
iWin['events'] = vjs.bind(this.player_, function(swfID, eventName){
var player = this;
if (player && player.techName === 'flash') {
player.trigger(eventName);
}
});
// Create error listener for all swf errors
iWin['errors'] = vjs.bind(this.player_, function(swfID, eventName){
vjs.log('Flash Error', eventName);
});
}));
// Replace placeholder with iFrame (it will load now)
placeHolder.parentNode.replaceChild(iFrm, placeHolder);
// If not using iFrame mode, embed as normal object
} else {
vjs.Flash.embed(options['swf'], placeHolder, flashVars, params, attributes);
}
}
});
vjs.Flash.prototype.dispose = function(){
vjs.MediaTechController.prototype.dispose.call(this);
};
vjs.Flash.prototype.play = function(){
this.el_.vjs_play();
};
vjs.Flash.prototype.pause = function(){
this.el_.vjs_pause();
};
vjs.Flash.prototype.src = function(src){
// Make sure source URL is abosolute.
src = vjs.getAbsoluteURL(src);
this.el_.vjs_src(src);
// Currently the SWF doesn't autoplay if you load a source later.
// e.g. Load player w/ no source, wait 2s, set src.
if (this.player_.autoplay()) {
var tech = this;
setTimeout(function(){ tech.play(); }, 0);
}
};
vjs.Flash.prototype.load = function(){
this.el_.vjs_load();
};
vjs.Flash.prototype.poster = function(){
this.el_.vjs_getProperty('poster');
};
vjs.Flash.prototype.buffered = function(){
return vjs.createTimeRange(0, this.el_.vjs_getProperty('buffered'));
};
vjs.Flash.prototype.supportsFullScreen = function(){
return false; // Flash does not allow fullscreen through javascript
};
vjs.Flash.prototype.enterFullScreen = function(){
return false;
};
// Create setters and getters for attributes
var api = vjs.Flash.prototype,
readWrite = '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(',');
// Overridden: buffered
/**
* @this {*}
*/
var createSetter = function(attr){
var attrUpper = attr.charAt(0).toUpperCase() + attr.slice(1);
api['set'+attrUpper] = function(val){ return this.el_.vjs_setProperty(attr, val); };
};
/**
* @this {*}
*/
var createGetter = function(attr){
api[attr] = function(){ return this.el_.vjs_getProperty(attr); };
};
(function(){
var i;
// Create getter and setters for all read/write attributes
for (i = 0; i < readWrite.length; i++) {
createGetter(readWrite[i]);
createSetter(readWrite[i]);
}
// Create getters for read-only attributes
for (i = 0; i < readOnly.length; i++) {
createGetter(readOnly[i]);
}
})();
/* Flash Support Testing -------------------------------------------------------- */
vjs.Flash.isSupported = function(){
return vjs.Flash.version()[0] >= 10;
// return swfobject.hasFlashPlayerVersion('10');
};
vjs.Flash.canPlaySource = function(srcObj){
if (srcObj.type in vjs.Flash.formats) { return 'maybe'; }
};
vjs.Flash.formats = {
'video/flv': 'FLV',
'video/x-flv': 'FLV',
'video/mp4': 'MP4',
'video/m4v': 'MP4'
};
vjs.Flash['onReady'] = function(currSwf){
var el = vjs.el(currSwf);
// Get player from box
// On firefox reloads, el might already have a player
var player = el['player'] || el.parentNode['player'],
tech = player.tech;
// Reference player on tech element
el['player'] = player;
// Update reference to playback technology element
tech.el_ = el;
// Now that the element is ready, make a click on the swf play the video
tech.on('click', tech.onClick);
vjs.Flash.checkReady(tech);
};
// The SWF isn't alwasy ready when it says it is. Sometimes the API functions still need to be added to the object.
// If it's not ready, we set a timeout to check again shortly.
vjs.Flash.checkReady = function(tech){
// Check if API property exists
if (tech.el().vjs_getProperty) {
// If so, tell tech it's ready
tech.triggerReady();
// Otherwise wait longer.
} else {
setTimeout(function(){
vjs.Flash.checkReady(tech);
}, 50);
}
};
// Trigger events from the swf on the player
vjs.Flash['onEvent'] = function(swfID, eventName){
var player = vjs.el(swfID)['player'];
player.trigger(eventName);
};
// Log errors from the swf
vjs.Flash['onError'] = function(swfID, err){
var player = vjs.el(swfID)['player'];
player.trigger('error');
vjs.log('Flash Error', err, swfID);
};
// Flash Version Check
vjs.Flash.version = function(){
var version = '0,0,0';
// IE
try {
version = new window.ActiveXObject('ShockwaveFlash.ShockwaveFlash').GetVariable('$version').replace(/\D+/g, ',').match(/^,?(.+),?$/)[1];
// other browsers
} catch(e) {
try {
if (navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin){
version = (navigator.plugins['Shockwave Flash 2.0'] || navigator.plugins['Shockwave Flash']).description.replace(/\D+/g, ',').match(/^,?(.+),?$/)[1];
}
} catch(err) {}
}
return version.split(',');
};
// Flash embedding method. Only used in non-iframe mode
vjs.Flash.embed = function(swf, placeHolder, flashVars, params, attributes){
var code = vjs.Flash.getEmbedCode(swf, flashVars, params, attributes),
// Get element by embedding code and retrieving created element
obj = vjs.createEl('div', { innerHTML: code }).childNodes[0],
par = placeHolder.parentNode
;
placeHolder.parentNode.replaceChild(obj, placeHolder);
// IE6 seems to have an issue where it won't initialize the swf object after injecting it.
// This is a dumb fix
var newObj = par.childNodes[0];
setTimeout(function(){
newObj.style.display = 'block';
}, 1000);
return obj;
};
vjs.Flash.getEmbedCode = function(swf, flashVars, params, attributes){
var objTag = '<object type="application/x-shockwave-flash"',
flashVarsString = '',
paramsString = '',
attrsString = '';
// Convert flash vars to string
if (flashVars) {
vjs.obj.each(flashVars, function(key, val){
flashVarsString += (key + '=' + val + '&amp;');
});
}
// Add swf, flashVars, and other default params
params = vjs.obj.merge({
'movie': swf,
'flashvars': flashVarsString,
'allowScriptAccess': 'always', // Required to talk to swf
'allowNetworking': 'all' // All should be default, but having security issues.
}, params);
// Create param tags string
vjs.obj.each(params, function(key, val){
paramsString += '<param name="'+key+'" value="'+val+'" />';
});
attributes = vjs.obj.merge({
// Add swf to attributes (need both for IE and Others to work)
'data': swf,
// Default to 100% width/height
'width': '100%',
'height': '100%'
}, attributes);
// Create Attributes string
vjs.obj.each(attributes, function(key, val){
attrsString += (key + '="' + val + '" ');
});
return objTag + attrsString + '>' + paramsString + '</object>';
};

239
src/js/media/html5.js Normal file
View File

@ -0,0 +1,239 @@
/**
* @fileoverview HTML5 Media Controller - Wrapper for HTML5 Media API
*/
/**
* HTML5 Media Controller - Wrapper for HTML5 Media API
* @param {vjs.Player|Object} player
* @param {Object=} options
* @param {Function=} ready
* @constructor
*/
vjs.Html5 = vjs.MediaTechController.extend({
/** @constructor */
init: function(player, options, ready){
// volume cannot be changed from 1 on iOS
this.features.volumeControl = vjs.Html5.canControlVolume();
// In iOS, if you move a video element in the DOM, it breaks video playback.
this.features.movingMediaElementInDOM = !vjs.IS_IOS;
// HTML video is able to automatically resize when going to fullscreen
this.features.fullscreenResize = true;
vjs.MediaTechController.call(this, player, options, ready);
var source = options['source'];
// If the element source is already set, we may have missed the loadstart event, and want to trigger it.
// We don't want to set the source again and interrupt playback.
if (source && this.el_.currentSrc == source.src) {
player.trigger('loadstart');
// Otherwise set the source if one was provided.
} else if (source) {
this.el_.src = source.src;
}
// Chrome and Safari both have issues with autoplay.
// In Safari (5.1.1), when we move the video element into the container div, autoplay doesn't work.
// In Chrome (15), if you have autoplay + a poster + no controls, the video gets hidden (but audio plays)
// This fixes both issues. Need to wait for API, so it updates displays correctly
player.ready(function(){
if (this.options_['autoplay'] && this.paused()) {
this.tag.poster = null; // Chrome Fix. Fixed in Chrome v16.
this.play();
}
});
this.on('click', this.onClick);
this.setupTriggers();
this.triggerReady();
}
});
vjs.Html5.prototype.dispose = function(){
vjs.MediaTechController.prototype.dispose.call(this);
};
vjs.Html5.prototype.createEl = function(){
var player = this.player_,
// If possible, reuse original tag for HTML5 playback technology element
el = player.tag,
newEl;
// 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 (!el || this.features.movingMediaElementInDOM === false) {
// If the original tag is still there, remove it.
if (el) {
player.el().removeChild(el);
el = el.cloneNode(false);
} else {
el = vjs.createEl('video', {
id:player.id() + '_html5_api',
className:'vjs-tech'
});
}
// associate the player with the new tag
el['player'] = player;
vjs.insertFirst(el, player.el());
}
// Update specific tag settings, in case they were overridden
var attrs = ['autoplay','preload','loop','muted'];
for (var i = attrs.length - 1; i >= 0; i--) {
var attr = attrs[i];
if (player.options_[attr] !== null) {
el[attr] = player.options_[attr];
}
}
return el;
// jenniisawesome = true;
};
// Make video events trigger player events
// May seem verbose here, but makes other APIs possible.
vjs.Html5.prototype.setupTriggers = function(){
for (var i = vjs.Html5.Events.length - 1; i >= 0; i--) {
vjs.on(this.el_, vjs.Html5.Events[i], vjs.bind(this.player_, this.eventHandler));
}
};
// Triggers removed using this.off when disposed
vjs.Html5.prototype.eventHandler = function(e){
this.trigger(e);
// No need for media events to bubble up.
e.stopPropagation();
};
vjs.Html5.prototype.play = function(){ this.el_.play(); };
vjs.Html5.prototype.pause = function(){ this.el_.pause(); };
vjs.Html5.prototype.paused = function(){ return this.el_.paused; };
vjs.Html5.prototype.currentTime = function(){ return this.el_.currentTime; };
vjs.Html5.prototype.setCurrentTime = function(seconds){
try {
this.el_.currentTime = seconds;
} catch(e) {
vjs.log(e, 'Video is not ready. (Video.js)');
// this.warning(VideoJS.warnings.videoNotReady);
}
};
vjs.Html5.prototype.duration = function(){ return this.el_.duration || 0; };
vjs.Html5.prototype.buffered = function(){ return this.el_.buffered; };
vjs.Html5.prototype.volume = function(){ return this.el_.volume; };
vjs.Html5.prototype.setVolume = function(percentAsDecimal){ this.el_.volume = percentAsDecimal; };
vjs.Html5.prototype.muted = function(){ return this.el_.muted; };
vjs.Html5.prototype.setMuted = function(muted){ this.el_.muted = muted; };
vjs.Html5.prototype.width = function(){ return this.el_.offsetWidth; };
vjs.Html5.prototype.height = function(){ return this.el_.offsetHeight; };
vjs.Html5.prototype.supportsFullScreen = function(){
if (typeof this.el_.webkitEnterFullScreen == 'function') {
// Seems to be broken in Chromium/Chrome && Safari in Leopard
if (/Android/.test(vjs.USER_AGENT) || !/Chrome|Mac OS X 10.5/.test(vjs.USER_AGENT)) {
return true;
}
}
return false;
};
vjs.Html5.prototype.enterFullScreen = function(){
var video = this.el_;
if (video.paused && video.networkState <= video.HAVE_METADATA) {
// attempt to prime the video element for programmatic access
// this isn't necessary on the desktop but shouldn't hurt
this.el_.play();
// playing and pausing synchronously during the transition to fullscreen
// can get iOS ~6.1 devices into a play/pause loop
setTimeout(function(){
video.pause();
video.webkitEnterFullScreen();
}, 0);
} else {
video.webkitEnterFullScreen();
}
};
vjs.Html5.prototype.exitFullScreen = function(){
this.el_.webkitExitFullScreen();
};
vjs.Html5.prototype.src = function(src){ this.el_.src = src; };
vjs.Html5.prototype.load = function(){ this.el_.load(); };
vjs.Html5.prototype.currentSrc = function(){ return this.el_.currentSrc; };
vjs.Html5.prototype.preload = function(){ return this.el_.preload; };
vjs.Html5.prototype.setPreload = function(val){ this.el_.preload = val; };
vjs.Html5.prototype.autoplay = function(){ return this.el_.autoplay; };
vjs.Html5.prototype.setAutoplay = function(val){ this.el_.autoplay = val; };
vjs.Html5.prototype.loop = function(){ return this.el_.loop; };
vjs.Html5.prototype.setLoop = function(val){ this.el_.loop = val; };
vjs.Html5.prototype.error = function(){ return this.el_.error; };
// networkState: function(){ return this.el_.networkState; },
// readyState: function(){ return this.el_.readyState; },
vjs.Html5.prototype.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; },
vjs.Html5.prototype.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; },
vjs.Html5.prototype.defaultMuted = function(){ return this.el_.defaultMuted; };
/* HTML5 Support Testing ---------------------------------------------------- */
vjs.Html5.isSupported = function(){
return !!document.createElement('video').canPlayType;
};
vjs.Html5.canPlaySource = function(srcObj){
return !!document.createElement('video').canPlayType(srcObj.type);
// TODO: Check Type
// If no Type, check ext
// Check Media Type
};
vjs.Html5.canControlVolume = function(){
var volume = vjs.TEST_VID.volume;
vjs.TEST_VID.volume = (volume / 2) + 0.1;
return volume !== vjs.TEST_VID.volume;
};
// List of all HTML5 events (various uses).
vjs.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 Feature detection and Device Fixes --------------------------------- //
// Android
if (vjs.IS_ANDROID) {
// Override Android 2.2 and less canPlayType method which is broken
if (vjs.ANDROID_VERSION < 3) {
document.createElement('video').constructor.prototype.canPlayType = function(type){
return (type && type.toLowerCase().indexOf('video/mp4') != -1) ? 'maybe' : '';
};
}
}

30
src/js/media/loader.js Normal file
View File

@ -0,0 +1,30 @@
/**
* @constructor
*/
vjs.MediaLoader = vjs.Component.extend({
/** @constructor */
init: function(player, options, ready){
vjs.Component.call(this, player, options, ready);
// If there are no sources when the player is initialized,
// load the first supported playback technology.
if (!player.options_['sources'] || player.options_['sources'].length === 0) {
for (var i=0,j=player.options_['techOrder']; i<j.length; i++) {
var techName = vjs.capitalize(j[i]),
tech = window['videojs'][techName];
// Check if the browser supports this technology
if (tech && tech.isSupported()) {
player.loadTech(techName);
break;
}
}
} else {
// // Loop through playback technologies (HTML5, Flash) and check for support.
// // Then load the best source.
// // A few assumptions here:
// // All playback technologies respect preload false.
player.src(player.options_['sources']);
}
}
});

78
src/js/media/media.js Normal file
View File

@ -0,0 +1,78 @@
/**
* @fileoverview Media Technology Controller - Base class for media playback technology controllers like Flash and HTML5
*/
/**
* Base class for media (HTML5 Video, Flash) controllers
* @param {vjs.Player|Object} player Central player instance
* @param {Object=} options Options object
* @constructor
*/
vjs.MediaTechController = vjs.Component.extend({
/** @constructor */
init: function(player, options, ready){
vjs.Component.call(this, player, options, ready);
// Make playback element clickable
// this.addEvent('click', this.proxy(this.onClick));
// player.triggerEvent('techready');
}
});
// destroy: function(){},
// createElement: function(){},
/**
* Handle a click on the media element. By default will play the media.
*
* On android browsers, having this toggle play state interferes with being
* able to toggle the controls and toggling play state with the play button
*/
vjs.MediaTechController.prototype.onClick = (function(){
if (vjs.IS_ANDROID) {
return function () {};
} else {
return function () {
if (this.player_.controls()) {
if (this.player_.paused()) {
this.player_.play();
} else {
this.player_.pause();
}
}
};
}
})();
vjs.MediaTechController.prototype.features = {
volumeControl: true,
// Resizing plugins using request fullscreen reloads the plugin
fullscreenResize: false,
// Optional events that we can manually mimic with timers
// currently not triggered by video-js-swf
progressEvents: false,
timeupdateEvents: false
};
vjs.media = {};
/**
* List of default API methods for any MediaTechController
* @type {String}
*/
vjs.media.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(',');
// Create placeholder methods for each that warn when a method isn't supported by the current playback technology
function createMethod(methodName){
return function(){
throw new Error('The "'+methodName+'" method is not available on the playback technology\'s API');
};
}
for (var i = vjs.media.ApiMethods.length - 1; i >= 0; i--) {
var methodName = vjs.media.ApiMethods[i];
vjs.MediaTechController.prototype[vjs.media.ApiMethods[i]] = createMethod(methodName);
}

208
src/js/menu.js Normal file
View File

@ -0,0 +1,208 @@
/* Menu
================================================================================ */
/**
* The base for text track and settings menu buttons.
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.Menu = vjs.Component.extend();
/**
* Add a menu item to the menu
* @param {Object|String} component Component or component type to add
*/
vjs.Menu.prototype.addItem = function(component){
this.addChild(component);
component.on('click', vjs.bind(this, function(){
this.unlockShowing();
}));
};
/** @inheritDoc */
vjs.Menu.prototype.createEl = function(){
var contentElType = this.options().contentElType || 'ul';
this.contentEl_ = vjs.createEl(contentElType, {
className: 'vjs-menu-content'
});
var el = vjs.Component.prototype.createEl.call(this, 'div', {
append: this.contentEl_,
className: 'vjs-menu'
});
el.appendChild(this.contentEl_);
// Prevent clicks from bubbling up. Needed for Menu Buttons,
// where a click on the parent is significant
vjs.on(el, 'click', function(event){
event.preventDefault();
event.stopImmediatePropagation();
});
return el;
};
/**
* Menu item
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.MenuItem = vjs.Button.extend({
/** @constructor */
init: function(player, options){
vjs.Button.call(this, player, options);
this.selected(options['selected']);
}
});
/** @inheritDoc */
vjs.MenuItem.prototype.createEl = function(type, props){
return vjs.Button.prototype.createEl.call(this, 'li', vjs.obj.merge({
className: 'vjs-menu-item',
innerHTML: this.options_['label']
}, props));
};
/** @inheritDoc */
vjs.MenuItem.prototype.onClick = function(){
this.selected(true);
};
/**
* Set this menu item as selected or not
* @param {Boolean} selected
*/
vjs.MenuItem.prototype.selected = function(selected){
if (selected) {
this.addClass('vjs-selected');
this.el_.setAttribute('aria-selected',true);
} else {
this.removeClass('vjs-selected');
this.el_.setAttribute('aria-selected',false);
}
};
/**
* A button class with a popup menu
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.MenuButton = vjs.Button.extend({
/** @constructor */
init: function(player, options){
vjs.Button.call(this, player, options);
this.menu = this.createMenu();
// Add list to element
this.addChild(this.menu);
// Automatically hide empty menu buttons
if (this.items && this.items.length === 0) {
this.hide();
}
this.on('keyup', this.onKeyPress);
this.el_.setAttribute('aria-haspopup', true);
this.el_.setAttribute('role', 'button');
}
});
/**
* Track the state of the menu button
* @type {Boolean}
*/
vjs.MenuButton.prototype.buttonPressed_ = false;
vjs.MenuButton.prototype.createMenu = function(){
var menu = new vjs.Menu(this.player_);
// Add a title list item to the top
if (this.options().title) {
menu.el().appendChild(vjs.createEl('li', {
className: 'vjs-menu-title',
innerHTML: vjs.capitalize(this.kind_),
tabindex: -1
}));
}
this.items = this.createItems();
if (this.items) {
// Add menu items to the menu
for (var i = 0; i < this.items.length; i++) {
menu.addItem(this.items[i]);
}
}
return menu;
};
/**
* Create the list of menu items. Specific to each subclass.
*/
vjs.MenuButton.prototype.createItems = function(){};
/** @inheritDoc */
vjs.MenuButton.prototype.buildCSSClass = function(){
return this.className + ' vjs-menu-button ' + vjs.Button.prototype.buildCSSClass.call(this);
};
// Focus - Add keyboard functionality to element
// This function is not needed anymore. Instead, the keyboard functionality is handled by
// treating the button as triggering a submenu. When the button is pressed, the submenu
// appears. Pressing the button again makes the submenu disappear.
vjs.MenuButton.prototype.onFocus = function(){};
// Can't turn off list display that we turned on with focus, because list would go away.
vjs.MenuButton.prototype.onBlur = function(){};
vjs.MenuButton.prototype.onClick = function(){
// When you click the button it adds focus, which will show the menu indefinitely.
// So we'll remove focus when the mouse leaves the button.
// Focus is needed for tab navigation.
this.one('mouseout', vjs.bind(this, function(){
this.menu.unlockShowing();
this.el_.blur();
}));
if (this.buttonPressed_){
this.unpressButton();
} else {
this.pressButton();
}
};
vjs.MenuButton.prototype.onKeyPress = function(event){
event.preventDefault();
// Check for space bar (32) or enter (13) keys
if (event.which == 32 || event.which == 13) {
if (this.buttonPressed_){
this.unpressButton();
} else {
this.pressButton();
}
// Check for escape (27) key
} else if (event.which == 27){
if (this.buttonPressed_){
this.unpressButton();
}
}
};
vjs.MenuButton.prototype.pressButton = function(){
this.buttonPressed_ = true;
this.menu.lockShowing();
this.el_.setAttribute('aria-pressed', true);
if (this.items && this.items.length > 0) {
this.items[0].el().focus(); // set the focus to the title of the submenu
}
};
vjs.MenuButton.prototype.unpressButton = function(){
this.buttonPressed_ = false;
this.menu.unlockShowing();
this.el_.setAttribute('aria-pressed', false);
};

955
src/js/player.js Normal file
View File

@ -0,0 +1,955 @@
/**
* Main player class. A player instance is returned by _V_(id);
* @param {Element} tag The original video tag used for configuring options
* @param {Object=} options Player options
* @param {Function=} ready Ready callback function
* @constructor
*/
vjs.Player = vjs.Component.extend({
/** @constructor */
init: function(tag, options, ready){
this.tag = tag; // Store the original tag used to set options
// Set Options
// The options argument overrides options set in the video tag
// which overrides globally set options.
// This latter part coincides with the load order
// (tag must exist before Player)
options = vjs.obj.merge(this.getTagSettings(tag), options);
// Cache for video property values.
this.cache_ = {};
// Set poster
this.poster_ = options['poster'];
// Set controls
this.controls_ = options['controls'];
// Use native controls for iOS and Android by default
// until controls are more stable on those devices.
if (options['customControlsOnMobile'] !== true && (vjs.IS_IOS || vjs.IS_ANDROID)) {
tag.controls = options['controls'];
this.controls_ = false;
} else {
// Original tag settings stored in options
// now remove immediately so native controls don't flash.
tag.controls = false;
}
// Run base component initializing with new options.
// Builds the element through createEl()
// Inits and embeds any child components in opts
vjs.Component.call(this, this, options, ready);
// Firstplay event implimentation. Not sold on the event yet.
// Could probably just check currentTime==0?
this.one('play', function(e){
var fpEvent = { type: 'firstplay', target: this.el_ };
// Using vjs.trigger so we can check if default was prevented
var keepGoing = vjs.trigger(this.el_, fpEvent);
if (!keepGoing) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
}
});
this.on('ended', this.onEnded);
this.on('play', this.onPlay);
this.on('firstplay', this.onFirstPlay);
this.on('pause', this.onPause);
this.on('progress', this.onProgress);
this.on('durationchange', this.onDurationChange);
this.on('error', this.onError);
this.on('fullscreenchange', this.onFullscreenChange);
// Make player easily findable by ID
vjs.players[this.id_] = this;
if (options['plugins']) {
vjs.obj.each(options['plugins'], function(key, val){
this[key](val);
}, this);
}
}
});
/**
* Player instance options, surfaced using vjs.options
* vjs.options = vjs.Player.prototype.options_
* Make changes in vjs.options, not here.
* All options should use string keys so they avoid
* renaming by closure compiler
* @type {Object}
* @private
*/
vjs.Player.prototype.options_ = vjs.options;
vjs.Player.prototype.dispose = function(){
// this.isReady_ = false;
// Kill reference to this player
vjs.players[this.id_] = null;
if (this.tag && this.tag['player']) { this.tag['player'] = null; }
if (this.el_ && this.el_['player']) { this.el_['player'] = null; }
// Ensure that tracking progress and time progress will stop and plater deleted
this.stopTrackingProgress();
this.stopTrackingCurrentTime();
if (this.tech) { this.tech.dispose(); }
// Component dispose
vjs.Component.prototype.dispose.call(this);
};
vjs.Player.prototype.getTagSettings = function(tag){
var options = {
'sources': [],
'tracks': []
};
vjs.obj.merge(options, vjs.getAttributeValues(tag));
// Get tag children settings
if (tag.hasChildNodes()) {
var child, childName,
children = tag.childNodes,
i = 0,
j = children.length;
for (; i < j; i++) {
child = children[i];
// Change case needed: http://ejohn.org/blog/nodename-case-sensitivity/
childName = child.nodeName.toLowerCase();
if (childName === 'source') {
options['sources'].push(vjs.getAttributeValues(child));
} else if (childName === 'track') {
options['tracks'].push(vjs.getAttributeValues(child));
}
}
}
return options;
};
vjs.Player.prototype.createEl = function(){
var el = this.el_ = vjs.Component.prototype.createEl.call(this, 'div');
var tag = this.tag;
// Remove width/height attrs from tag so CSS can make it 100% width/height
tag.removeAttribute('width');
tag.removeAttribute('height');
// Empty video tag sources and tracks so the built-in player doesn't use them also.
// This may not be fast enough to stop HTML5 browsers from reading the tags
// so we'll need to turn off any default tracks if we're manually doing
// captions and subtitles. videoElement.textTracks
if (tag.hasChildNodes()) {
var nrOfChildNodes = tag.childNodes.length;
for (var i=0,j=tag.childNodes;i<nrOfChildNodes;i++) {
if (j[0].nodeName.toLowerCase() == 'source' || j[0].nodeName.toLowerCase() == 'track') {
tag.removeChild(j[0]);
}
}
}
// Make sure tag ID exists
tag.id = tag.id || 'vjs_video_' + vjs.guid++;
// Give video tag ID and class to player div
// ID will now reference player box, not the video tag
el.id = tag.id;
el.className = tag.className;
// Update tag id/class for use as HTML5 playback tech
// Might think we should do this after embedding in container so .vjs-tech class
// doesn't flash 100% width/height, but class only applies with .video-js parent
tag.id += '_html5_api';
tag.className = 'vjs-tech';
// Make player findable on elements
tag['player'] = el['player'] = this;
// Default state of video is paused
this.addClass('vjs-paused');
// Make box use width/height of tag, or rely on default implementation
// Enforce with CSS since width/height attrs don't work on divs
this.width(this.options_['width'], true); // (true) Skip resize listener on load
this.height(this.options_['height'], true);
// Wrap video tag in div (el/box) container
if (tag.parentNode) {
tag.parentNode.insertBefore(el, tag);
}
vjs.insertFirst(tag, el); // Breaks iPhone, fixed in HTML5 setup.
return el;
};
// /* Media Technology (tech)
// ================================================================================ */
// Load/Create an instance of playback technlogy including element and API methods
// And append playback element in player div.
vjs.Player.prototype.loadTech = function(techName, source){
// Pause and remove current playback technology
if (this.tech) {
this.unloadTech();
// 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 (techName !== 'Html5' && this.tag) {
this.el_.removeChild(this.tag);
this.tag.player = null;
this.tag = null;
}
this.techName = techName;
// Turn off API access because we're loading a new tech that might load asynchronously
this.isReady_ = false;
var techReady = function(){
this.player_.triggerReady();
// Manually track progress in cases where the browser/flash player doesn't report it.
if (!this.features.progressEvents) {
this.player_.manualProgressOn();
}
// Manually track timeudpates in cases where the browser/flash player doesn't report it.
if (!this.features.timeupdateEvents) {
this.player_.manualTimeUpdatesOn();
}
};
// Grab tech-specific options from player options and add source and parent element to use.
var techOptions = vjs.obj.merge({ 'source': source, 'parentEl': this.el_ }, this.options_[techName.toLowerCase()]);
if (source) {
if (source.src == this.cache_.src && this.cache_.currentTime > 0) {
techOptions['startTime'] = this.cache_.currentTime;
}
this.cache_.src = source.src;
}
// Initialize tech instance
this.tech = new window['videojs'][techName](this, techOptions);
this.tech.ready(techReady);
};
vjs.Player.prototype.unloadTech = function(){
this.isReady_ = false;
this.tech.dispose();
// Turn off any manual progress or timeupdate tracking
if (this.manualProgress) { this.manualProgressOff(); }
if (this.manualTimeUpdates) { this.manualTimeUpdatesOff(); }
this.tech = false;
};
// There's many issues around changing the size of a Flash (or other plugin) object.
// First is a plugin reload issue in Firefox that has been around for 11 years: https://bugzilla.mozilla.org/show_bug.cgi?id=90268
// Then with the new fullscreen API, Mozilla and webkit browsers will reload the flash object after going to fullscreen.
// To get around this, we're unloading the tech, caching source and currentTime values, and reloading the tech once the plugin is resized.
// reloadTech: function(betweenFn){
// vjs.log('unloadingTech')
// this.unloadTech();
// vjs.log('unloadedTech')
// if (betweenFn) { betweenFn.call(); }
// vjs.log('LoadingTech')
// this.loadTech(this.techName, { src: this.cache_.src })
// vjs.log('loadedTech')
// },
/* 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
vjs.Player.prototype.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.
// As opposed to doing user agent detection
this.tech.one('progress', function(){
// Update known progress support for this playback technology
this.features.progressEvents = true;
// Turn off manual progress tracking
this.player_.manualProgressOff();
});
};
vjs.Player.prototype.manualProgressOff = function(){
this.manualProgress = false;
this.stopTrackingProgress();
};
vjs.Player.prototype.trackProgress = function(){
this.progressInterval = setInterval(vjs.bind(this, function(){
// Don't trigger unless buffered amount is greater than last time
// log(this.cache_.bufferEnd, this.buffered().end(0), this.duration())
/* TODO: update for multiple buffered regions */
if (this.cache_.bufferEnd < this.buffered().end(0)) {
this.trigger('progress');
} else if (this.bufferedPercent() == 1) {
this.stopTrackingProgress();
this.trigger('progress'); // Last update
}
}), 500);
};
vjs.Player.prototype.stopTrackingProgress = function(){ clearInterval(this.progressInterval); };
/* Time Tracking -------------------------------------------------------------- */
vjs.Player.prototype.manualTimeUpdatesOn = function(){
this.manualTimeUpdates = true;
this.on('play', this.trackCurrentTime);
this.on('pause', this.stopTrackingCurrentTime);
// timeupdate is also called by .currentTime whenever current time is set
// Watch for native timeupdate event
this.tech.one('timeupdate', function(){
// Update known progress support for this playback technology
this.features.timeupdateEvents = true;
// Turn off manual progress tracking
this.player_.manualTimeUpdatesOff();
});
};
vjs.Player.prototype.manualTimeUpdatesOff = function(){
this.manualTimeUpdates = false;
this.stopTrackingCurrentTime();
this.off('play', this.trackCurrentTime);
this.off('pause', this.stopTrackingCurrentTime);
};
vjs.Player.prototype.trackCurrentTime = function(){
if (this.currentTimeInterval) { this.stopTrackingCurrentTime(); }
this.currentTimeInterval = setInterval(vjs.bind(this, function(){
this.trigger('timeupdate');
}), 250); // 42 = 24 fps // 250 is what Webkit uses // FF uses 15
};
// Turn off play progress tracking (when paused or dragging)
vjs.Player.prototype.stopTrackingCurrentTime = function(){ clearInterval(this.currentTimeInterval); };
// /* Player event handlers (how the player reacts to certain events)
// ================================================================================ */
vjs.Player.prototype.onEnded = function(){
if (this.options_['loop']) {
this.currentTime(0);
this.play();
}
};
vjs.Player.prototype.onPlay = function(){
vjs.removeClass(this.el_, 'vjs-paused');
vjs.addClass(this.el_, 'vjs-playing');
};
vjs.Player.prototype.onFirstPlay = function(){
//If the first starttime attribute is specified
//then we will start at the given offset in seconds
if(this.options_['starttime']){
this.currentTime(this.options_['starttime']);
}
};
vjs.Player.prototype.onPause = function(){
vjs.removeClass(this.el_, 'vjs-playing');
vjs.addClass(this.el_, 'vjs-paused');
};
vjs.Player.prototype.onProgress = function(){
// Add custom event for when source is finished downloading.
if (this.bufferedPercent() == 1) {
this.trigger('loadedalldata');
}
};
// Update duration with durationchange event
// Allows for cacheing value instead of asking player each time.
vjs.Player.prototype.onDurationChange = function(){
this.duration(this.techGet('duration'));
};
vjs.Player.prototype.onError = function(e) {
vjs.log('Video Error', e);
};
vjs.Player.prototype.onFullscreenChange = function(e) {
if (this.isFullScreen) {
this.addClass('vjs-fullscreen');
} else {
this.removeClass('vjs-fullscreen');
}
};
// /* Player API
// ================================================================================ */
/**
* Object for cached values.
* @private
*/
vjs.Player.prototype.cache_;
vjs.Player.prototype.getCache = function(){
return this.cache_;
};
// Pass values to the playback tech
vjs.Player.prototype.techCall = function(method, arg){
// If it's not ready yet, call method when it is
if (this.tech && this.tech.isReady_) {
this.tech.ready(function(){
this[method](arg);
});
// Otherwise call method now
} else {
try {
this.tech[method](arg);
} catch(e) {
vjs.log(e);
throw e;
}
}
};
// Get calls can't wait for the tech, and sometimes don't need to.
vjs.Player.prototype.techGet = function(method){
// Make sure there is a tech
// if (!this.tech) {
// return;
// }
if (this.tech.isReady_) {
// Flash likes to die and reload when you hide or reposition it.
// In these cases the object methods go away and we get errors.
// When that happens we'll catch the errors and inform tech that it's not ready any more.
try {
return this.tech[method]();
} catch(e) {
// When building additional tech libs, an expected method may not be defined yet
if (this.tech[method] === undefined) {
vjs.log('Video.js: ' + method + ' method not defined for '+this.techName+' playback technology.', e);
} else {
// When a method isn't available on the object it throws a TypeError
if (e.name == 'TypeError') {
vjs.log('Video.js: ' + method + ' unavailable on '+this.techName+' playback technology element.', e);
this.tech.isReady_ = false;
} else {
vjs.log(e);
}
}
throw e;
}
}
return;
};
/**
* Start media playback
* http://dev.w3.org/html5/spec/video.html#dom-media-play
* We're triggering the 'play' event here instead of relying on the
* media element to allow using event.preventDefault() to stop
* play from happening if desired. Usecase: preroll ads.
*/
vjs.Player.prototype.play = function(){
this.techCall('play');
return this;
};
// http://dev.w3.org/html5/spec/video.html#dom-media-pause
vjs.Player.prototype.pause = function(){
this.techCall('pause');
return this;
};
// http://dev.w3.org/html5/spec/video.html#dom-media-paused
// The initial state of paused should be true (in Safari it's actually false)
vjs.Player.prototype.paused = function(){
return (this.techGet('paused') === false) ? false : true;
};
// http://dev.w3.org/html5/spec/video.html#dom-media-currenttime
vjs.Player.prototype.currentTime = function(seconds){
if (seconds !== undefined) {
// Cache the last set value for smoother scrubbing.
this.cache_.lastSetCurrentTime = seconds;
this.techCall('setCurrentTime', seconds);
// Improve the accuracy of manual timeupdates
if (this.manualTimeUpdates) { this.trigger('timeupdate'); }
return this;
}
// Cache last currentTime and return
// Default to 0 seconds
return this.cache_.currentTime = (this.techGet('currentTime') || 0);
};
// http://dev.w3.org/html5/spec/video.html#dom-media-duration
// Duration should return NaN if not available. ParseFloat will turn false-ish values to NaN.
vjs.Player.prototype.duration = function(seconds){
if (seconds !== undefined) {
// Cache the last set value for optimiized scrubbing (esp. Flash)
this.cache_.duration = parseFloat(seconds);
return this;
}
return this.cache_.duration;
};
// Calculates how much time is left. Not in spec, but useful.
vjs.Player.prototype.remainingTime = function(){
return this.duration() - this.currentTime();
};
// http://dev.w3.org/html5/spec/video.html#dom-media-buffered
// Buffered returns a timerange object.
// Kind of like an array of portions of the video that have been downloaded.
// So far no browsers return more than one range (portion)
vjs.Player.prototype.buffered = function(){
var buffered = this.techGet('buffered'),
start = 0,
// Default end to 0 and store in values
end = this.cache_.bufferEnd = this.cache_.bufferEnd || 0;
if (buffered && buffered.length > 0 && buffered.end(0) !== end) {
end = buffered.end(0);
// Storing values allows them be overridden by setBufferedFromProgress
this.cache_.bufferEnd = end;
}
return vjs.createTimeRange(start, end);
};
// Calculates amount of buffer is full. Not in spec but useful.
vjs.Player.prototype.bufferedPercent = function(){
return (this.duration()) ? this.buffered().end(0) / this.duration() : 0;
};
// http://dev.w3.org/html5/spec/video.html#dom-media-volume
vjs.Player.prototype.volume = function(percentAsDecimal){
var vol;
if (percentAsDecimal !== undefined) {
vol = Math.max(0, Math.min(1, parseFloat(percentAsDecimal))); // Force value to between 0 and 1
this.cache_.volume = vol;
this.techCall('setVolume', vol);
vjs.setLocalStorage('volume', vol);
return this;
}
// Default to 1 when returning current volume.
vol = parseFloat(this.techGet('volume'));
return (isNaN(vol)) ? 1 : vol;
};
// http://dev.w3.org/html5/spec/video.html#attr-media-muted
vjs.Player.prototype.muted = function(muted){
if (muted !== undefined) {
this.techCall('setMuted', muted);
return this;
}
return this.techGet('muted') || false; // Default to false
};
// Check if current tech can support native fullscreen (e.g. with built in controls lik iOS, so not our flash swf)
vjs.Player.prototype.supportsFullScreen = function(){ return this.techGet('supportsFullScreen') || false; };
// Turn on fullscreen (or window) mode
vjs.Player.prototype.requestFullScreen = function(){
var requestFullScreen = vjs.support.requestFullScreen;
this.isFullScreen = true;
if (requestFullScreen) {
// the browser supports going fullscreen at the element level so we can
// take the controls fullscreen as well as the video
// Trigger fullscreenchange event after change
vjs.on(document, requestFullScreen.eventName, vjs.bind(this, function(){
this.isFullScreen = document[requestFullScreen.isFullScreen];
// If cancelling fullscreen, remove event listener.
if (this.isFullScreen === false) {
vjs.off(document, requestFullScreen.eventName, arguments.callee);
}
}));
// Flash and other plugins get reloaded when you take their parent to fullscreen.
// To fix that we'll remove the tech, and reload it after the resize has finished.
if (this.tech.features.fullscreenResize === false && this.options_['flash']['iFrameMode'] !== true) {
this.pause();
this.unloadTech();
vjs.on(document, requestFullScreen.eventName, vjs.bind(this, function(){
vjs.off(document, requestFullScreen.eventName, arguments.callee);
this.loadTech(this.techName, { src: this.cache_.src });
}));
this.el_[requestFullScreen.requestFn]();
} else {
this.el_[requestFullScreen.requestFn]();
}
this.trigger('fullscreenchange');
} else if (this.tech.supportsFullScreen()) {
// we can't take the video.js controls fullscreen but we can go fullscreen
// with native controls
this.techCall('enterFullScreen');
} else {
// fullscreen isn't supported so we'll just stretch the video element to
// fill the viewport
this.enterFullWindow();
this.trigger('fullscreenchange');
}
return this;
};
vjs.Player.prototype.cancelFullScreen = function(){
var requestFullScreen = vjs.support.requestFullScreen;
this.isFullScreen = false;
// Check for browser element fullscreen support
if (requestFullScreen) {
// Flash and other plugins get reloaded when you take their parent to fullscreen.
// To fix that we'll remove the tech, and reload it after the resize has finished.
if (this.tech.features.fullscreenResize === false && this.options_['flash']['iFrameMode'] !== true) {
this.pause();
this.unloadTech();
vjs.on(document, requestFullScreen.eventName, vjs.bind(this, function(){
vjs.off(document, requestFullScreen.eventName, arguments.callee);
this.loadTech(this.techName, { src: this.cache_.src });
}));
document[requestFullScreen.cancelFn]();
} else {
document[requestFullScreen.cancelFn]();
}
this.trigger('fullscreenchange');
} else if (this.tech.supportsFullScreen()) {
this.techCall('exitFullScreen');
} else {
this.exitFullWindow();
this.trigger('fullscreenchange');
}
return this;
};
// When fullscreen isn't supported we can stretch the video container to as wide as the browser will let us.
vjs.Player.prototype.enterFullWindow = function(){
this.isFullWindow = 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
vjs.on(document, 'keydown', vjs.bind(this, this.fullWindowOnEscKey));
// Hide any scroll bars
document.documentElement.style.overflow = 'hidden';
// Apply fullscreen styles
vjs.addClass(document.body, 'vjs-full-window');
this.trigger('enterFullWindow');
};
vjs.Player.prototype.fullWindowOnEscKey = function(event){
if (event.keyCode === 27) {
if (this.isFullScreen === true) {
this.cancelFullScreen();
} else {
this.exitFullWindow();
}
}
};
vjs.Player.prototype.exitFullWindow = function(){
this.isFullWindow = false;
vjs.off(document, 'keydown', this.fullWindowOnEscKey);
// Unhide scroll bars.
document.documentElement.style.overflow = this.docOrigOverflow;
// Remove fullscreen styles
vjs.removeClass(document.body, 'vjs-full-window');
// Resize the box, controller, and poster to original sizes
// this.positionAll();
this.trigger('exitFullWindow');
};
vjs.Player.prototype.selectSource = function(sources){
// Loop through each playback technology in the options order
for (var i=0,j=this.options_['techOrder'];i<j.length;i++) {
var techName = vjs.capitalize(j[i]),
tech = window['videojs'][techName];
// Check if the browser supports this technology
if (tech.isSupported()) {
// Loop through each source object
for (var a=0,b=sources;a<b.length;a++) {
var source = b[a];
// Check if source can be played with this technology
if (tech['canPlaySource'](source)) {
return { source: source, tech: techName };
}
}
}
}
return false;
};
// 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
vjs.Player.prototype.src = function(source){
// Case: Array of source objects to choose from and pick the best to play
if (source instanceof Array) {
var sourceTech = this.selectSource(source),
techName;
if (sourceTech) {
source = sourceTech.source;
techName = sourceTech.tech;
// If this technology is already loaded, set source
if (techName == this.techName) {
this.src(source); // Passing the source object
// Otherwise load this technology with chosen source
} else {
this.loadTech(techName, source);
}
} else {
this.el_.appendChild(vjs.createEl('p', {
innerHTML: 'Sorry, no compatible source and playback technology were found for this video. Try using another browser like <a href="http://bit.ly/ccMUEC">Chrome</a> or download the latest <a href="http://adobe.ly/mwfN1">Adobe Flash Player</a>.'
}));
}
// Case: Source object { src: '', type: '' ... }
} else if (source instanceof Object) {
if (window['videojs'][this.techName]['canPlaySource'](source)) {
this.src(source.src);
} else {
// Send through tech loop to check for a compatible technology.
this.src([source]);
}
// Case: URL String (http://myvideo...)
} else {
// Cache for getting last set source
this.cache_.src = source;
if (!this.isReady_) {
this.ready(function(){
this.src(source);
});
} else {
this.techCall('src', source);
if (this.options_['preload'] == 'auto') {
this.load();
}
if (this.options_['autoplay']) {
this.play();
}
}
}
return this;
};
// Begin loading the src data
// http://dev.w3.org/html5/spec/video.html#dom-media-load
vjs.Player.prototype.load = function(){
this.techCall('load');
return this;
};
// http://dev.w3.org/html5/spec/video.html#dom-media-currentsrc
vjs.Player.prototype.currentSrc = function(){
return this.techGet('currentSrc') || this.cache_.src || '';
};
// Attributes/Options
vjs.Player.prototype.preload = function(value){
if (value !== undefined) {
this.techCall('setPreload', value);
this.options_['preload'] = value;
return this;
}
return this.techGet('preload');
};
vjs.Player.prototype.autoplay = function(value){
if (value !== undefined) {
this.techCall('setAutoplay', value);
this.options_['autoplay'] = value;
return this;
}
return this.techGet('autoplay', value);
};
vjs.Player.prototype.loop = function(value){
if (value !== undefined) {
this.techCall('setLoop', value);
this.options_['loop'] = value;
return this;
}
return this.techGet('loop');
};
/**
* The url of the poster image source.
* @type {String}
* @private
*/
vjs.Player.prototype.poster_;
/**
* Get or set the poster image source url.
* @param {String} src Poster image source URL
* @return {String} Poster image source URL or null
*/
vjs.Player.prototype.poster = function(src){
if (src !== undefined) {
this.poster_ = src;
}
return this.poster_;
};
/**
* Whether or not the controls are showing
* @type {Boolean}
* @private
*/
vjs.Player.prototype.controls_;
/**
* Get or set whether or not the controls are showing.
* @param {Boolean} controls Set controls to showing or not
* @return {Boolean} Controls are showing
*/
vjs.Player.prototype.controls = function(controls){
if (controls !== undefined) {
// Don't trigger a change event unless it actually changed
if (this.controls_ !== controls) {
this.controls_ = !!controls; // force boolean
this.trigger('controlschange');
}
}
return this.controls_;
};
vjs.Player.prototype.error = function(){ return this.techGet('error'); };
vjs.Player.prototype.ended = function(){ return this.techGet('ended'); };
// Methods to add support for
// networkState: function(){ return this.techCall('networkState'); },
// readyState: function(){ return this.techCall('readyState'); },
// seeking: function(){ return this.techCall('seeking'); },
// initialTime: function(){ return this.techCall('initialTime'); },
// startOffsetTime: function(){ return this.techCall('startOffsetTime'); },
// played: function(){ return this.techCall('played'); },
// seekable: function(){ return this.techCall('seekable'); },
// videoTracks: function(){ return this.techCall('videoTracks'); },
// audioTracks: function(){ return this.techCall('audioTracks'); },
// videoWidth: function(){ return this.techCall('videoWidth'); },
// videoHeight: function(){ return this.techCall('videoHeight'); },
// defaultPlaybackRate: function(){ return this.techCall('defaultPlaybackRate'); },
// playbackRate: function(){ return this.techCall('playbackRate'); },
// mediaGroup: function(){ return this.techCall('mediaGroup'); },
// controller: function(){ return this.techCall('controller'); },
// defaultMuted: function(){ return this.techCall('defaultMuted'); }
// TODO
// currentSrcList: the array of sources including other formats and bitrates
// playList: array of source lists in order of playback
// RequestFullscreen API
(function(){
var prefix, requestFS, div;
div = document.createElement('div');
requestFS = {};
// Current W3C Spec
// http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api
// Mozilla Draft: https://wiki.mozilla.org/Gecko:FullScreenAPI#fullscreenchange_event
if (div.cancelFullscreen !== undefined) {
requestFS.requestFn = 'requestFullscreen';
requestFS.cancelFn = 'exitFullscreen';
requestFS.eventName = 'fullscreenchange';
requestFS.isFullScreen = 'fullScreen';
// Webkit (Chrome/Safari) and Mozilla (Firefox) have working implementations
// that use prefixes and vary slightly from the new W3C spec. Specifically,
// using 'exit' instead of 'cancel', and lowercasing the 'S' in Fullscreen.
// Other browsers don't have any hints of which version they might follow yet,
// so not going to try to predict by looping through all prefixes.
} else {
if (document.mozCancelFullScreen) {
prefix = 'moz';
requestFS.isFullScreen = prefix + 'FullScreen';
} else {
prefix = 'webkit';
requestFS.isFullScreen = prefix + 'IsFullScreen';
}
if (div[prefix + 'RequestFullScreen']) {
requestFS.requestFn = prefix + 'RequestFullScreen';
requestFS.cancelFn = prefix + 'CancelFullScreen';
}
requestFS.eventName = prefix + 'fullscreenchange';
}
if (document[requestFS.cancelFn]) {
vjs.support.requestFullScreen = requestFS;
}
})();

3
src/js/plugins.js Normal file
View File

@ -0,0 +1,3 @@
vjs.plugin = function(name, init){
vjs.Player.prototype[name] = init;
};

44
src/js/poster.js Normal file
View File

@ -0,0 +1,44 @@
/* Poster Image
================================================================================ */
/**
* Poster image. Shows before the video plays.
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.PosterImage = vjs.Button.extend({
/** @constructor */
init: function(player, options){
vjs.Button.call(this, player, options);
if (!player.poster() || !player.controls()) {
this.hide();
}
player.on('play', vjs.bind(this, this.hide));
}
});
vjs.PosterImage.prototype.createEl = function(){
var el = vjs.createEl('div', {
className: 'vjs-poster',
// Don't want poster to be tabbable.
tabIndex: -1
}),
poster = this.player_.poster();
if (poster) {
if ('backgroundSize' in el.style) {
el.style.backgroundImage = 'url("' + poster + '")';
} else {
el.appendChild(vjs.createEl('img', { src: poster }));
}
}
return el;
};
vjs.PosterImage.prototype.onClick = function(){
this.player_.play();
};

62
src/js/setup.js Normal file
View File

@ -0,0 +1,62 @@
/**
* @fileoverview Functions for automatically setting up a player
* based on the data-setup attribute of the video tag
*/
// Automatically set up any tags that have a data-setup attribute
vjs.autoSetup = function(){
var options, vid, player,
vids = document.getElementsByTagName('video');
// 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 = vjs.JSON.parse(options || '{}');
// Create new video.js instance.
player = videojs(vid, options);
}
}
// If getAttribute isn't defined, we need to wait for the DOM.
} else {
vjs.autoSetupTimeout(1);
break;
}
}
// No videos were found, so keep looping unless page is finisehd loading.
} else if (!vjs.windowLoaded) {
vjs.autoSetupTimeout(1);
}
};
// Pause to let the DOM keep processing
vjs.autoSetupTimeout = function(wait){
setTimeout(vjs.autoSetup, wait);
};
vjs.one(window, 'load', function(){
vjs.windowLoaded = true;
});
// Run Auto-load players
// You have to wait at least once in case this script is loaded after your video in the DOM (weird behavior only with minified version)
vjs.autoSetupTimeout(1);

229
src/js/slider.js Normal file
View File

@ -0,0 +1,229 @@
/* Slider
================================================================================ */
/**
* Parent for seek bar and volume slider
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.Slider = vjs.Component.extend({
/** @constructor */
init: function(player, options){
vjs.Component.call(this, player, options);
// Set property names to bar and handle to match with the child Slider class is looking for
this.bar = this.getChild(this.options_['barName']);
this.handle = this.getChild(this.options_['handleName']);
player.on(this.playerEvent, vjs.bind(this, this.update));
this.on('mousedown', this.onMouseDown);
this.on('touchstart', this.onMouseDown);
this.on('focus', this.onFocus);
this.on('blur', this.onBlur);
this.on('click', this.onClick);
this.player_.on('controlsvisible', vjs.bind(this, this.update));
// This is actually to fix the volume handle position. http://twitter.com/#!/gerritvanaaken/status/159046254519787520
// this.player_.one('timeupdate', vjs.bind(this, this.update));
player.ready(vjs.bind(this, this.update));
this.boundEvents = {};
}
});
vjs.Slider.prototype.createEl = function(type, props) {
props = props || {};
// Add the slider element class to all sub classes
props.className = props.className + ' vjs-slider';
props = vjs.obj.merge({
role: 'slider',
'aria-valuenow': 0,
'aria-valuemin': 0,
'aria-valuemax': 100,
tabIndex: 0
}, props);
return vjs.Component.prototype.createEl.call(this, type, props);
};
vjs.Slider.prototype.onMouseDown = function(event){
event.preventDefault();
vjs.blockTextSelection();
this.boundEvents.move = vjs.bind(this, this.onMouseMove);
this.boundEvents.end = vjs.bind(this, this.onMouseUp);
vjs.on(document, 'mousemove', this.boundEvents.move);
vjs.on(document, 'mouseup', this.boundEvents.end);
vjs.on(document, 'touchmove', this.boundEvents.move);
vjs.on(document, 'touchend', this.boundEvents.end);
this.onMouseMove(event);
};
vjs.Slider.prototype.onMouseUp = function() {
vjs.unblockTextSelection();
vjs.off(document, 'mousemove', this.boundEvents.move, false);
vjs.off(document, 'mouseup', this.boundEvents.end, false);
vjs.off(document, 'touchmove', this.boundEvents.move, false);
vjs.off(document, 'touchend', this.boundEvents.end, false);
this.update();
};
vjs.Slider.prototype.update = function(){
// In VolumeBar init we have a setTimeout for update that pops and update to the end of the
// execution stack. The player is destroyed before then update will cause an error
if (!this.el_) return;
// If scrubbing, we could use a cached value to make the handle keep up with the user's mouse.
// On HTML5 browsers scrubbing is really smooth, but some flash players are slow, so we might want to utilize this later.
// var progress = (this.player_.scrubbing) ? this.player_.getCache().currentTime / this.player_.duration() : this.player_.currentTime() / this.player_.duration();
var barProgress,
progress = this.getPercent(),
handle = this.handle,
bar = this.bar;
// Protect against no duration and other division issues
if (isNaN(progress)) { progress = 0; }
barProgress = progress;
// If there is a handle, we need to account for the handle in our calculation for progress bar
// so that it doesn't fall short of or extend past the handle.
if (handle) {
var box = this.el_,
boxWidth = box.offsetWidth,
handleWidth = handle.el().offsetWidth,
// The width of the handle in percent of the containing box
// In IE, widths may not be ready yet causing NaN
handlePercent = (handleWidth) ? handleWidth / boxWidth : 0,
// Get the adjusted size of the box, considering that the handle's center never touches the left or right side.
// There is a margin of half the handle's width on both sides.
boxAdjustedPercent = 1 - handlePercent,
// Adjust the progress that we'll use to set widths to the new adjusted box width
adjustedProgress = progress * boxAdjustedPercent;
// The bar does reach the left side, so we need to account for this in the bar's width
barProgress = adjustedProgress + (handlePercent / 2);
// Move the handle from the left based on the adjected progress
handle.el().style.left = vjs.round(adjustedProgress * 100, 2) + '%';
}
// Set the new bar width
bar.el().style.width = vjs.round(barProgress * 100, 2) + '%';
};
vjs.Slider.prototype.calculateDistance = function(event){
var el, box, boxX, boxY, boxW, boxH, handle, pageX, pageY;
el = this.el_;
box = vjs.findPosition(el);
boxW = boxH = el.offsetWidth;
handle = this.handle;
if (this.options_.vertical) {
boxY = box.top;
if (event.changedTouches) {
pageY = event.changedTouches[0].pageY;
} else {
pageY = event.pageY;
}
if (handle) {
var handleH = handle.el().offsetHeight;
// Adjusted X and Width, so handle doesn't go outside the bar
boxY = boxY + (handleH / 2);
boxH = boxH - handleH;
}
// Percent that the click is through the adjusted area
return Math.max(0, Math.min(1, ((boxY - pageY) + boxH) / boxH));
} else {
boxX = box.left;
if (event.changedTouches) {
pageX = event.changedTouches[0].pageX;
} else {
pageX = event.pageX;
}
if (handle) {
var handleW = handle.el().offsetWidth;
// Adjusted X and Width, so handle doesn't go outside the bar
boxX = boxX + (handleW / 2);
boxW = boxW - handleW;
}
// Percent that the click is through the adjusted area
return Math.max(0, Math.min(1, (pageX - boxX) / boxW));
}
};
vjs.Slider.prototype.onFocus = function(){
vjs.on(document, 'keyup', vjs.bind(this, this.onKeyPress));
};
vjs.Slider.prototype.onKeyPress = function(event){
if (event.which == 37) { // Left Arrow
event.preventDefault();
this.stepBack();
} else if (event.which == 39) { // Right Arrow
event.preventDefault();
this.stepForward();
}
};
vjs.Slider.prototype.onBlur = function(){
vjs.off(document, 'keyup', vjs.bind(this, this.onKeyPress));
};
/**
* Listener for click events on slider, used to prevent clicks
* from bubbling up to parent elements like button menus.
* @param {Object} event Event object
*/
vjs.Slider.prototype.onClick = function(event){
event.stopImmediatePropagation();
event.preventDefault();
};
/**
* SeekBar Behavior includes play progress bar, and seek handle
* Needed so it can determine seek position based on handle position/size
* @param {vjs.Player|Object} player
* @param {Object=} options
* @constructor
*/
vjs.SliderHandle = vjs.Component.extend();
/**
* Default value of the slider
* @type {Number}
*/
vjs.SliderHandle.prototype.defaultValue = 0;
/** @inheritDoc */
vjs.SliderHandle.prototype.createEl = function(type, props) {
props = props || {};
// Add the slider element class to all sub classes
props.className = props.className + ' vjs-slider-handle';
props = vjs.obj.merge({
innerHTML: '<span class="vjs-control-text">'+this.defaultValue+'</span>'
}, props);
return vjs.Component.prototype.createEl.call(this, 'div', props);
};

Some files were not shown because too many files have changed in this diff Show More