Question

我想要使用Flowplayer流式传输.mp4视频。它工作得很好，但是当我把它放在iframe中时，全屏按钮就丢失了。

有人在这里回答了这个问题：How can I enable fullscreen in Flowplayer 5.2 that's in an iframe?

但我无法弄清楚flowplayer.conf.fullscreen = true;

的位置

到目前为止，这是我的index.html代码：

<head>
</style>

   <!-- player skin -->
   <link rel="stylesheet" type="text/css" href="skin/minimalist.css" />

   <!-- site specific styling -->
   <style>
     body { text-align: center; padding-top: 5%; }
     .flowplayer { width: 80%; background-color: green;}
   </style>

   <!-- flowplayer depends on jQuery 1.7.1+ (for now) -->
   <!-- leave out http/https from the src to fix issue with controls not loading in Chrome -->
   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

   <!-- include flowplayer -->
   <script type="text/javascript" src="flowplayer.min.js"></script>

</head>
<body>

   <!-- the player -->
   <div class="flowplayer" data-swf="flowplayer.swf" >
      <video>
        <source type="video/mp4" src="myvid.mp4"/>
      </video>
   </div>
</body>

Answer 1

这些应该在Flowplayer包含在您的页面中后立即设置（使用脚本src）。

<script type="text/javascript" src="flowplayer/5.3.2/flowplayer.min.js"></script>

<script type="text/javascript">
flowplayer.conf.embed = false;
flowplayer.conf.fullscreen = true;
</script>

此链接http://flowplayer.org/docs/#global-configuration详细说明了

Answer 2

尝试使用$(".player").flowplayer({ swf: "/path/to/flowplayer.swf" });

手动初始化流程图

iframe中缺少Flowplayer 5.3.2全屏按钮

2 个答案: