Hide the poster when play fires. closes #1834

CHANGELOG.md

@@ -15,6 +15,7 @@ CHANGELOG
 * @mmcc added a VERSION key to the videojs object ([view](https://github.com/videojs/video.js/pull/1798))
 * @mmcc fixed an issue with text track hiding introduced in #1681 ([view](https://github.com/videojs/video.js/pull/1804))
 * Export video.js as a named AMD module ([view](https://github.com/videojs/video.js/pull/1844))
+* Hide the poster when play fires ([view](https://github.com/videojs/video.js/pull/1834))
 
 --------------------
 

src/js/player.js

@@ -400,9 +400,6 @@ vjs.Player.prototype.onLoadStart = function() {
   } else {
     // reset the hasStarted state
     this.hasStarted(false);
-    this.one('play', function(){
-      this.hasStarted(true);
-    });
   }
 };
 
@@ -451,6 +448,10 @@ vjs.Player.prototype.onLoadedAllData;
 vjs.Player.prototype.onPlay = function(){
   this.removeClass('vjs-paused');
   this.addClass('vjs-playing');
+
+  // hide the poster when the user hits play
+  // https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-play
+  this.hasStarted(true);
 };
 
 /**

test/unit/mediafaker.js

@@ -41,6 +41,9 @@ vjs.MediaFaker.prototype.volume = function(){ return 0; };
 vjs.MediaFaker.prototype.muted = function(){ return false; };
 vjs.MediaFaker.prototype.pause = function(){ return false; };
 vjs.MediaFaker.prototype.paused = function(){ return true; };
+vjs.MediaFaker.prototype.play = function() {
+  this.player().trigger('play');
+};
 vjs.MediaFaker.prototype.supportsFullScreen = function(){ return false; };
 vjs.MediaFaker.prototype.buffered = function(){ return {}; };
 vjs.MediaFaker.prototype.duration = function(){ return {}; };

test/unit/player.js

@@ -212,6 +212,27 @@ test('should set and update the poster value', function(){
   player.dispose();
 });
 
+// hasStarted() is equivalent to the "show poster flag" in the
+// standard, for the purpose of displaying the poster image
+// https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-play
+test('should hide the poster when play is called', function() {
+  var player = PlayerTest.makePlayer({
+    poster: 'https://example.com/poster.jpg'
+  });
+
+  equal(player.hasStarted(), false, 'the show poster flag is true before play');
+  player.play();
+  equal(player.hasStarted(), true, 'the show poster flag is false after play');
+
+  player.trigger('loadstart');
+  equal(player.hasStarted(),
+        false,
+        'the resource selection algorithm sets the show poster flag to true');
+
+  player.play();
+  equal(player.hasStarted(), true, 'the show poster flag is false after play');
+});
+
 test('should load a media controller', function(){
   var player = PlayerTest.makePlayer({
     preload: 'none',