Firefox、Safari、またはIEでJavascript play（）メソッドが機能しない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()は発生しません。代わりに.challenge-video-container上

（それがChromeで働いて、なぜ私にはわからない。それはおそらく、あなたはそれが現在設定されている方法で、すべきでない。）

ハングそのイベント、そしてそれはおそらく正常に動作します。