title: How do I make the video controls show up in firefox?
body: <p>When I hover my video control bar in Chrome, Safari it shows up. But when I hover that in firefox, it's not showing. I don't know if my js code doesn't support firefox. But when I inspect it in firefox, the controls keep appearing and disappearing. Below is my code. Can anyone help me with this? Thank you.</p>
  
  <p>HTML</p>
  
  <pre><code>        &lt;video poster="http://dummyimage.com/320x205/852285/fff" preload="auto"&gt;
  
             &lt;source type="video/mp4" src="http://www.w3schools.com/html/movie.mp4" /&gt;
          &lt;/video&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>        &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'&gt;&lt;/script&gt;
          &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.13.1/js/mediaelement.js'&gt;&lt;/script&gt;
  
  // Video Player
      function videoPlayer() {
          // Exit full screen when video is done playing
          var video = document.getElementsByTagName("video")[0];
          video.addEventListener("ended", function(e) { 
              video.webkitExitFullScreen()
          });
  
      var player = $('.video-player'),
      controls = player.find('.vid-play-btn-wrap'),
      wrapper = player.find('video'),
      video = player.find('video').get(0),
  
      isPlaying = false,
      settings = {},
      media = new MediaElement(video, settings),
      $media = $(media);
  
      $media.on('play', _playHandler);
      $media.on('pause', _pauseHandler);
      $media.on('ended', _endedHandler);
  
      player.click(_togglePlayPause);
      player.hover(_mouseOverHandler, _mouseOutHandler);
  
      function _togglePlayPause() {
          isPlaying ? media.pause() : media.play();
      }
  
      function _mouseOverHandler() {
          if(!isPlaying) { return; }
          // controls.fadeIn('fast');
      }
  
      function _mouseOutHandler() {
          if(!isPlaying) { return; }
          // controls.fadeOut('fast');
      }
  
      function _endedHandler() {
          isPlaying = false;
          video.load();
          controls.show();
      }
  
      function _playHandler() {
          isPlaying = true;
          controls.hide();
      }
  
      function _pauseHandler() {
          isPlaying = false;
      }
  
      $('video').hover(function toggleControls() {
          if (this.hasAttribute("controls")) {
              this.removeAttribute("controls")
          } else {
              this.setAttribute("controls", "controls")
          }
      });
  }
  </code></pre>