HTML5 Videos in Mobile Safari Issue

Here is my scenario:

I am building a "kiosk" application in safari with 2 videos, one acting as a "screensaver" and the other is a supplementary video. The SS is looping fine via: (done on body onload="init()")

var myVideo = document.getElementById('screensaver');
myVideo.addEven开发者_运维技巧tListener('ended', playVideo, false);
function playVideo(){
  var myVideo = document.getElementById('screensaver');
  myVideo.play();
}

When the user taps the screen during the SS, it fades out $('#screensaver').fadeOut(1000); and the user is presented a question with a button to play the next video.

When the second video is done via:

$('#presentation').bind('ended', function(){
        $(this).fadeOut(1000, function(){
            $('#swapVideo').show(); //Overlay for user interaction
            $('#screensaver').fadeIn(1000);
            $('#screensaver').get(0).play();
        }); 
    });

The SS shows up, plays, but no longer loops. Are eventListeners lost when the display is set to none?

The same thing happens when I try to play the second video again. The 'ended' eventListener seems to be lost...

I believe that iOS ignores .play(). Apple believes it's best to prevent sites from automatically playing content, which could potentially eat up someone's data plan or create undesirable actions on iOS.

On iOS, .play() can only executed directly from a user interaction.

Documentation

As for your question, event listeners are not unbound if you change the display property.

Fiddle

$('.container').on('custom', function (evt) {
  $(this).toggle();  
});