2

我正在使用最新的 Flowplayer（5.0，它首先是 HTML5 ......耶！）在私人网站上播放教程视频（所以我不能提供一个活生生的例子）。我正在尝试使用内置的播放列表功能。格式很奇怪。

这是问题的屏幕截图。请注意，红色轮廓是工具计算的“flowplayer”区域。Windows 任务栏和 Firefox 浏览器是视频捕获本身。Flowplayer 控件是视频下方的小时间线带（靠近“flowplayer”区域的底部）。

flowplayer 坏 css

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 点，即使调整了视频区域的大小，播放列表的位置也会使其被视频区域遮挡。

这是我尝试过的：

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

  • 一旦我浮动元素或以其他方式更改布局方法，我必须绝对更新所有内容。我可以做到这一点，但令我惊讶的是，提供的 CSS 和提供的示例代码不会呈现。

  • 我一直在寻找与网站 CSS 的冲突；没有我能看到的。这种布局似乎严格是由 flowplayer 元素的嵌套方式引起的。

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

任何人都遇到过这个或有任何想法？最终结果应该是一个可动态调整大小的 flowplayer 区域，其下方有一个播放列表。

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

4

0 回答 0