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

【问题标题】：JW Player fullscreen - controls not working on mouse clickJW Player 全屏 - 控件在鼠标单击时不起作用
【发布时间】：2021-07-01 02:25:49
【问题描述】：

我制作的视频在后台播放，没有声音或控件。这是它的 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); 才能让控件以全屏模式显示。不知道这是否与它有关？

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

【问题讨论】：

标签： javascript html video jwplayer

【解决方案1】：

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

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

【讨论】：