is it possible to handle play button on fullscreen html5 video player?

Question

I've a html5 video player. And there is a play icon on it but when the user went to fullscreen and press play button its not hiding. I'm currently hiding it in normal mode.

Anyway, i'll explain step by step.

1. Go to: http://html.banjaworks.com/GameFlank/game.html
2. Press fullscreen button before playing video.
3. Play it while its fullscreen
4. Exit fullscreen

and you'll see the icon is still there.

Now, i'd like to handle that play button on fullscreen and hide the icon.

Thank you!

Answer 1

Please try the follow code:

if (document.addEventListener)
{
    document.addEventListener('webkitfullscreenchange', videoexitHandler, false);
    document.addEventListener('mozfullscreenchange', videoexitHandler, false);
    document.addEventListener('fullscreenchange', videoexitHandler, false);
    document.addEventListener('MSFullscreenChange', videoexitHandler, false);
}

function videoexitHandler()
{
    if ((document.webkitIsFullScreen == false) || (document.mozFullScreen == false) || (document.msFullscreenElement == false))
    {
       var wrap =  $('video').parents('.video:first');  
   toggleVideoPlay(wrap);
    }
}