I have some HTML5 videos on my page.
I use fullPage.js and would like to start another video playback depending on which slide you are on.
My code hides the old video and shows the new one in the container with a fixed position each time I scroll the slide. It basically looks something like this:
$('#fullpage').fullpage({
onLeave: function(index, nextIndex, direction){
$('#video1').hide();
$('#video2').show();
$('#video2')[0].play();
}
});
This works fine in every browser except Safari, which causes the following error, I think, due to Safari's built-in protection against auto-playing ads.
Refusing an unsecured promise: NotAllowedError (DOM 35 exception): The request was not resolved by the user agent or platform in the current context, possibly because the user refused permission.
JS, , .play() , . , . - , () onLeave?