Added manual poster image to get around flash cross domain issues.

Starting controls hidden.
Making tech elements clickable.

design/video-js.css

@@ -13,8 +13,13 @@ REQUIRED STYLES (be careful overriding)
 */
 .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;
 }
 
 /* Playback technology elements expand to the width/height of the containing div. <video> or <object> */
@@ -33,7 +38,16 @@ body.vjs-full-window {
   width: 100% !important; height: 100% !important;
 }
 
-/* Subtiles Style */
+/* Poster Styles */
+.vjs-poster {
+  margin: 0 auto; padding: 0; cursor: pointer;
+
+  /* Scale with the size of the player div. Works when poster is vertically shorter, but stretches when it's less wide. */
+  position: relative; width: 100%; max-height: 100%; 
+}
+
+
+/* Subtiles Styles */
 .video-js .vjs-subtitles { color: #fff; font-size: 20px; text-align: center; position: absolute; bottom: 40px; left: 0; right: 0; }
 
 /* DEFAULT SKIN (override in another file to create new skins)
@@ -46,7 +60,8 @@ so you can upgrade to newer versions easier. You can remove all these styles by
   position: absolute;
   bottom: 0; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
   left: 0; right: 0; /* 100% width of div */
-  opacity: 0.85; display: block; /* Start hidden */
+  opacity: 0.85; 
+  display: none; /* Start hidden */
   margin: 0; padding: 0; /* Controls are absolutely position, so no padding necessary */
   height: 2.6em; /* Including any margin you want above or below control items */
   color: #fff; border-top: 1px solid #404040;

src/controls.js

@@ -28,6 +28,8 @@ _V_.Button = _V_.Control.extend({
       role: "button",
       tabIndex: 0
     }, attrs);
+    
+    _V_.log(attrs)
 
     return this._super(type, attrs);
   },
@@ -221,8 +223,10 @@ _V_.ControlBar = _V_.Component.extend({
   init: function(player, options){
     this._super(player, options);
 
-    player.addEvent("mouseover", _V_.proxy(this, this.show));
-    player.addEvent("mouseout", _V_.proxy(this, this.hide));
+    player.addEvent("play", this.proxy(this.show));
+
+    player.addEvent("mouseover", this.proxy(this.reveal));
+    player.addEvent("mouseout", this.proxy(this.conceal));
   },
 
   createElement: function(){
@@ -231,15 +235,13 @@ _V_.ControlBar = _V_.Component.extend({
     });
   },
 
-  show: function(){
-    // Used for transitions (fading out)
+  // Used for transitions (fading out)
+  reveal: function(){
     this.el.style.opacity = 1;
-    // bar.style.display = "block";
   },
 
-  hide: function(){
+  conceal: function(){
     this.el.style.opacity = 0;
-    // bar.style.display = "none";
   }
 });
 
@@ -709,6 +711,31 @@ _V_.MuteToggle = _V_.Button.extend({
 });
 
 
+/* Poster Image
+================================================================================ */
+_V_.Poster = _V_.Button.extend({
+  init: function(player, options){
+    this._super(player, options);
+
+    player.addEvent("play", _V_.proxy(this, this.hide));
+  },
+
+  createElement: function(){
+    return this._super("img", {
+      className: "vjs-poster",
+      src: this.player.options.poster,
+
+      // Don't want poster to be tabbable.
+      tabIndex: -1
+    });
+  },
+
+  onClick: function(){
+    this.player.play();
+  }
+});
+
+
 /* Text Track Displays
 ================================================================================ */
 // Create a behavior type for each text track type (subtitlesDisplay, captionsDisplay, etc.).

src/core.js

@@ -68,6 +68,7 @@ VideoJS.options = {
 
   // Included control sets
   components: [
+    "poster",
     "loadingSpinner",
     "bigPlayButton",
     { name: "controlBar", options: {

src/player.js

@@ -53,6 +53,9 @@ _V_.Player = _V_.Component.extend({
     // Store controls setting, and then remove immediately so native controls don't flash.
     tag.removeAttribute("controls");
 
+    // Poster will be handled by a manual <img>
+    tag.removeAttribute("poster");
+
     // Empty video tag sources and tracks so the built in player doesn't use them also.
     if (tag.hasChildNodes()) {
       for (var i=0,j=tag.childNodes;i<j.length;i++) {

src/tech.js

@@ -29,6 +29,7 @@ _V_.html5 = _V_.PlaybackTech.extend({
     this.player = player;
     this.el = this.createElement();
     this.ready(ready);
+    _V_.addEvent(this.el, "click", _V_.proxy(this, _V_.PlayToggle.prototype.onClick));
 
     var source = options.source;
 
@@ -91,7 +92,7 @@ _V_.html5 = _V_.PlaybackTech.extend({
     }
 
     // Update tag settings, in case they were overridden
-    _V_.each(["autoplay","preload","loop","muted","poster"], function(attr){
+    _V_.each(["autoplay","preload","loop","muted"], function(attr){ // ,"poster"
       el[attr] = player.options[attr];
     }, this);
 
@@ -270,9 +271,11 @@ _V_.flash = _V_.PlaybackTech.extend({
           'class': 'vjs-tech'
         }, options.attributes);
 
-    if (playerOptions.poster) {
-      flashVars.poster = playerOptions.poster;
-    }
+
+    // EDIT: Trying to just us a manual <img> for poster. 
+    // if (playerOptions.poster) {
+    //   flashVars.poster = playerOptions.poster;
+    // }
 
     // If source was supplied pass as a flash var.
     if (source) {
@@ -389,6 +392,9 @@ _V_.flash.onSWFReady = function(currSwf){
   // Update reference to playback technology element
   tech.el = el;
 
+  // Make a click on the swf play the video
+  _V_.addEvent(el, "click", _V_.proxy(player, _V_.PlayToggle.prototype.onClick));
+
   _V_.flash.checkReady(tech);
 };