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

时间:2016-02-26 11:19:58

标签: javascript jquery html html5 video

我是一个html5视频播放器。并且有一个播放图标,但当用户进入全屏并按下播放按钮时,它不会隐藏。 我目前正在以正常模式隐藏它。

无论如何,我将逐步解释。

  1. 转到:http://html.banjaworks.com/GameFlank/game.html
  2. 播放视频前按全屏按钮。
  3. 全屏播放
  4. 退出全屏
  5. 你会看到图标仍然存在。

    现在,我想在全屏上处理播放按钮并隐藏图标。

    谢谢!

1 个答案:

答案 0 :(得分:1)

请尝试以下代码:

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