JW Player 全屏 - 鼠标单击时控件不起作用

如何解决JW Player 全屏 - 鼠标单击时控件不起作用

我制作的视频在没有声音或控件的情况下在后台播放。这是它的 jwplayer 代码。它嵌入在 PHP 中。

<div id="video"></div>
<script>
document.addEventListener("DOMContentLoaded",function(event) {
   jwplayer("video").setup({
      "playlist": "https://cdn.jwplayer.com/v2/media/<?PHP echo $url; ?>","height": 560,"width": "100%","autostart": "true","mute": "true","controls": "false","repeat": "true","stretching": "fill","logo": {
         "file": "fullicon.svg","hide": "true",},});
});
</script>

如您所见，我在视频中添加了徽标。徽标是一个可点击的链接，可以使视频全屏显示。我在 jwplayer 网站上的此页面之后对全屏进行了建模，并根据我的需要对其进行了调整。 https://www.jwplayer.com/blog/using-the-browsers-new-html5-fullscreen-capabilities/

这是使视频全屏的代码：

window.addEventListener('load',function () {
    var $logo = $('div.jw-logo');
    if ($logo.length) {
        $logo.click(function(e) {
           var element = document.getElementById('video');
           if (element.mozRequestFullScreen) {
              element.mozRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
              jwplayer("video").setControls(true);
           } else if (element.webkitRequestFullScreen) {
              element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
              jwplayer("video").setControls(true);
           }
        });
    }
});

似乎一切正常 - 视频全屏显示，正在播放声音，显示控件。唯一错误的是当我点击视频的任何控件时，什么也没发生。控件不起作用。我可以通过视频播放器上的控件使用键盘和选项卡，仅此而已。

现在我必须使用 jwplayer("video").setControls(true); 来让控件以全屏模式显示。想知道这是否与此有关？

关于如何让鼠标在控件上工作的任何想法？

解决方法

想通了！这可能会在将来对某人有所帮助。必须使用文档而不是元素才能使其全屏显示。

window.addEventListener('load',function () {
     var $logo = $('div.jw-logo');
     if ($logo.length) {
          $logo.click(function(e) {
               // Open full screen
               if (document.documentElement.requestFullscreen) {
                    document.documentElement.requestFullscreen();
               } else if (document.documentElement.msRequestFullscreen) {
                    document.documentElement.msRequestFullscreen();
               } else if (document.documentElement.mozRequestFullScreen) {
                    document.documentElement.mozRequestFullScreen();
               } else if (document.documentElement.webkitRequestFullscreen) {
                    document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
               }
          });
      }
});