レスポンシブWebデザイン学習（2） — 動画をレスポンシブにすることはできるのか？

前回のエピソードレビュー:

昨日は、ページがさまざまなデバイス サイズにどのように対応するかについて説明しました。主に使用される方法は、@media コマンドとサイズのパーセンテージです。

前回のエピソードの補足:

このうち、画像や動画のサイズがデバイス画面の幅を超えないようにするには、次の CSS 設定を使用します。

この手法は、「Head First Mobile Web」では「 Fluid Image Technique 」と呼ばれています。

動画をレスポンシブにすることはできますか?

写真に加えて、マルチメディアのもう 1 つの一般的な形式はビデオです。ウェブデザインでは、必要に応じて動画をページに追加することがあります。一般的に、動画は YouTube、Tudou/Youku、Sina などのウェブサイトにアップロードされ、リンクの形でウェブページに追加されます。

なぜiPhoneでYouTube動画を視聴できないのでしょうか？ （海外）

iOSでウェブ動画を視聴する場合、iPhoneのブラウザがAdobe Flashをサポートしていないため、脱獄してプラグインをインストールしないとFlash形式の動画を視聴できません。これはAppleなどの企業の商業競争政策に関係しており、私たちにはどうしようもありません。この問題に対して、YouTube ビデオ ソースを使用した Web デザインには、Web ページに埋め込まれたオブジェクト埋め込み形式の元のコード スニペットを新しいコード スニペットに置き換えるという解決策があります。

たとえば、古いページのネストされたコード スニペットは次のとおりです。

<iframe> を使用して国内のビデオを入手できますか?

それぞれ Tudou と Sina から埋め込まれたビデオ コードの一部を傍受することによって、オブジェクト埋め込みメソッドが使用されていることがわかります。

じゃがいも：

ここで、Tudou ビデオ アドレスを <iframe> コード ブロックで囲み、テスト ページに配置すると、問題が発生します。

（これは写真です… ）

フルスクリーンにできない…これは再生アドレスが別途キャプチャされ、 allowFullScreenなどのフラッシュ関連の設定が破棄されるためです。 iframe メソッドを使用すると、明らかに 2 つの問題が発生します。

まず、映画のソース形式は変更されておらず、依然としてswf形式であるため、Adobe Flashをサポートしていない携帯電話では再生できません。

2 つ目の理由は、フラッシュ プレーヤーのパラメータ設定が失われ、一部の機能が失われることです。

これは明らかに受け入れられないことです。

1 点目については、ハードウェア メーカー間の商業競争による副作用を回避するために、ビデオ Web サイトがより汎用的なビデオ フォーマットを使用することを期待するしかありません。2 点目については、モバイル フォンでフラッシュ フォーマットが表示されないユーザーがさまざまなクラックやプラグインを見つけてそれを補っているため、オブジェクト埋め込み方式を引き続き使用します。そのため、より汎用的なフィルム ソース フォーマットがない場合、Web デザイナーは以前の方法を使用し続ける必要があります。

しかし、動画フォーマットのサイズは一般的に固定されており、JavaScript を使用せずに CSS のみを使用してデバイスのサイズやブラウザの現在のサイズに応じて動的に変更することは困難です。ビデオの幅については、パーセンテージで設定できます。たとえば、コンテナの 80% に設定すると、ビデオは常にコンテナの幅の 80% を占めます。ただし、ほとんどの人はブラウザ ウィンドウを比例して拡大縮小しないため、高さは設定できません。絞り込むか、短くしてください。したがって、ビデオ サイズのスケーリングを保証するためにパーセンテージに頼るのは現実的ではありません。

この前提の下では、ビデオは一定のサイズを維持し、Web ページの残りの部分はブラウザのサイズに応じてレイアウトが動的に変更されることを期待します。

ビデオに示されているように:

ブラウザをプルするプロセス全体を通じて、ビデオのサイズは変化しないことがわかります。ビデオの幅は、ブラウザの幅がビデオの幅よりも小さくなるまで減少しません (上記のFluid Image Techniqueを使用)。

全体の効果を生み出すための新しいテクニックはなく、CSS のサイズ判定を 2 から 3 に増やすだけです。詳細についてはデモコードをご覧ください。

[デモコードはこちらからダウンロード]

要約:

CSS だけで動画サイズを適応させることは不可能のようです。モバイル デバイスでページ ビデオを正常に視聴できるようになることを期待しています。また、ビデオ Web サイトでは、Flash ではなく、より汎用的なビデオ形式が使用されることを期待しています...

最後に、この本に出てくる公式で締めくくりましょう。RWD =流動グリッドレイアウト+ CSSメディアクエリ+流動イメージ/メディア+ 心の状態

一般的な考え方は、レスポンシブデザイン=流動的なグリッドレイアウト+ @mediaステートメント+流動的な画像/メディア+デザイナーの意識です。