web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-03-05 15:16:06 +02:00
Code Releases Activity

Merge branch 'master' of https://github.com/videojs/video.js into 636-incompatible

Browse Source
This commit is contained in:
Jeremy Elbourn 2013-08-05 14:23:05 -04:00
commit 20e2d4e984
25 changed files with 1208 additions and 924 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.zenflow
View File

@ -1,10 +0,0 @@
---
confirm_review: true
backup_remote: false
release_branch: stable
project: videojs
qa_branch: false
staging_branch: false
development_branch: master
remote: origin
confirm_staging: false

7
CHANGELOG.md
View File

@ -2,7 +2,12 @@ CHANGELOG
=========
## Unreleased (HEAD)
_(none)_
* Added LESS as a CSS preprocessor for the default skin ([view](https://github.com/videojs/video.js/pull/644))
* Exported MenuButtons for use in the API ([view](https://github.com/videojs/video.js/pull/648))
* Fixed ability to remove listeners added with one() ([view](https://github.com/videojs/video.js/pull/659))
* Updated buffered() to account for multiple loaded ranges ([view](https://github.com/videojs/video.js/pull/643))
* Exported createItems() for custom menus ([view](https://github.com/videojs/video.js/pull/654))
* Preventing media events from bubbling up the DOM ([view](https://github.com/videojs/video.js/pull/630))
--------------------

308
CONTRIBUTING.md
View File

@ -1,155 +1,244 @@
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.
CONTRIBUTING
============
So you want to help out? Great! There's a number of ways you can get involved.
* 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
* [File and discuss issues](#filing-issues)
* [Contribute code](#contributing-code)
* [Build and share plugins](docs/plugins.md)
* [Answer questions on Stack Overflow](http://stackoverflow.com/questions/tagged/video.js)
Don't miss the [code style guide](#code-style).
There's also other Video.js projects where you can help. (check the [video.js org](https://github.com/videojs) for an up-to-date list of projects)
# Getting started
* [Videojs.com](https://github.com/videojs/videojs.com)
* [Video.js flash player](https://github.com/videojs/video-js-swf)
* [Player skin designer](https://github.com/videojs/designer)
* [Contribflow](https://github.com/zencoder/contribflow)
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/).
Filing issues
-------------
[GitHub Issues](https://github.com/videojs/video.js/issues) are used for all discussions around the codebase, including **bugs**, **features**, and other **enhancements**.
2. [Fork](http://help.github.com/fork-a-repo/) and clone the video.js git repository.
### Reporting a Bug
```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!
**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.
1. Use the [GitHub issue search](https://github.com/videojs/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.
2. Check if the issue has already 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.
3. Isolate the problem &mdash; **create a [reduced test case](http://css-tricks.com/6263-reduced-test-cases/)** with a live example. You can possibly use [this JSBin example](http://jsbin.com/axedog/7/edit) as a starting point.
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.
A good bug report should be as detailed as possible, so that others won't have to follow up for the essential details.
Example:
Here's an example:
> Short and descriptive example bug report title
> Short yet concise Bug Summary
>
> A summary of the issue and the browser/OS environment in which it occurs. If
> suitable, include the steps required to reproduce the bug.
> Description:
> Happens on Windows 7 and OSX. Seen with IE9, Firefox 19 OSX, Chrome 21, Flash 11.6 and 11.2
>
> 1. This is the first step
> 2. This is the second step
> 3. Further steps, etc.
>
> `<url>` (a link to the reduced test case)
> Expected:
> (describe the expected outcome of the steps above)
>
> Actual:
> (describe what actually happens)
>
> `<url>` (a link to the reduced test case, if it exists)
>
> 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/)**
**[File a bug report](https://github.com/videojs/video.js/issues/new)**
### 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.
### Requesting a Feature
1. [Check the plugin list](https://github.com/videojs/video.js/wiki/Plugins) for any plugins that may already support the feature.
2. [Search the issues](https://github.com/videojs/video.js/issues) for any previous requests for the same feature, and give a thumbs up or +1 on existing requests.
2. If no previous requests exist, create a new issue. Please be as clear as possible about why the feautre is needed and the intended use case.
**[Request a feature](https://github.com/videojs/video.js/issues/new)**
Contributing code
-----------------
To contibute code you'll need to be able to build a copy of Video.js and run tests locally. There are a few requirements before getting started.
- Node.js -- Video.js uses Node for build and test automation. Node is available for Windows, Mac OS X, Linux, and SunOS, as well as source code if that doesn't scare you. [Download and install Node.js](http://nodejs.org/download/)
- grunt-cli -- Install grunt-cli globally so that you will have the correct version of grunt available for any project that needs it.
On Unix-based systems, you'll have to do this as a superuser:
```bash
sudo npm install -g grunt-cli
```
On Windows, you can just run:
```bash
npm install -g grunt-cli
```
- Contribflow -- A homegrown git workflow tool for managing feature/hotfix branches and submitting pull requests. If you have your own preferred git workflow, contribflow isn't required, but the following instructions will assume you're using it.
On Unix-based systems, you'll have to do this as a superuser:
```bash
sudo npm install -g contribflow
```
On Windows, you can just run:
```bash
npm install -g contribflow
```
### Building your own copy of Video.js
First, [fork](http://help.github.com/fork-a-repo/) the video.js git repository. At the top of every github page, there is a Fork button. Click it, and the forking process will copy Video.js into your own GitHub account.
Clone your fork of the repo into your code directory
```bash
git clone https://github.com/<your-username>/video.js.git
```
Navigate to the newly cloned directory
```bash
cd video.js
```
Assign the original repo to a remote called "upstream"
```
git remote add upstream https://github.com/videojs/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
> ```
Install the required node.js modules using node package manager
```bash
npm install
```
> A note to Windows developers: If you run npm commands, and you find that your command prompt colors have suddenly reversed, you can configure npm to set color to false to prevent this from happening.
> `npm config set color false`
> Note that this change takes effect when a new command prompt window is opened; the current window will not be affected.
Build a local copy of video.js and run tests
```bash
grunt
grunt test
```
At this point you should have a built copy of video.js in a directory named `dist`, and all tests should be passing.
### Making Changes
Whether you're adding something new, making something better, or fixing a bug, you'll first want to search the [GitHub issues](https://github.com/videojs/video.js/issues) and [plugins list](https://github.com/videojs/video.js/wiki/Plugins) to make sure you're aware of any previous discussion or work. If an unclaimed issue exists, claim it via a comment. If no issue exists for your change, submit one, follwing the [issue filing guidelines](#filing-issues).
There are two categories of changes in video.js land, features and hotfixes (Video.js follows a branching model similar to [gitflow](http://nvie.com/posts/a-successful-git-branching-model/)). Hotfixes are for urgent fixes that need to be released immediately as a patch. Features are for everything else (including non-urgent fixes). If you think you have a hotfix scenario, verify that (via comment) before starting the work. We'll focus on features here, but you can swap `hotfix` for `feature` in any command.
Start a new development branch
```bash
contrib feature start
```
You'll be prompted to name the branch. After that, contrib will create the branch locally, and use git to push it up to your origin, and track it. You're now ready to start building your feature or fixing that bug! Be sure to read the [Code Style Guide](#code-style-guide).
While you're developing, you can ensure your changes are working by writing tests (in the `test` directory) and running `grunt test`.
There's also a sandbox directory where you can add any file and it won't get tracked as a change. To start you can copy the example index file and see a working version of a player (using the local source code) by loading it in a browser.
```bash
cp sandbox/index.html.example sandbox/index.html
open sandbox/index.html
```
> #### 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 can do either of the following:
>
> 1. Do your development and testing using a local HTTP server.
>
> 2. [Disable the version of Flash included with Chrome](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) and enable a system-wide version of Flash instead.
## Pull requests
Commit and push changes as you go (using git directly). Write thorough descriptions of your changes in your commit messages.
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.
```bash
git add .
git commit -av
git push
```
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.
> GitHub allows you to close an issue through your commit message using the [fixes](https://github.com/blog/831-issues-2-0-the-next-generation) keyword.
>
> ```bash
> My commit message. fixes #123
> Testing: (briefly describe any testing here, for example, 'unit tests and cross-browser manual tests around playback and network interruption')
> ```
Please follow this process; it's the best way to get your work included in the project:
### Submitting your changes
1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork, and configure the remotes:
First, thoroughly test your feature or fix, including writing tests to make sure your change doesn't get regressed in a future update. If you're fixing a bug, we recommend in addition to testing the fix itself, to do some testing around the areas that your fix has touched. For example, a brief smoketest of the player never hurts.
```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
```
Make sure your changes are pushed to origin
2. If you cloned a while ago, get the latest changes from upstream:
```bash
git push
```
```bash
git checkout master
git pull upstream master
```
Use contrib to submit a a pull request (make sure you're in your feature branch)
3. Create a new topic branch to contain your feature, change, or fix:
```bash
contrib feature submit
```
```bash
git checkout -b <topic-branch-name>
```
You'll be prompted for title and description for the Pull Request. After that, contrib will use Git to submit your pull request to video.js.
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.
You're Done! (except for cleanup.) To clean up your feature or hotfix branch:
5. Locally merge (or rebase) the upstream development branch into your topic branch:
First, checkout your feature or issue branch:
```bash
git pull [--rebase] upstream master
```
```bash
git checkout (branchname)
```
6. Push your topic branch up to your fork:
Run this command to clean up your feature:
```bash
git push origin <topic-branch-name>
```
```bash
contrib feature delete
```
10. [Open a Pull Request](http://help.github.com/send-pull-requests/) with a clear title and description.
Run this command to clean up your bug fix:
# Code Style
```bash
contrib hotfix delete
```
> PLEASE NOTE: THIS WILL DELETE YOUR LOCAL AND REMOTE COPIES OF THE FEATURE.
> This is meant to clean up your local and remote branches, so make sure any changes you don't want to lose have been pulled into the parent project or another branch first.
Code Style Guide
----------------
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:
@ -162,11 +251,6 @@ Please follow [Google's JavaScript Style Guide](http://google-styleguide.googlec
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),

19
Gruntfile.js
View File

@ -61,7 +61,7 @@ module.exports = function(grunt) {
minified_api: ['test/minified-api.html']
},
watch: {
files: [ 'src/**/*.js', 'test/unit/*.js' ],
files: [ 'src/**/*', 'test/unit/*.js', 'Gruntfile.js' ],
tasks: 'dev'
},
copy: {
@ -111,6 +111,13 @@ module.exports = function(grunt) {
dest: 'build/files/',
ext: '.min.css'
}
},
less: {
dev: {
files: {
'build/files/video-js.css': 'src/css/video-js.less'
}
}
}
});
@ -120,14 +127,15 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-s3');
grunt.loadNpmTasks('contribflow');
// Default task.
grunt.registerTask('default', ['jshint', 'build', 'minify', 'dist']);
grunt.registerTask('default', ['jshint', 'less', 'build', 'minify', 'dist']);
// Development watch task
grunt.registerTask('dev', ['jshint', 'build', 'qunit:source']);
grunt.registerTask('test', ['jshint', 'build', 'minify', 'qunit']);
grunt.registerTask('dev', ['jshint', 'less', 'build', 'qunit:source']);
grunt.registerTask('test', ['jshint', 'less', 'build', 'minify', 'qunit']);
var fs = require('fs'),
gzip = require('zlib').gzip;
@ -157,8 +165,7 @@ module.exports = function(grunt) {
grunt.file.write('build/files/combined.video.js', combined);
// Copy over other files
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/css/video-js.png', 'build/files/video-js.png');
grunt.file.copy('src/swf/video-js.swf', 'build/files/video-js.swf');
// Inject version number into css file

48
README.md
View File

@ -1,50 +1,18 @@
# [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)
# [Video.js - HTML5 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.
> Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through [plugins](https://github.com/videojs/video.js/wiki/Plugins)). It supports video playback on desktops and mobile devices. This project was started mid 2010, and the player is now used on over 50,000 websites.
### PLEASE EXCUSE OUR DUST
We're finishing up a big overhaul of the libary which includes
* Closure compiler advanced mode support for drastically better minification over previous versions
* Flashy new automated builds and test using node.js and grunt
Check out our [contributing guide](https://github.com/zencoder/video-js/blob/master/CONTRIBUTING.md) for info on building a local version.
## About
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).
Visit [videojs.com](http://videojs.com) for an overview, download options, and instructions on how to use the player on your site.
## Contributing
Video.js is a free and open source library, and we appreciate any help you're willing to give. Check out the [contributing guide](CONTRIBUTING.md).
Check out our [contributing guide](https://github.com/zencoder/video-js/blob/master/CONTRIBUTING.md).
## Building your own Video.js from source
To build your own custom version read the section on [contributing code](CONTRIBUTING.md#contributing-code) and ["Building your own copy"](CONTRIBUTING.md#building-your-own-copy-of-videojs) in the contributing guide.
## License
Video.js is licensed under the Apache License, Version 2.0. [View the license file](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.

5
VERSION.yml
View File

@ -1,5 +0,0 @@
---
major: 3
minor: 2
patch: 3
pre:

8
docs/api.md
View File

@ -186,6 +186,14 @@ myPlayer.cancelFullScreen();
```
### dispose() ###
Destroys the video player and does any necessary cleanup. This is especially helpful if you are dynamically adding and removing videos to/from the DOM. Use after removing videos from the DOM.
```js
myPlayer.dispose();
```
Events
------
You can attach event listeners to the player similarly to how you would for a video element.

4
docs/index.md
View File

@ -2,7 +2,7 @@
<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).
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/videojs/video.js/tree/master/docs).
## Getting Started
@ -24,4 +24,4 @@ The Video.js documentation is here to help you setup and use the player. These d
## Resources
* [Glossary](glossary.md) - Some helpful definitions.
* [Glossary](glossary.md) - Some helpful definitions.

4
docs/setup.md
View File

@ -12,8 +12,8 @@ You can download the Video.js source and host it on your own servers, or use the
### CDN Version ###
```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>
<link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.1/video.js"></script>
```
### Self Hosted. ###

12
docs/skins.md
View File

@ -1,21 +1,23 @@
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.
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.
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.
New in version 4.0 is the use of font icons. All of the icons (play, pause, etc.) use the new custom font, which allows the icons to be scaled and colored just like any other text font.
You can either override styles in the default skin:
The easiest way to try this out is by using the [player skin designer](http://designer.videojs.com/).
When you create a new skin, you can either override styles in the default skin:
```css
.vjs-default-skin .vjs-play-progress { background: #900; }
```
Or remove the 'vjs-default-skin' class from the video tag and create your own skin.
Or remove the 'vjs-default-skin' class from the video tag and create a new skin from scratch.
```html
<video class="video-js my-custom-skin" ...>
```
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.
More custom skins will be available for download soon. If you have one you like you can share it by forking [this example on CodePen.io](http://codepen.io/heff/pen/EarCt), and adding a link on the [Skins wiki page](https://github.com/videojs/video.js/wiki/Skins).

3
package.json
View File

@ -32,7 +32,8 @@
"grunt-s3": "~0.2.0-alpha",
"semver": "~1.1.4",
"grunt-contrib-cssmin": "~0.6.0",
"uglify-js": "~2.3.6"
"uglify-js": "~2.3.6",
"grunt-contrib-less": "~0.6.4"
},
"testling": {
"browsers": [

2
sandbox/index.html.example
View File

@ -4,7 +4,7 @@
<meta charset="utf-8" />
<title>Video.js Sandbox</title>
<link href="../src/css/video-js.css" rel="stylesheet" type="text/css">
<link href="../build/files/video-js.css" rel="stylesheet" type="text/css">
<!-- LOAD VIDEO.JS SOURCE FILES IN ORDER -->
<script src="../build/source-loader.js"></script>

2
sandbox/plugin.html.example
View File

@ -4,7 +4,7 @@
<meta charset="utf-8" />
<title>Video.js Plugin Example</title>
<link href="../src/css/video-js.css" rel="stylesheet" type="text/css">
<link href="../build/files/video-js.css" rel="stylesheet" type="text/css">
<!-- LOAD VIDEO.JS SOURCE FILES IN ORDER -->
<script src="../build/source-loader.js"></script>

726
src/css/video-js.css
View File

@ -1,726 +0,0 @@
/*!
Video.js 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.*/
/* Turn off user selection (text highlighting) by default.
The majority of player components will not be text blocks.
Text areas will need to turn user selection back on. */
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
-o-user-select: none;
user-select: none;
}
/* 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?#iefix') 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 use another font. Please +1 the fontawesome request.
https://github.com/FortAwesome/Font-Awesome/issues/968 */
.vjs-default-skin .vjs-captions-button:before {
content: "\e008";
}
/* 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);
}

908
src/css/video-js.less Normal file
View File

@ -0,0 +1,908 @@
/*!
Video.js Default Styles (http://videojs.com)
Version GENERATED_AT_BUILD
Create your own skin at http://designer.videojs.com
*/
// To customize the player skin, change the values of the variables or edit the
// CSS below.
// (This file uses LESS. Learn more at http://lesscss.org/)
// The base font size controls the size of everything, not just text. All
// diminensions use em-based sizes so that the scale along with the font size.
// Try increasing it to 20px and see what happens.
@base-font-size: 10px;
// The main font color controls the color of the text and the icons (font icons)
@main-font-color: #CCCCCC; // e.g. rgb(255, 255, 255) or #ffffff
// The default color of control backgrounds is mostly black but with a little
// bit of blue so it can still be seen on all black video frames, which are
// common.
@control-bg-color: #07141E; // e.g. rgb(255, 255, 255) or #ffffff
@control-bg-alpha: 0.7; // 1.0 = 100% opacity, 0.0 = 0% opacity
// The slider bar color is used for the progress bar and the volume bar
@slider-bar-color: #66A8CC; // e.g. rgb(255, 255, 255) or #ffffff
// The background of the progress bar and volume bar have a lined pattern that
// is created from a base64 encoded image. You can generate your own pattern at
// http://www.patternify.com/ then replace the value in the quotes with your own
@slider-bar-pattern: ~'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC';
// The color of the slider background
@slider-background-color: #333333;
@slider-background-alpha: 0.9; // 1.0 = 100% opacity, 0.0 = 0% opacity
// The "Big Play Button" is the play button that shows before the video plays.
// To center it set the align values to center and middle. The typical location
// of the button is the center, but there is trend towards moving it to a corner
// where it gets out of the way of valuable content in the poster image.
@big-play-align: left; // left, center, or right
@big-play-vertical-align: top; // top, middle, or bottom
// The button colors match the control colors by default but you can customize
// them by replace the variables (@control-bg-color) with your own color values.
@big-play-bg-color: @control-bg-color;
@big-play-bg-alpha: @control-bg-alpha;
// The font size is what makes the big play button, big. All width/height values
// use ems, which are a multiple of the font size.
// If the @base-font-size is 10px, then 3em equals 30px.
@big-play-font-size: 3em;
// Now that font size is set, the following em values will be a multiple of the
// new font size. If @big-play-font-size is 3em (30px), then setting the any of
// the following values to 2em would equal 60px. 2 * font-size
@big-play-margin: 0.5em;
@big-play-width: 4em;
@big-play-height: 2.6em;
@big-play-border-radius: 0.8em;
@big-play-border-width: 0.1em;
@big-play-border-color: #3b4249;
/* SKIN
================================================================================
The main class name for all skin-specific styles. To make your own skin,
replace all occurances of 'vjs-default-skin' with a new name. Then add your new
skin name to your video tag instead of the default skin.
e.g. <video class="video-js my-skin-name">
*/
.vjs-default-skin {
color: @main-font-color;
}
/* Custom Icon Font
--------------------------------------------------------------------------------
The control icons are from a custom font. Each icon corresponds to a character
(e.g. "\e001"). Font icons allow for easy scaling and coloring of icons.
*/
@font-face{
font-family: 'VideoJS';
src: url('font/vjs.eot');
src: url('font/vjs.eot?#iefix') format('embedded-opentype'),
url('font/vjs.woff') format('woff'),
url('font/vjs.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
// Icon font character values
@play-icon: "\e001";
@pause-icon: "\e002";
@volume-muted-icon: "\e003";
@volume-low-icon: "\e004";
@volume-mid-icon: "\e005";
@volume-high-icon: "\e006";
@fullscreen-enter-icon: "\e000";
@fullscreen-exit-icon: "\e00b";
@square-icon: "\e009";
@spinner-icon: "\e00a";
@subtitles-icon: "\e00c";
@captions-icon: "\e008";
/* Base UI Component Classes
--------------------------------------------------------------------------------
*/
/* Slider - used for Volume bar and Seek bar */
.vjs-default-skin .vjs-slider {
/* Replace browser focus hightlight with handle highlight *///
outline: 0;
position: relative;
cursor: pointer;
padding: 0;
.background-color-with-alpha(@slider-background-color, @slider-background-alpha);
}
.vjs-default-skin .vjs-slider:focus {
.box-shadow(0 0 2em #fff);
}
.vjs-default-skin .vjs-slider-handle {
position: absolute;
/* Needed for IE6 *///
left: 0;
top: 0;
}
.vjs-default-skin .vjs-slider-handle:before {
content: @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 *///
.transform(rotate(-45deg));
}
/* Control Bar
--------------------------------------------------------------------------------
The default control bar that is a container for most of the controls.
*/
.vjs-default-skin .vjs-control-bar {
/* Start hidden *///
display: none;
position: absolute;
/* Place control bar at the bottom of the player box/video.
If you want more margin below the control bar, add more height. *///
bottom: 0;
/* Use left/right to stretch to 100% width of player div *///
left: 0;
right: 0;
/* Height includes any margin you want above or below control items *///
height: 3.0em;
.background-color-with-alpha(@control-bg-color, @control-bg-alpha);
}
/* 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 */
.vjs-default-skin .vjs-control-text {
.hide-visually;
}
/* Play/Pause
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-play-control {
width: 5em;
cursor: pointer;
}
.vjs-default-skin .vjs-play-control:before {
content: @play-icon;
}
.vjs-default-skin.vjs-playing .vjs-play-control:before {
content: @pause-icon;
}
/* 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: @volume-high-icon;
}
.vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
content: @volume-muted-icon;
}
.vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
content: @volume-low-icon;
}
.vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
content: @volume-mid-icon;
}
.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: @slider-bar-color
url(@slider-bar-pattern)
-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;
}
/* 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. *///
.transition(all 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. */
.transition(all 0.2s);
}
/* Box containing play and load progresses. Also acts as seek scrubber. */
.vjs-default-skin .vjs-progress-holder {
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. Surprisingly 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: @slider-bar-color
url(@slider-bar-pattern)
-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: @fullscreen-enter-icon;
}
/* Switch to the exit icon when the player is in fullscreen */
.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
content: @fullscreen-exit-icon;
}
/* Big Play Button (play button at start)
--------------------------------------------------------------------------------
Positioning of the play button in the center or other corners can be done more
easily in the skin designer. http://designer.videojs.com/
*/
.vjs-default-skin .vjs-big-play-button {
// Calculate total width/height so we're able to center the button
@total-width: @big-play-width + (@big-play-border-width * 2);
@total-height: @big-play-height + (@big-play-border-width * 2);
// Position the button using the absolute-align mixin (bottom of page)
.absolute-align(@big-play-align, @big-play-margin, @total-width);
.absolute-align(@big-play-vertical-align, @big-play-margin, @total-height);
font-size: @big-play-font-size;
display: block;
z-index: 2;
position: absolute;
width: @big-play-width;
height: @big-play-height;
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-with-alpha(@big-play-bg-color, @big-play-bg-alpha);
border: @big-play-border-width solid @big-play-border-color;
.border-radius(@big-play-border-radius);
.box-shadow(0px 0px 1em rgba(255, 255, 255, 0.25));
.transition(all 0.4s);
}
.vjs-default-skin:hover .vjs-big-play-button,
.vjs-default-skin .vjs-big-play-button:focus {
outline: 0;
border-color: #fff;
/* IE8 needs a non-glow hover state *///
background-color: rgb(80, 80, 80);
background-color: rgba(50, 50, 50, 0.75);
.box-shadow(0 0 3em #fff);
.transition(all 0s);
}
.vjs-default-skin .vjs-big-play-button:before {
content: @play-icon;
font-family: VideoJS;
/* In order to center the play icon vertically we need to set the line height
to the same as the button height */
line-height: @big-play-height;
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;
.animation(spin 1.5s infinite linear);
}
.vjs-default-skin .vjs-loading-spinner:before {
content: @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: @spinner-icon; /* 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); }
}
@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 width 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-with-alpha(@control-bg-color, @control-bg-alpha);
.box-shadow(-0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2));
}
.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;
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 {
outline: 0;
color: #111;
.background-color-with-alpha(rgb(255, 255, 255), 0.75);
.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: @subtitles-icon; }
/* Captions Button */
.vjs-default-skin .vjs-captions-button:before {
content: @captions-icon;
}
/* 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 {
.box-shadow(0 0 1em rgba(255, 255, 255, 1));
}
/*
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: @base-font-size;
/* Allow poster to be vertially aligned. */
vertical-align: middle;
/* display: table-cell; */ /*This works in Safari but not Firefox.*/
/* Provide some basic defaults for fonts */
font-weight: normal;
font-style: normal;
/* Avoiding helvetica: issue #376 */
font-family: Arial, sans-serif;
/* Turn off user selection (text highlighting) by default.
The majority of player components will not be text blocks.
Text areas will need to turn user selection back on. */
.user-select(none);
}
/* 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%;
/* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html *///
overflow-y: auto;
}
.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;
/* IE6 full-window (underscore hack) *///
_position: absolute;
}
.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;
/* Leave padding on left and right *///
left: 1em;
right: 1em;
}
/* 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-color-with-alpha(rgb(0, 0, 0), 0.5);
}
.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 needed to make sure things hide in older browsers too. */
visibility: visible;
opacity: 1;
@trans: visibility 0.1s, opacity 0.1s; // Var needed because of comma
.transition(@trans);
}
.vjs-fade-out {
display: block !important;
visibility: hidden;
opacity: 0;
@trans: visibility 1.5s, opacity 1.5s;
.transition(@trans);
/* Wait a moment before fading out the control bar */
.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;
}
// MIXINS
// =============================================================================
// Mixins are a LESS feature and are used to add vendor prefixes to CSS rules
// when needed.
// https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
.box-shadow (@string: 0 0 1em rgba(0, 0, 0, 0.25)) {
/* box-shadow *///
-webkit-box-shadow: @string;
-moz-box-shadow: @string;
box-shadow: @string;
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
.border-radius (@string: 5px) {
/* border-radius *///
-webkit-border-radius: @string;
-moz-border-radius: @string;
border-radius: @string;
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/transition
.transition (@string: all 1s linear) {
/* transition *///
-webkit-transition: @string;
-moz-transition: @string;
-o-transition: @string;
transition: @string;
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/transition
.transition-delay (@string: 1s) {
/* transition-delay *///
-webkit-transition-delay: @string;
-moz-transition-delay: @string;
-o-transition-delay: @string;
transition-delay: @string;
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/animation
.animation (@string: spin 1s infinite linear) {
/* animation *///
-webkit-animation: @string;
-moz-animation: @string;
-o-animation: @string;
animation: @string;
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/transform
.transform (@string: rotate(-45deg)) {
/* transform *///
-webkit-transform: @string;
-moz-transform: @string;
-ms-transform: @string;
-o-transform: @string;
transform: @string;
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
.user-select (@string: none) {
/* user-select *///
-webkit-user-select: @string;
-moz-user-select: @string;
-ms-user-select: @string;
user-select: @string;
}
// Hide something visually but keep available for screen readers.
// http://h5bp.com/v
.hide-visually () {
/* hide-visually *///
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position:
absolute;
width: 1px;
}
// Align an object with absolute positioning
// Used to align the Big Play Button in the corners or center
.absolute-align (@align, @margin, @length) when (@align = top) {
top: @margin;
}
.absolute-align (@align, @margin, @length) when (@align = bottom) {
bottom: @margin;
}
.absolute-align (@align, @margin, @length) when (@align = left) {
left: @margin;
}
.absolute-align (@align, @margin, @length) when (@align = right) {
right: @margin;
}
.absolute-align (@align, @margin, @length) when (@align = center) {
/* Center it horizontally *///
left: 50%;
margin-left: -(@length / 2);
}
.absolute-align (@align, @margin, @length) when (@align = middle) {
/* Center it vertically *///
top: 50%;
margin-top: -(@length / 2);
}
// http://stackoverflow.com/questions/637921/opacity-of-background-but-not-the-text
.background-color-with-alpha (@color, @alpha) {
@rgba: rgba(red(@color), green(@color), blue(@color), @alpha);
/* background-color-with-alpha *///
background-color: @color;
background-color: @rgba;
// No longer using MS filters because they break border radius in IE9
// @argb: argb(@rgba);
// filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})";
// -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})";
}
.border-color-with-alpha (@color, @alpha) {
@rgba: rgba(red(@color), green(@color), blue(@color), @alpha);
/* border-color-with-alpha *///
border-color: @color;
border-color: @rgba;
}
// NOTES ON LESS (tracking learnings so we don't forget)
// =============================================================================
// * We want this file to continue to be accessible by people who don't know
// LESS but know CSS. This means finding the balance between using the most
// valuable LESS features (e.g. variables) and keeping it looking like CSS.
// So it's best to avoid advanced LESS features like conditional statements.
// (we're using one for the big play button position because that's a hot
// topic)
//
// * We care about the readability of the CSS output of LESS, which means we
// have to be careful about what features of LESS we use. (if you're building
// your own skin this may not apply)
// 1. Comments inside of rules (strangely) have an extra line added after
// them in the CSS output. To avoid this we can add a LESS comment after
// the CSS comment.
// /* comment *///
//
// 2. In a rule with nested rules, any comments outside of a rule are moved
// to the top of the parent rule. i.e. it might look like:
// /* title of rule 1 */
// /* title of rule 2 */
// .rule1 {}
// .rule2 {}
// This is why we aren't using nested rules inside of the
// vjs-default-skin class.
/* -----------------------------------------------------------------------------
The original source of this file lives at
https://github.com/videojs/video.js/blob/master/src/css/video-js.less */

2
src/js/component.js
View File

@ -45,6 +45,8 @@ vjs.Component = vjs.CoreObject.extend({
* Dispose of the component and all child components.
*/
vjs.Component.prototype.dispose = function(){
this.trigger('dispose');
// Dispose all children.
if (this.children_) {
for (var i = this.children_.length - 1; i >= 0; i--) {

13
src/js/events.js
View File

@ -277,8 +277,9 @@ vjs.trigger = function(elem, event) {
elemData.dispatcher.call(elem, event);
}
// Unless explicitly stopped, recursively calls this function to bubble the event up the DOM.
if (parent && !event.isPropagationStopped()) {
// Unless explicitly stopped or the event does not bubble (e.g. media events)
// recursively calls this function to bubble the event up the DOM.
if (parent && !event.isPropagationStopped() && event.bubbles !== false) {
vjs.trigger(parent, event);
// If at the top of the DOM, triggers the default action unless disabled.
@ -329,8 +330,10 @@ vjs.trigger = function(elem, event) {
* @return {[type]}
*/
vjs.one = function(elem, type, fn) {
vjs.on(elem, type, function(){
vjs.off(elem, type, arguments.callee);
var func = function(){
vjs.off(elem, type, func);
fn.apply(this, arguments);
});
};
func.guid = fn.guid = fn.guid || vjs.guid++;
vjs.on(elem, type, func);
};

5
src/js/exports.js
View File

@ -38,6 +38,7 @@ goog.exportSymbol('videojs.cache', vjs.cache);
// goog.exportProperty(vjs.CoreObject, 'create', vjs.CoreObject.create);
goog.exportSymbol('videojs.Component', vjs.Component);
goog.exportProperty(vjs.Component.prototype, 'player', vjs.Component.prototype.player);
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);
@ -90,6 +91,10 @@ 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.MenuButton', vjs.MenuButton);
goog.exportProperty(vjs.MenuButton.prototype, 'createItems', vjs.MenuButton.prototype.createItems);
goog.exportProperty(vjs.TextTrackButton.prototype, 'createItems', vjs.TextTrackButton.prototype.createItems);
goog.exportProperty(vjs.ChaptersButton.prototype, 'createItems', vjs.ChaptersButton.prototype.createItems);
goog.exportSymbol('videojs.SubtitlesButton', vjs.SubtitlesButton);
goog.exportSymbol('videojs.CaptionsButton', vjs.CaptionsButton);

2
src/js/menu.js
View File

@ -128,7 +128,7 @@ vjs.MenuButton.prototype.createMenu = function(){
}));
}
this.items = this.createItems();
this.items = this['createItems']();
if (this.items) {
// Add menu items to the menu

9
src/js/player.js
View File

@ -86,7 +86,9 @@ vjs.Player = vjs.Component.extend({
vjs.Player.prototype.options_ = vjs.options;
vjs.Player.prototype.dispose = function(){
// this.isReady_ = false;
this.trigger('dispose');
// prevent dispose from being called twice
this.off('dispose');
// Kill reference to this player
vjs.players[this.id_] = null;
@ -544,11 +546,12 @@ vjs.Player.prototype.remainingTime = function(){
vjs.Player.prototype.buffered = function(){
var buffered = this.techGet('buffered'),
start = 0,
buflast = buffered.length - 1,
// 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);
if (buffered && buflast >= 0 && buffered.end(buflast) !== end) {
end = buffered.end(buflast);
// Storing values allows them be overridden by setBufferedFromProgress
this.cache_.bufferEnd = end;
}

2
test/index.html
View File

@ -12,7 +12,7 @@
<script src="../test/qunit/qunit/qunit.js"></script>
<!-- Video.js CSS -->
<link rel="stylesheet" href="../src/css/video-js.css" type="text/css">
<link rel="stylesheet" href="../build/files/video-js.css" type="text/css">
<script type="text/javascript">
(function(){

2
test/minified-api.html
View File

@ -8,7 +8,7 @@
<script src="../test/qunit/qunit/qunit.js"></script>
<!-- Video.js CSS -->
<link rel="stylesheet" href="../src/css/video-js.css" type="text/css">
<link rel="stylesheet" href="../build/files/video-js.css" type="text/css">
<!-- LIB COMPILED WITH NOT COMPILED TESTS
Check publicly available APIs against compiled lib

2
test/minified.html
View File

@ -8,7 +8,7 @@
<script src="../test/qunit/qunit/qunit.js"></script>
<!-- Video.js CSS -->
<link rel="stylesheet" href="../src/css/video-js.css" type="text/css">
<link rel="stylesheet" href="../build/files/video-js.css" type="text/css">
<!-- SOURCE COMPILED WITH TESTS
grunt-contrib-qunit doesn't support query vars, so making this script

4
test/unit/component.js
View File

@ -82,8 +82,12 @@ test('should dispose of component and children', function(){
var data = vjs.getData(comp.el());
var id = comp.el()[vjs.expando];
var hasDisposed = false;
comp.on('dispose', function(){ hasDisposed = true; });
comp.dispose();
ok(hasDisposed, 'component fired dispose event');
ok(!comp.children(), 'component children were deleted');
ok(!comp.el(), 'component element was deleted');
ok(!child.children(), 'child children were deleted');

25
test/unit/events.js
View File

@ -89,3 +89,28 @@ test('should stop immediate propagtion', function(){
vjs.trigger(el, 'test');
});
test('should bubble up DOM unless bubbles == false', function(){
expect(3);
var outer = document.createElement('div');
var inner = outer.appendChild(document.createElement('div'));
// Verify that if bubbles === true, event bubbles up dom.
vjs.on(inner, 'bubbles', function(e){
ok(true, 'Inner listener fired');
});
vjs.on(outer, 'bubbles', function(e){
ok(true, 'Outer listener fired');
});
vjs.trigger(inner, { type:'bubbles', target:inner, bubbles:true });
// Only change 'bubbles' to false, and verify only inner handler is called.
vjs.on(inner, 'nobub', function(e){
ok(true, 'Inner listener fired');
});
vjs.on(outer, 'nobub', function(e){
ok(false, 'Outer listener fired');
});
vjs.trigger(inner, { type:'nobub', target:inner, bubbles:false });
});