Question

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.

<div id="right-row-module" class="row expanded challenge-details">
  <div class="small-12 columns">
    <p class="challenge-video-title bold-text">Introduction</p>
    <div class="challenge-video-container" style="position:relative;">
      <img class="video-splash-screen" src="img/video-splash-screens/1000Strong.jpg" />
      <img class="video-play-icon" src="img/video-splash-screens/play.svg" />
      <img class="video-pause-icon" src="img/video-splash-screens/pause.svg" />
      <video class="challenge-video">
        <source src="video/1000Strong.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
    </div>
  </div>
</div>

$('.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');
  }
});

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.

On all other browsers, nothing happens on click. Thanks for your help!

Answer 1

Your splash image and icon overlays may be preventing clicks from reaching the video at all, so $('.challenge-video').click() never fires.

(I don't know why it's working on Chrome. It probably shouldn't, the way you have it set up currently.)

Hang that event on .challenge-video-container instead, and it'll likely work fine.

Javascript play() method not working in Firefox, Safari, or IE 11

1 个答案: