Video Player: Don't show the loop message in unexpected timing

BUG=418275
TEST=manually tested

Review URL: https://codereview.chromium.org/611953002

Cr-Commit-Position: refs/heads/master@{#297151}

ui/file_manager/video_player/css/media_controls.css

@@ -572,6 +572,7 @@
   background-color: black;
   border-radius: 10px;
   color: white;
+  display: none;
   font-size: 18px;
   left: 50%;
   margin-left: -250px;
@@ -588,6 +589,7 @@
 
 .text-banner[visible] {
   -webkit-animation: text-banner-blowup 3000ms;
+  display: block;
 }
 
 .playback-state-icon[state] {

ui/file_manager/video_player/js/media_controls.js

@@ -1048,7 +1048,15 @@ VideoControls.prototype.showIconFeedback_ = function() {
 VideoControls.prototype.showTextBanner_ = function(identifier) {
   this.textBanner_.removeAttribute('visible');
   this.textBanner_.textContent = this.stringFunction_(identifier);
+
   setTimeout(function() {
+    var onAnimationEnd = function(event) {
+      this.textBanner_.removeEventListener(
+          'webkitAnimationEnd', onAnimationEnd);
+      this.textBanner_.removeAttribute('visible');
+    }.bind(this);
+    this.textBanner_.addEventListener('webkitAnimationEnd', onAnimationEnd);
+
     this.textBanner_.setAttribute('visible', 'true');
   }.bind(this), 0);
 };