title: Javascript play() method not working in Firefox, Safari, or IE 11
body: <p>I built a simple video/audio player that fadesout a splash image and plays/pauses an mp4 file on click. It works great in Chrome, but none of the other popular browsers. I'm not finding any errors in the console. Would love some guidance if anyone knows what's going on. Thanks.</p>
  
  <pre><code>&lt;div id="right-row-module" class="row expanded challenge-details"&gt;
    &lt;div class="small-12 columns"&gt;
      &lt;p class="challenge-video-title bold-text"&gt;Introduction&lt;/p&gt;
      &lt;div class="challenge-video-container" style="position:relative;"&gt;
        &lt;img class="video-splash-screen" src="img/video-splash-screens/1000Strong.jpg" /&gt;
        &lt;img class="video-play-icon" src="img/video-splash-screens/play.svg" /&gt;
        &lt;img class="video-pause-icon" src="img/video-splash-screens/pause.svg" /&gt;
        &lt;video class="challenge-video"&gt;
          &lt;source src="video/1000Strong.mp4" type="video/mp4"&gt;
          Your browser does not support the video tag.
        &lt;/video&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  $('.challenge-video').click(function() {
    if (this.paused == true) {
        $('.video-splash-screen').fadeOut('fast');
        $('.video-play-icon').fadeOut('fast');
        $('.video-pause-icon').fadeOut('fast');
        this.play();
    } else {
      this.pause();
      $('.video-pause-icon').fadeIn('fast');
    }
  });
  </code></pre>
  
  <p>I haven't included the CSS here because it's not directly relevant. Just know that, on Chrome, the play icon displays over the splash image on load. When clicked, they both fade and the video plays. On click again, the pause button appears and the video pauses.</p>
  
  <p>On all other browsers, nothing happens on click. Thanks for your help!</p>