Flowplayer HTML5全屏播放

艾略特·鲍尔斯(Elliott Bowles)

我已经在WordPress的安装程序上启动并运行了Flowplayer,并试图将用户单击播放按钮后将播放器的行为更改为进入全屏模式。

我的页脚中包含以下JavaScript:

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

        api.fullscreen();

    });
});

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

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

艾略特·鲍尔斯(Elliott Bowles)

我能够实现一个解决方案,我认为我可以与他人分享,以备将来人们寻找。

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视频在浏览器中开始播放的方式)。然后,用户可以选择将视频设为“真”全屏显示。这很好用,但是我注意到当用户退出“ true”全屏时,FP并没有恢复到窗口全屏,这就是为什么我在全屏退出事件上重新添加“ is-fullscreen”类的原因。

希望这对将来有所帮助!

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

带有hls的flowplayer HTML5预滚动

来自分类Dev

Flowplayer:从指定时间开始播放视频

来自分类Dev

如何使用UIWebView使html5播放器在Ipad上全屏播放

来自分类Dev

使用HTML5和javascript在全屏播放器而非背景全屏模式下自动播放视频

来自分类Dev

如何禁用全屏播放与iPhone中的html5视频标签?

来自分类Dev

UIWebView全屏播放HTML5视频,不再能触摸

来自分类Dev

视口中的视频时自动播放flowplayer视频

来自分类Dev

如何让Flowplayer在Android WebView中自动播放?

来自分类Dev

使用Flowplayer以两种不同的视图播放多个视频

来自分类Dev

视口中的视频时自动播放flowplayer视频

来自分类Dev

如何使用flowplayer在子文件夹中播放视频文件?

来自分类Dev

Flowplayer播放列表插件标题中带有特殊字符的问题

来自分类Dev

Avi无法全屏播放

来自分类Dev

全屏播放Youtube iframe

来自分类Dev

HTML5视频播放器全屏问题

来自分类Dev

Flash中的Flowplayer错误长宽比

来自分类Dev

Flowplayer,URL未定义

来自分类Dev

全屏播放的smplayer中出现毛刺

来自分类Dev

如何全屏播放YouTubePlayList意图视频

来自分类Dev

Flowplayer背景图片未出现

来自分类Dev

在flowplayer提示点上暂停视频

来自分类Dev

强制在iPad和Android平板电脑上播放全屏HTML5视频?

来自分类Dev

在UIWebview中开始播放时直接全屏显示html5视频

来自分类Dev

在YouTube上点击禁用HTML5 <视频>的播放/暂停/全屏显示

来自分类Dev

IE11上的全屏HTML5播放器不起作用

来自分类Dev

强迫锚点链接的视频在iPad上全屏播放

来自分类Dev

在肖像项目的横向模式下全屏播放MPMoviePlayerController

来自分类Dev

如何全屏播放《太阳竞赛》 12.04 Unity

来自分类Dev

如何全屏播放《太阳竞赛》 12.04 Unity

Related 相关文章

  1. 1

    带有hls的flowplayer HTML5预滚动

  2. 2

    Flowplayer:从指定时间开始播放视频

  3. 3

    如何使用UIWebView使html5播放器在Ipad上全屏播放

  4. 4

    使用HTML5和javascript在全屏播放器而非背景全屏模式下自动播放视频

  5. 5

    如何禁用全屏播放与iPhone中的html5视频标签?

  6. 6

    UIWebView全屏播放HTML5视频,不再能触摸

  7. 7

    视口中的视频时自动播放flowplayer视频

  8. 8

    如何让Flowplayer在Android WebView中自动播放?

  9. 9

    使用Flowplayer以两种不同的视图播放多个视频

  10. 10

    视口中的视频时自动播放flowplayer视频

  11. 11

    如何使用flowplayer在子文件夹中播放视频文件?

  12. 12

    Flowplayer播放列表插件标题中带有特殊字符的问题

  13. 13

    Avi无法全屏播放

  14. 14

    全屏播放Youtube iframe

  15. 15

    HTML5视频播放器全屏问题

  16. 16

    Flash中的Flowplayer错误长宽比

  17. 17

    Flowplayer,URL未定义

  18. 18

    全屏播放的smplayer中出现毛刺

  19. 19

    如何全屏播放YouTubePlayList意图视频

  20. 20

    Flowplayer背景图片未出现

  21. 21

    在flowplayer提示点上暂停视频

  22. 22

    强制在iPad和Android平板电脑上播放全屏HTML5视频?

  23. 23

    在UIWebview中开始播放时直接全屏显示html5视频

  24. 24

    在YouTube上点击禁用HTML5 <视频>的播放/暂停/全屏显示

  25. 25

    IE11上的全屏HTML5播放器不起作用

  26. 26

    强迫锚点链接的视频在iPad上全屏播放

  27. 27

    在肖像项目的横向模式下全屏播放MPMoviePlayerController

  28. 28

    如何全屏播放《太阳竞赛》 12.04 Unity

  29. 29

    如何全屏播放《太阳竞赛》 12.04 Unity

热门标签

归档