VIDEO.JS 5のフルードモードとプレイリストピッカー

流体モードの仕組み

video.js 5.0では、video.jsで真に流動的なレイアウトをサポートしました。これは、イントリンシック・レシオを使用することで実現され、video.jsが力仕事をしてくれます。

フルードモードの使い方

video.jsでプレーヤーを流動的にするには、次のいずれかを設定します。 fluid オプションがある：

let player = videojs('preview-player', {
  fluid: true
})

あるいは、選手に流体クラスのいずれかを追加することもできる： .vjs-fluid, .vjs-4-3, .vjs-16-9:

<video id="preview-player" class="video-js vjs-fluid" controls data-setup={}>

.vjs-4-3 ビデオのアスペクト比は4:3を維持し .vjs-16-9 は16:9を維持する。 .vjs-fluid はもう少し特殊だ。ビデオのメタデータがロードされるのを待ち、ビデオの幅と高さを使用して、ビデオに使用する正しいアスペクト比を計算します。

プレイリスト・ピッカー

プレーヤーを単体で表示する場合、これは非常に効果的です。video.js Web サイトの高度なサンプル ページで行ったように、プレイリストを video 要素にアタッチして同じ高さに保つ場合はどうでしょうか。

プレイリスト ピッカーやコンテナ要素の幅に応じて、パディングの上部の量を計算することもできますが、その場合、動画が変わるたびにプレイリスト ピッカーの高さを再計算する必要があります。その代わりに、video.js にすべての作業を任せることができます。

プレイリスト・ピッカーの取り付け

この例では videojs-playlist-ui ＆ ビデオjsプレイリスト プラグインを使用します。次に、プレーヤーをコンテナでラップして playlist-ui 要素も含まれている。

<section class="main-preview-player">
  <video id="preview-player" class="video-js vjs-fluid" controls preload="auto" crossorigin="anonymous">
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
  </video>
  <ol class="vjs-playlist"></ol>
</section>

あとは、CSSを使えば、比較的すぐに整列させることができます：

.video-js {
  width: 70%;
  float: left;
}
.vjs-playlist {
  width: 30%;
  float: right;
}

プレイリスト・ピッカーを流動的にする方法

Video.jsはアスペクト比を計算し、ページにスタイルシートを追加する：

.preview-player-dimensions.vjs-fluid {
  padding-top: 41.66666666666667%;
}

このパーセンテージは、オーシャンズクリップのアスペクト比と同じ2.4になる。

そこで、プレイリスト・ピッカーが同じ高さになるように、player dimensionsクラスを追加すればよい：

<ol class="vjs-playlist preview-player-dimensions vjs-fluid"></ol>

並べ方

この2つを正しく並べる最も簡単な方法の1つは、フレックスボックスを使うことです。これにより、プレーヤーとプレイリストピッカーが必要なだけのスペースを埋めるように成長します。また、ページの幅が小さすぎる場合、プレイリストピッカーはプレーヤーの下に折りたたまれます。

フレックスボックスは多くのプラットフォームで利用できる。しかし、一部のブラウザはフレックスボックスの仕様が進化する中で実装していた。このcssをautoprefixerのようなものに通すのがベストでしょう。autoprefixerを使っても、フレックスボックスをサポートしていないブラウザでは動作しませんが、プラットフォームのサポートは大幅に向上します。

まず、次のように設定する。 display に flex を作成し、ラッピングとサイズ調整のためのプロパティを追加する：

.main-preview-player {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

flex-wrap コンテナの幅が小さすぎる場合、プレイリストピッカーが次の行に折り返すようにします。

次に、プレーヤーとプレイリストピッカーをコンテナに対して相対的に配置し、デフォルトサイズと最小サイズを設定します：

.video-js,
.vjs-playlist {
  position: relative;
  min-width: 300px;
  min-height: 150px;
  height: 0;
}

最後に、フレックス設定をプレーヤーとプレイリスト・ピッカーに適用したい：

.video-js {
  flex: 3 1 70%;
}
.vjs-playlist {
  flex: 1 1 30%;
}

これは、プレイリストのピッカーがプレイリストの幅の70%にデフォルト設定されている場合、プレイリストのピッカーはプレイリストの幅の30%にデフォルト設定されています。プレイリストピッカー自体のデフォルトは幅の30%で、必要に応じて拡大・縮小できるようになっています。
さて、これをブラウザで読み込むと問題が発生します。プレイリストの高さが適切ではありません。

これは、playlist-uiプラグインが要素に独自のパディングを設定するためです。 preview-player-dimensions padding-top.この問題は padding-top 私たちが望むように。しかし、これで高さの問題は解決したものの、アイテムはどこにあるのか？スクロールしないと手に入らない。

このようなことが起こるのは padding-top プレイリストのピッカーの中に、すべてのエレメントが押し込まれ、スクロールが必要になった。

ソリューション

最終的に必要なのは、プレイリスト要素をフレックスするコンテナで包むことである。 padding-top はプレイリストの項目を押し下げない。

<div class="playlist-container  preview-player-dimensions vjs-fluid">
  <ol class="vjs-playlist"></ol>
</div>

を変更する。 vjs-playlist への言及 playlist-container で、プレイリストピッカーをそのコンテナ内に絶対的に配置する：

.playlist-container {
  position: relative;
  min-width: 300px;
  min-height: 150px;
  height: 0;
}
.playlist-container {
  flex: 1 1 30%;
}
.vjs-playlist {
  margin: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

HTML

<section class="main-preview-player">
  <video id="preview-player" class="video-js vjs-fluid" controls preload="auto" crossorigin="anonymous">
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
  </video>
  <div class="playlist-container  preview-player-dimensions vjs-fluid">
    <ol class="vjs-playlist"></ol>
  </div>
</section>

CSS

.main-preview-player {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.video-js,
.playlist-container {
  position: relative;
  min-width: 300px;
  min-height: 150px;
  height: 0;
}
.video-js {
  flex: 3 1 70%;
}
.playlist-container {
  flex: 1 1 30%;
}
.vjs-playlist {
  margin: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}