私は最新の Flowplayer (5.0、何よりもまず HTML5 です... イェイ!) を使用して、プライベート サイトでチュートリアル ビデオを再生しています (そのため、生きたサンプルを提供することはできません)。組み込みのプレイリスト機能を使用しようとしています。フォーマットはすべて不安定です。
問題のスクリーン キャプチャを次に示します。赤いアウトラインは、ツールによって計算された "flowplayer" 領域であることに注意してください。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」を使用しているとしましょう。
問題点：
- コントロール要素は、「ビデオ プレーヤー」ゾーンから大幅に逸脱しています。つまり、エリアの下部に表示される「タイムライン バー」は、実際にはビデオ エリアにぴったりとくっつくことを意味します。
最終的に問題を特定しました。ビデオ領域の高さが「100%」に設定されています。ただし、これはエリア全体に基づいています.flowplayer。この領域にはプレイリストが含まれるため、「100%」はビデオ自体よりも大きくなります。
関連して、プレイリストはビデオの下ではなく上にあります。これは確かに、
.flowplayerコントロールを配置するために領域内で使用される絶対配置に関係しています。ポイント 2 に従って、ビデオ領域のサイズが変更された場合でも、プレイリストはビデオ領域によって隠されるように配置されます。
これが私が試したことです：
目的の高さを計算し、たとえば 100% ではなく 400px に明示的に設定すると、コントロールが適切に整列します。ただし、これは最適ではないため、概念実証です。レスポンシブ レイアウトでレンダリングできるように、何らかの比率 (100% など) を使用したいと考えています。
要素をフロートするか、レイアウトへのアプローチを変更するとすぐに、すべてを完全に更新する必要があります。これはできますが、提供された CSS と提供されたサンプル コードがレンダリングされないことに驚きました。
サイトの CSS との競合を探しました。私が見ることができるものはありません。このレイアウトは、厳密には flowplayer 要素のネスト方法が原因のようです。
プレイリストを の外に移動しました
.flowplayer。ただし、イベントを識別してプレイリストにアタッチするには、スクリプトでそのコンテナーを使用する必要があります (そうしない理由はありません!)。
誰もがこれに出くわしたり、何かアイデアを持っていますか? 最終結果は、動的にサイズ変更可能なフロープレーヤー領域であり、その下にプレイリストがあります。
あなたが持っているかもしれない洞察、または問題を解決するかもしれないサードパーティのスキンに感謝します. ;-)