Merge branch 'master' of https://github.com/videojs/video.js into stable

* 'master' of https://github.com/videojs/video.js: (38 commits) v5.6.0 @gkatsev updated to latest videojs-ie8 shim. closes videojs#3042 @hubdotcom changed URLs in README to be protocol-relative. closes videojs#3040 @CoWinkKeyDinkInc fixed table in Tracks guide. Replaced some single quotes with double quotes. closes videojs#2946 @aril-spetalen added language support for Norwegian (nb and nn). closes videojs#3021 @vitor-faiante updated the guides. closes videojs#2781 @gkatsev checked muted status when updating volume bar level. closes videojs#3037 @OwenEdwards fixed double-localization of mute toggle control text. closes videojs#3017 @mister-ben made $primary-foreground-color a !default sass var. closes videojs#3003 @OwenEdwards Fixed volume menu keyboard access. closes videojs#3034 @OwenEdwards Fixed menu keyboard access and ARIA labeling for screen readers. closes videojs#3033 @OwenEdwards added ClickableComponent. Fixed keyboard operation of buttons. closes videojs#3032 v5.5.3 @rcrooks fixed a couple of docs link and a jsdoc comment. closes videojs#2987 @mister-ben updated CDN urls in setup guide. closes videojs#2984 @gkasev updated vjs to correctly return already created player when given an element. closes videojs#3006 v5.5.2 make sure that styleEl_ is in DOM before removing on dispose. closes videojs#3004 v5.5.1 @gkatsev fixed sass if else for icons. closes videojs#2988 ...
jgubman · Jan 27, 2016 · 37d60dc · 37d60dc
2 parents ec5c10e + 58f7613
commit 37d60dc
Show file tree

Hide file tree

Showing 52 changed files with 874 additions and 256 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,50 @@ _(none)_
 
 --------------------
 
+## 5.6.0 (2016-01-26)
+* @OwenEdwards added ClickableComponent. Fixed keyboard operation of buttons ([view](https://github.com/videojs/video.js/pull/3032))
+* @OwenEdwards Fixed menu keyboard access and ARIA labeling for screen readers ([view](https://github.com/videojs/video.js/pull/3033))
+* @OwenEdwards Fixed volume menu keyboard access ([view](https://github.com/videojs/video.js/pull/3034))
+* @mister-ben made $primary-foreground-color a !default sass var ([view](https://github.com/videojs/video.js/pull/3003))
+* @OwenEdwards fixed double-localization of mute toggle control text ([view](https://github.com/videojs/video.js/pull/3017))
+* @gkatsev checked muted status when updating volume bar level ([view](https://github.com/videojs/video.js/pull/3037))
+* @vitor-faiante updated the guides ([view](https://github.com/videojs/video.js/pull/2781))
+* @aril-spetalen added language support for Norwegian (nb and nn) ([view](https://github.com/videojs/video.js/pull/3021))
+* @CoWinkKeyDinkInc fixed table in Tracks guide. Replaced some single quotes with double quotes ([view](https://github.com/videojs/video.js/pull/2946))
+* @hubdotcom changed URLs in README to be protocol-relative ([view](https://github.com/videojs/video.js/pull/3040))
+* @gkatsev updated to latest videojs-ie8 shim ([view](https://github.com/videojs/video.js/pull/3042))
+
+## 5.5.3 (2016-01-15)
+* @gkasev updated vjs to correctly return already created player when given an element ([view](https://github.com/videojs/video.js/pull/3006))
+* @mister-ben updated CDN urls in setup guide ([view](https://github.com/videojs/video.js/pull/2984))
+* @rcrooks fixed a couple of docs link and a jsdoc comment ([view](https://github.com/videojs/video.js/pull/2987))
+
+## 5.5.2 (2016-01-14)
+* make sure that styleEl_ is in DOM before removing on dispose ([view](https://github.com/videojs/video.js/pull/3004))
+
+## 5.5.1 (2016-01-08)
+* @gkatsev fixed sass if else for icons ([view](https://github.com/videojs/video.js/pull/2988))
+
+## 5.5.0 (2016-01-07)
+* @hartman fixed usage of lighten in progress component. Fixes #2793 ([view](https://github.com/videojs/video.js/pull/2875))
+* @misteroneill exposed createEl on videojs ([view](https://github.com/videojs/video.js/pull/2926))
+* @huitsing updated docstrings for autoplay and loop methods ([view](https://github.com/videojs/video.js/pull/2960))
+* @rcrooks fixed some broken links in guides ([view](https://github.com/videojs/video.js/pull/2965))
+* @forbesjo fixed errorDisplay erroring on subsequent openings ([view](https://github.com/videojs/video.js/pull/2966))
+* @incompl updated build command in CONTRIBUTING.md ([view](https://github.com/videojs/video.js/pull/2967))
+* @forbesjo updated player to not autoplay if there is no source ([view](https://github.com/videojs/video.js/pull/2971))
+* @gkatsev updated css to have ascii codepoints for fonticons. Expose new scss file ([view](https://github.com/videojs/video.js/pull/2973))
+
+## 5.4.6 (2015-12-22)
+* @gkatsev fixed vertical slider alignment in volume menu button ([view](https://github.com/videojs/video.js/pull/2943))
+
+## 5.4.5 (2015-12-15)
+* @gkatsev added mouse/touch listeners to volume menu button ([view](https://github.com/videojs/video.js/pull/2638))
+* @gkatsev updated styles for inline menu and volume bar ([view](https://github.com/videojs/video.js/pull/2913))
+* @BrandonOCasey updated sandbox to to use newer CDN urls ([view](https://github.com/videojs/video.js/pull/2917))
+* @hartman updated options guide doc ([view](https://github.com/videojs/video.js/pull/2908))
+* @rcrooks fixed simple embed example ([view](https://github.com/videojs/video.js/pull/2915))
+
 ## 5.4.4 (2015-12-09)
 * @gkatsev switched to use custom vtt.js from npm ([view](https://github.com/videojs/video.js/pull/2905))
 

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -144,7 +144,7 @@ npm install
 Build a local copy of video.js and run tests
 
 ```bash
-grunt
+grunt dist
 grunt test
 ```
 

diff --git a/README.md b/README.md
@@ -9,8 +9,8 @@ Thanks to the awesome folks over at [Fastly](http://www.fastly.com/), there's a
 `<head>`:
 
 ```html
-<link href="http://vjs.zencdn.net/5.0/video-js.min.css" rel="stylesheet">
-<script src="http://vjs.zencdn.net/5.0/video.min.js"></script>
+<link href="//vjs.zencdn.net/5.0/video-js.min.css" rel="stylesheet">
+<script src="//vjs.zencdn.net/5.0/video.min.js"></script>
 ```
 
 Then, whenever you want to use Video.js you can simply use the `<video>` element as your normally would, but with an additional `data-setup` attribute containing any Video.js options. These options
@@ -20,8 +20,8 @@ can include any Video.js option plus potential [plugin](https://github.com/video
 <video id="really-cool-video" class="video-js vjs-default-skin" controls
  preload="auto" width="640" height="264" poster="really-cool-video-poster.jpg"
  data-setup='{}'>
-  <source src="really-cool-video.mp4" type='video/mp4'>
-  <source src="really-cool-video.webm" type='video/webm'>
+  <source src="really-cool-video.mp4" type="video/mp4">
+  <source src="really-cool-video.webm" type="video/webm">
   <p class="vjs-no-js">
     To view this video please enable JavaScript, and consider upgrading to a web browser
     that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>

diff --git a/build/grunt.js b/build/grunt.js
@@ -151,7 +151,7 @@ module.exports = function(grunt) {
     watch: {
       skin: {
         files: ['src/css/**/*'],
-        tasks: 'sass'
+        tasks: ['sass', 'wrapcodepoints']
       },
       jshint: {
         files: ['src/**/*', 'test/unit/**/*.js', 'Gruntfile.js'],
@@ -196,7 +196,7 @@ module.exports = function(grunt) {
     sass: {
       build: {
         files: {
-          'build/temp/video-js.css': 'src/css/video-js.scss'
+          'build/temp/video-js.css': 'src/css/vjs.scss'
         }
       }
     },
@@ -455,6 +455,7 @@ module.exports = function(grunt) {
     'uglify',
 
     'sass',
+    'wrapcodepoints',
     'version:css',
     'cssmin',
 
@@ -479,6 +480,17 @@ module.exports = function(grunt) {
     'zip:dist'
   ]);
 
+  // Sass turns unicode codepoints into utf8 characters.
+  // We don't want that so we unwrapped them in the templates/scss.hbs file.
+  // After sass has generated our css file, we need to wrap the codepoints
+  // in quotes for it to work.
+  grunt.registerTask('wrapcodepoints', function() {
+    const sassConfig = grunt.config.get('sass.build.files');
+    const cssPath = Object.keys(sassConfig)[0];
+    const css = grunt.file.read(cssPath);
+    grunt.file.write(cssPath, css.replace(/(\\f\w+);/g, "'$1';"));
+  });
+
   // Default task - build and test
   grunt.registerTask('default', ['test']);
 

diff --git a/component.json b/component.json
@@ -1,7 +1,7 @@
 {
   "name": "video.js",
   "description": "An HTML5 and Flash video player with a common API and skin for both.",
-  "version": "5.4.4",
+  "version": "5.6.0",
   "keywords": [
     "videojs",
     "html5",

diff --git a/docs/examples/simple-embed/index.html b/docs/examples/simple-embed/index.html
@@ -1,37 +1,30 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <title>Video.js | HTML5 Video Player</title>
-
-  <!-- Chang URLs to wherever Video.js files will be hosted -->
-  <!-- Default URLs assume the examples folder is included alongside video.js -->
-  <link href="../../video-js.min.css" rel="stylesheet" type="text/css">
 
-  <!-- Include ES5 shim, sham and html5 shiv for ie8 support  -->
-  <!-- Exclude this if you don't need ie8 support -->
-  <script src="../../ie8/videojs-ie8.min.js"></script>
+<head>
 
-  <!-- video.js must be in the <head> for older IEs to work. -->
-  <script src="../../video.min.js"></script>
+  <head>
+    <title>Video.js | HTML5 Video Player</title>
+    <link href="http://vjs.zencdn.net/5.0.2/video-js.css" rel="stylesheet">
+    <script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
+    <script src="http://vjs.zencdn.net/5.0.2/video.js"></script>
 
-  <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
-  <script>
-    videojs.options.flash.swf = "../../video-js.swf";
-  </script>
+  </head>
 
 </head>
+
 <body>
 
-  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" 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' />
-    <track kind="captions" src="../shared/example-captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
-    <track kind="subtitles" src="../shared/example-captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
+  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
+    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
+    <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
+    <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
+    <track kind="captions" src="../shared/example-captions.vtt" srclang="en" label="English"></track>
+    <!-- Tracks need an ending tag thanks to IE9 -->
+    <track kind="subtitles" src="../shared/example-captions.vtt" srclang="en" label="English"></track>
+    <!-- Tracks need an ending tag thanks to IE9 -->
     <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
   </video>
-
 </body>
+
 </html>
diff --git a/docs/guides/api.md b/docs/guides/api.md
@@ -17,7 +17,7 @@ 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
+```js
 videojs("example_video_1").ready(function(){
   var myPlayer = this;
 

diff --git a/docs/guides/languages.md b/docs/guides/languages.md
@@ -89,12 +89,12 @@ NOTE: These need to be added after the core Video.js script.
 3. During a Video.js player instantiation. Adding the languages to the configuration object provided in the `data-setup` attribute.
 
 ```html
-<video id="example_video_1" class="video-js vjs-default-skin"  
-  controls preload="auto" width="640" height="264"  
-  data-setup='{"languages":{"es":{"Play":"Juego"}}}'>  
- <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='{"languages":{"es":{"Play":"Juego"}}}'>
+ <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>
 
@@ -110,12 +110,12 @@ Setting Default Language in a Video.js Player
 During a Video.js player instantiation you can force it to localize to a specific language by including the locale value into the configuration object via the `data-setup` attribute. Valid options listed at the bottom of the page for reference.
 
 ```html
-<video id="example_video_1" class="video-js vjs-default-skin"  
-  controls preload="auto" width="640" height="264"  
-  data-setup='{"language":"es"}'>  
- <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='{"language":"es"}'>
+ <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>
 
@@ -145,15 +145,15 @@ Localization in Plugins
 
 When you're developing a plugin, you can also introduce new localized strings. Simply wrap the string with the player's `localize` function:
 
-```javascript
+```js
 var details = '<div class="vjs-errors-details">' + player.localize('Technical details') + '</div>';
 ```
 
 Language Codes
 --------------
 The following is a list of official language codes.
 
-**NOTE:** For supported language translations, please see the [Languages Folder (/lang)](../../lang) folder located in the project root.
+**NOTE:** For supported language translations, please see the [Languages Folder (/lang)](https://github.com/videojs/video.js/tree/master/lang) folder located in the project root.
 
 <table border="0" cellspacing="5" cellpadding="5">
   <tr>

diff --git a/docs/guides/options.md b/docs/guides/options.md
@@ -119,7 +119,7 @@ Component Options
 You can set the options for any single player component. For instance, if you wanted to remove the `muteToggle` button, which
 is a child of `controlBar`, you can just set that component to false:
 
-```javascript
+```js
 var player = videojs('video-id', {
   controlBar: {
     muteToggle: false
@@ -134,5 +134,5 @@ notation.
 <video ... data-setup='{ "controlBar": { "muteToggle": false } }'></video>
 ```
 
-The [components guide](components.md) has an excellent breakdown of the structure of a player, you
-just need to remember to nest child components in a `children` object for each level.
+The [components guide](./components.md) has an excellent breakdown of the structure of a player, you
+just need to remember to nest child components in a `children` array for each level.
diff --git a/docs/guides/plugins.md b/docs/guides/plugins.md
@@ -11,37 +11,49 @@ 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:
 
+```js
     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.
+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:
 
+```js
     videojs.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:
 
+```js
     videojs('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:
 
+```js
     var video = videojs('cool-vid');
     video.examplePlugin({ exampleOption: true });
+```
 
 That's it. Head on over to the [Video.js wiki](https://github.com/videojs/video.js/wiki/Plugins) and add your plugin to the list so everyone else can check it out.
+
+## How should I use the Video.js icons in my plugin?
+
+If you'd like to use any of the icons available in the [Video.js icon set](http://videojs.github.io/font/), please target them via the CSS class names instead of codepoints. The codepoints *may* change between versions of the font, so using the class names ensures that your plugin will stay up to date with any font changes.
diff --git a/docs/guides/removing-players.md b/docs/guides/removing-players.md
@@ -6,11 +6,11 @@ Sometimes, you want to remove players after page load (in single page apps or mo
 Call `.dispose()`
 -----------------
 
-To remove the html associated with your videojs player from the page always call the player's [`dispose()`](https://github.com/videojs/video.js/blob/stable/docs/api/vjs.Player.md#dispose) method:
+To remove the html associated with your videojs player from the page always call the player's [`dispose()`](http://docs.videojs.com/docs/api/player.html#Methodsdispose) method:
 
-```javascript```
+```js
 var oldPlayer = document.getElementById('my-player');
-videojs(oldPlayer).dispose(); 
+videojs(oldPlayer).dispose();
 ```
 
 This method will:

diff --git a/docs/guides/setup.md b/docs/guides/setup.md
@@ -14,10 +14,12 @@ You can download the Video.js source and host it on your own servers, or use the
 
 ### CDN Version ###
 ```html
-<link href="//vjs.zencdn.net/4.12/video-js.min.css" rel="stylesheet">
-<script src="//vjs.zencdn.net/4.12/video.min.js"></script>
+<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
+<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
 ```
 
+Alternatively you can always [go here](http://videojs.com/getting-started/) to get the latest URL for videojs CDN.
+
 We include a stripped down Google Analytics pixel that tracks a random percentage (currently 1%) of players loaded from the CDN. This allows us to see (roughly) what browsers are in use in the wild, along with other useful metrics such as OS and device. If you'd like to disable analytics, you can simply include the following global **before** including Video.js:
 
 ```js
@@ -56,7 +58,7 @@ With Video.js you just use an HTML5 video tag to embed a video. Video.js will th
 
 > Note: The `data-setup` attribute described here should not be used if you use the alternative setup described in the next section.
 
-  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 (see [options](options.md)). There are other methods for initializing the player, but this is the easiest.
+  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 (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.
 
@@ -70,9 +72,9 @@ Otherwise include/exclude attributes, settings, sources, and tracks exactly as y
   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' />
+ <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 class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
 </video>
 ```