Close GH-784: New loading icons and class to center big play button.

docs/setup.md

@@ -60,6 +60,16 @@ Otherwise include/exclude attributes, settings, sources, and tracks exactly as y
 </video>
 ```
 
+By default, the big play button is located in the upper left hand corner so it doesn't cover up the interesting parts of the poster. If you'd prefer to center the big play button, you can add an additional `vjs-big-play-centered` class to your video element. For example:
+
+```html
+<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
+  controls preload="auto" width="640" height="264"
+  poster="http://video-js.zencoder.com/oceans-clip.png"
+  data-setup='{"example_option":true}'>
+  ...
+</video>
+```
 
 Alternative Setup for Dynamically Loaded HTML
 ---------------------------------------------

docs/skins.md

@@ -3,9 +3,15 @@ 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.
 
+## Icons
+
 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.
 
-The easiest way to try this out is by using the [player skin designer](http://designer.videojs.com/).
+All of the icons are available as variables in the [LESS](https://github.com/videojs/video.js/blob/master/src/css/video-js.less#L87-L99) source, making it easy to replace icons (such as the loading spinner). The easiest way to try this out is by using the [player skin designer](http://designer.videojs.com/).
+
+![available icons](https://i.cloudup.com/wb51GGDDnJ.png)
+
+## Customization
 
 When you create a new skin, you can either override styles in the default skin:
 
@@ -20,4 +26,3 @@ Or remove the 'vjs-default-skin' class from the video tag and create a new skin
 ```
 
 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).
-

src/css/video-js.less

@@ -95,8 +95,12 @@ The control icons are from a custom font. Each icon corresponds to a character
 @fullscreen-exit-icon: "\e00b";
 @square-icon: "\e009";
 @spinner-icon: "\e00a";
+@spinner2-icon: "\e00d";
+@spinner3-icon: "\e01e";
+@spinner4-icon: "\e01f";
 @subtitles-icon: "\e00c";
 @captions-icon: "\e008";
+@share-icon: "\e00e";
 
 /* Base UI Component Classes
 --------------------------------------------------------------------------------
@@ -460,6 +464,15 @@ easily in the skin designer. http://designer.videojs.com/
   .transition(all 0.4s);
 }
 
+/* Optionally center */
+.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
+  @total-width: @big-play-width + (@big-play-border-width * 2);
+  @total-height: @big-play-height + (@big-play-border-width * 2);
+
+  .absolute-align(center, @big-play-margin, @total-width);
+  .absolute-align(middle, @big-play-margin, @total-height);
+}
+
 /* Hide if controls are disabled */
 .vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
   display: none;
@@ -510,7 +523,7 @@ easily in the skin designer. http://designer.videojs.com/
   top: 50%;
   left: 50%;
 
-  font-size: 5em;
+  font-size: 4em;
   line-height: 1;
 
   width: 1em;
@@ -525,7 +538,7 @@ easily in the skin designer. http://designer.videojs.com/
 }
 
 .vjs-default-skin .vjs-loading-spinner:before {
-  content: @spinner-icon;
+  content: @spinner2-icon;
   font-family: VideoJS;
 
   position: absolute;