I have several HTML5 videos on my page.
I am using fullPage.js and would like to trigger a different video playback depending on what slide you're on.
My code hides the old video and shows the new one in a fixed position container every time you scroll a slide. It looks basically something like this:
$('#fullpage').fullpage({
onLeave: function(index, nextIndex, direction){
$('#video1').hide();
$('#video2').show();
$('#video2')[0].play();
}
});
This works great in every browser except Safari, which throws the following error, I think because of Safari's inbuilt protection against auto-playing ads.
Unhandled Promise Rejection: NotAllowedError (DOM Exception 35): The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
I am not fantastic at JS, but reading around it sounds like .play() has to be triggered on a click for it to be allowed. However, that won't work with what I'm trying to achieve. does anyone know how I can achieve a the play() based on the onLeave event?
