带有播放列表的Flowplayer 5.0 - CSS问题

Question

我正在使用最新的Flowplayer（5.0，这首先是HTML5，最重要的！是的！）在私人网站上播放教程视频（所以我无法提供生活样本）。我正在尝试使用内置播放列表功能。格式化都很糟糕。

以下是问题的截屏。请注意，红色轮廓是工具计算的“流动者”区域。 Windows任务栏和Firefox浏览器本身就是视频捕获。 Flowplayer控件是在视频下方（靠近“flowplayer”区域底部）稍微有点时间线剥离。

Flowplayer网站的建议代码如下：

<div class="flowplayer">

   <!-- initial clip -->
   <video>
      <source type="video/webm" src="night1/640x360.webm"/>
      <source type="video/mp4" src="night1/640x360.mp4"/>
      <source type="video/ogg" src="night1/640x360.ogv"/>
   </video>

   <!-- playlist root -->
   <div class="fp-playlist">

      <!-- playlist entries so. "trigger" elements -->
      <a href="night1.mp4"></a>
      <a href="night2.mp4"></a>
      <a href="night3.mp4"></a>
      <a href="night4.mp4"></a>
   </div>

</div>

我正在使用附带的皮肤......它们都不起作用，但是为了论证起见我说使用“functional.css”。

问题：

1. 控制元素大幅度地逃离“视频播放器”区域。换句话说，您可以在该区域底部看到的“时间轴栏”实际上是要紧贴视频区域。

我终于发现了问题：视频区域的高度被设置为“100％”;但是，这是基于整个.flowplayer区域。由于此区域包含播放列表，因此“100％”大于视频本身。

1. 相关，播放列表位于视频上方而非下方。这肯定与.flowplayer区域内用于定位控制的绝对定位有关。

2. 根据第2点，即使调整了视频区域的大小，播放列表的位置也会被视频区域遮挡。

这是我尝试过的：

• 如果我计算出所需的高度并明确将其设置为400px而不是100％，则控件会正确排列。但这是概念证明，因为它不是最理想的。我想使用某种比例（如100％！），以便它可以在响应式布局中呈现。

• 只要我浮动元素或以其他方式改变布局方法，我就必须彻底更新所有内容。我可以这样做，但令我惊讶的是，提供的CSS和提供的示例代码不会呈现。

• 我找到了与网站CSS的冲突;没有我能看到的。这种布局似乎是由流媒体元素嵌套的方式严格引起的。

• 我已将播放列表移到.flowplayer之外;但是，它必须在脚本中使用该容器（为什么不使用它？这样做非常有意义！）以便识别并将事件附加到播放列表。

---

每个人都碰到过这个或有任何想法吗？最终结果应该是可动态重新设置的流媒体区域，其下方有一个播放列表。

感谢您提供的任何见解，或者可能解决问题的第三方皮肤。 ; - ）