我建立了一个简单的视频/音频播放器，可以淡出启动画面并在单击时播放/暂停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上，播放图标会在加载时显示在初始图像上。单击它们时，它们都会消失，并播放视频。再次单击时，出现暂停按钮，视频暂停。
在所有其他浏览器上，单击均无反应。谢谢你的帮助！
最佳答案
您的启动画面和图标叠加可能完全阻止点击到达视频，因此$('.challenge-video').click()永远不会触发。
（我不知道为什么它可以在Chrome上运行。您当前的设置方式可能不应该。）
将该事件挂在.challenge-video-container上，它可能会正常工作。