Question

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

我的页脚中包含以下JavaScript：

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

        api.fullscreen();

    });
});

但是，唉，玩家不会切换到全屏模式。我知道全屏有一个限制，它只能在用户执行操作时调用，但不是'resume'事件是用户创建的操作吗？

我已经通过使用静音功能测试其行为来确认代码是合理的，该功能按预期工作。

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视频在浏览器中开始播放的方式）。然后，用户可以选择使视频“真实”全屏。这很好用，但我注意到当用户退出“真正的”全屏时，FP没有恢复到窗口全屏，这就是我在全屏退出事件中重新添加'is-fullscreen'类的原因。

希望将来有所帮助！

Answer 2

由于您声明的原因，resume等事件无法实现。在fullscreen方法的flowplayer api docs下，它声明：

许多浏览器允许此方法仅从用户交互触发的事件中工作，例如“点击”，而不是例如来自用户未确定的时刻发生的“就绪”等玩家事件。

resume是一项玩家活动，因此无效。

或许允许用户选择是否全屏显示是更好的选择。

Flowplayer HTML5全屏播放

2 个答案: