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該事件相反，它很可能會工作得很好。