javascript - Flowplayer HTML5 全屏播放

标签 javascript jquery html wordpress flowplayer

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

我的页脚中有以下 JavaScript:

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

        api.fullscreen();

    });
});

但是,遗憾的是,播放器不会切换到全屏模式。我知道全屏有一个限制,它只能在用户执行操作时调用,但“恢复”事件不是用户创建的操作吗?

我已通过使用静音功能测试其行为来确认代码是正确的,它按预期工作。

最佳答案

我能够实现一个解决方案,我认为我会分享以防人们在未来寻找。

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”类。

希望这对 future 有所帮助!

关于javascript - Flowplayer HTML5 全屏播放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20640301/

相关文章:

javascript - 是否可以在运行时设置页面语言以实现可访问性和 WCAG 2 3.1.1 合规性?

javascript - 手动引导/初始化时访问 Angular 服务

javascript - 将值保存到 Chrome 扩展中的文本框

jquery - Bootstrap缩略图+每行高度相同的标题?

javascript - FIrebug 中不包含文件且为空的脚本元素

javascript - 如何居中对齐 Asp.net 网站中的实际文本框

javascript - 如何使用 Google Cloud Function 查询现有的子对象并循环对象以检测它是否存在于 Firebase 中?

javascript - Uncaught ReferenceError : $ is not defined when loading bootstrap date time picker in mvc

angularjs - 如何在 AngularJS 中加载 http 请求之前禁用按钮?

html - 无法获取 2 张图像以展开以填充父 div