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

我构建了一个简单的视频/音频播放器，它可以淡出一个启动图像，并在单击时播放/暂停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');
  }
});

简介
您的浏览器不支持视频标记。
$（'.challenge video'）。单击（函数（）{
如果（this.paused==true）{
$（'.video splash screen'）.fadeOut（'fast'）；
$（'.video play icon'）.fadeOut（'fast'）；
$（'.video pause icon'）.fadeOut（'fast'）；
这个。play（）；
}否则{
这个。暂停（）；
$（'.video pause icon'）.fadeIn（'fast'）；
}
});

我没有把CSS包括在这里，因为它不是直接相关的。只需知道，在Chrome上，加载时播放图标会显示在飞溅图像上。单击时，它们都会褪色，视频也会播放。再次单击时，将显示暂停按钮，视频将暂停

---

在所有其他浏览器上，单击时不会发生任何事情。谢谢你的帮助

您的飞溅图像和图标覆盖可能会阻止点击到达视频，因此

$（“.challenge video”）。click（）

永远不会触发

（我不知道它为什么在Chrome上工作。它可能不应该这样，就像你目前设置它的方式一样。）

---

将该事件挂在

上。改为质询视频容器

，它可能会正常工作。

您的飞溅图像和图标覆盖可能会阻止点击到达视频，因此，

$（'.challenge video'）。单击（）

永远不会触发

（我不知道它为什么在Chrome上工作。它可能不应该这样，就像你目前设置它的方式一样。）

---

将该事件挂在

上。改为挑战视频容器
，它可能会很好地工作。
谢谢，是的，我自己刚刚得出了这个结论，但无法让它工作。有没有想过我做错了什么？没有在控制台中发现错误
var vidContainer=document.getElementById（'challenge-video-container'）；vidContainer.click（function（）{var video=document.getElementById（'challenge-video'）；if（video.paused==true）{$（'video splash screen'）.fadeOut（'fast'）；$（'video play icon'）.fadeOut（'fast'）；$（'video pause icon'）.fadeOut（'fast'）；video.play（）；}否则{video.pause（）；$（'video pause icon'）.fadeIn.）（'fast'）；}}}）
Solved:我需要在这里使用jquery语法
var-vidContainer=$（“#挑战视频容器”）
谢谢，是的，我自己刚刚得出了这个结论，但无法实现。有没有想过我做错了什么？在控制台中找不到错误。
var-vidContainer=document.getElementById（'challenge-video-container'）；vidContainer.click（function（）{var video=document.getElementById（'challenge-video'）；if（video.pause==true）{$（'video-splash screen'）。fadeOut（'fast'）；$（'video-play-icon'）。fadeOut（'fast'）；video.play（）；}否则{video.pause（）$（'.video pause icon'）.fadeIn（'fast'）；}}）；
Solved:我需要在这里使用jquery语法
var-vidContainer=$（“#挑战视频容器”）；