播放时的全屏模式问题：Flowplayer HTML5

Question

我已经在WordPress上安装了Flowplayer，并尝试更改播放器的行为，使用户在点击播放按钮后进入全屏模式。

我在页脚中有以下JavaScript代码：

flowplayer(function (api, root) {
    api.bind("resume", function(e, api, video) {

        api.fullscreen();

    });
});

但是，不幸的是，播放器无法切换到全屏模式。我知道全屏有一个限制，只能在用户执行操作时调用，但“恢复”事件不是用户创建的动作吗？

通过测试静音功能的行为，我确认代码是正确的，其效果符合预期。

- Elliott Bowles

Answer 1

我能够解决这个问题，并且我想分享我的解决方案，以便日后查阅。

flowplayer(function (api, root) {

  api.bind("load", function () {
     jQuery('div.flowplayer').addClass("is-fullscreen");

  }).bind("fullscreen-exit", function(e, api) {
     jQuery('div.flowplayer').addClass("is-fullscreen");

 });; 
});

基本上我会在窗口全屏模式下启动播放器 (类似于 Netflix 视频在浏览器中开始播放)。然后用户可以选择将视频设置为真正的全屏。这个方法非常好，但是当用户退出真正的全屏模式时，Flash Player 没有恢复到窗口全屏模式，这就是为什么我在退出全屏模式时重新添加 'is-fullscreen' 类的原因。

希望这对你以后有所帮助！

- Elliott Bowles

---

这非常方便。不幸的是，它似乎隐藏了海报图像。有人可以确认或提供解决方法吗？ - Fabian Henze

Answer 2

无法通过像resume这样的事件实现你所说的功能。在flowplayer api docs中，fullscreen方法说明如下：

许多浏览器仅允许此方法从由用户交互触发的事件（如“click”）中工作，而不是例如播放器事件（如“ready”），这些事件发生在用户无法确定的时刻。 resume是播放器事件，因此无效。

也许允许用户选择是否全屏是更好的选择。

- Colin Bacon

---

谢谢回复！我没有意识到“resume”是一个玩家事件，但我想这很有道理。 - Elliott Bowles

这只是一个猜测，但你不能创建一个自定义的播放/暂停按钮（例如锚标签），并监听其onclick事件，然后触发恢复和全屏两个操作吗？这样，您将在用户同意的操作上触发全屏，应该可以正常工作。 - Nikola Ivanov Nikolov