是否可以处理全屏html5视频播放器上的播放按钮？

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);
    }
}