I developed a basic video and audio player that smoothly fades out an introductory image and starts or stops playing an mp4 file upon click. Everything functions properly in Chrome, but unfortunately does not work in other major browsers. Despite checking the console for errors, I have not been able to pinpoint the issue. Any assistance or guidance on resolving this problem would be greatly appreciated. Thank you.
<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');
}
});
I have omitted the CSS information as it is not directly related to the issue at hand. Just to provide context, in Chrome, the play icon overlays the splash image upon loading. Upon clicking, both items fade out and the video begins playing. Clicking again displays the pause button and pauses the video.
In all other browsers, clicking doesn't trigger any action. Thank you for your assistance!