Javascript play() 方法在 Firefox、Safari 或 IE 11 中不起作用

Question

我构建了一个简单的视频/音频播放器，可以淡出启动图像并在单击时播放/暂停 mp4 文件。它在 Chrome 中运行得很好，但在其他流行的浏览器中则不然。我在控制台中没有发现任何错误。如果有人知道发生了什么事，我会喜欢一些指导。谢谢。

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

我没有在此处包含 CSS，因为它不直接相关。只需知道，在 Chrome 上，播放图标会在加载时显示在启动图像上。单击时，它们都会消失并播放视频。再次单击时，会出现暂停按钮并且视频暂停。

在所有其他浏览器上，单击时没有任何反应。感谢您的帮助!

Answer 1

您的启动图像和图标叠加可能会根本阻止点击到达视频，因此 $('.challenge-video').click() 永远不会触发。

(我不知道为什么它可以在 Chrome 上运行。按照您当前的设置方式，它可能不应该运行。)

将该事件卡在 .challenge-video-container 上，它可能会正常工作。