Lynda.com Web HTMLバックグラウンドビデオの設計

かもしれません 21, 2024

バックグラウンドビデオは、製品のマーケティングに最適な方法です。このLynda.comビデオトレーニングコースでは、 Webの設計：HTMLバックグラウンドビデオ Chris Converseを使用すると、自動再生の背景ビデオをWebページに追加する方法を学習できます。また、CSSを使用して、背景ビデオの上に他のデザイン要素を配置する方法も学習します。また、エクササイズファイルは、スタンダードメンバーシップでも無料です。

Converseは単純なhtmlファイルから始まり、デザイン要素（テキストのタグライン、ロゴsvg、ビデオ）のメインdivコンテナーを構築します。ビデオタグで自動再生を使用する方法と、最も一般的な2種類のビデオ（.mp4および.ogg）を設定する方法を示します。

次に、ConverseはCSSファイルとCSSに移動して、ビデオと中央のロゴ画像のスタイルと位置を設定します。彼は、キャッチフレーズのテキストについても同じことをします。私は特に彼のボーダーを扱うテクニックが好きでした。

次に、中規模および小規模の画面とCSSのメディアクエリを使用して、このレイアウトをレスポンシブにする方法について説明します。繰り返しますが、彼はビデオ、ロゴ、キャッチフレーズのスタイルを設定します。また、ビデオを再生できない小さな画面の代替画像を設定し、ビデオを非表示にする方法も示します。

さらに複雑な問題に移り、ConverseはJavaScriptを使用して、タッチイベントなどのモバイルデバイスの機能のディスプレイをより複雑に制御する方法を示します。彼は、現在のデバイスの機能に基づいてJavaScriptを介してページに追加できるCSSクラスを生成するModernizrと呼ばれるサードパーティのWebサイトを紹介します。彼は、コードを生成し、ダウンロードしてWebページコードに追加する方法を示します。

最後のレッスンでは、Converseは、ビデオがブラウザーウィンドウ全体をカバーするように、レイアウトの位置やその他のスタイルをコーディングする方法を示します。

このコースは、Webおよびモバイルデバイス用の背景ビデオのスタイル設定および配置に使用されるHTMLおよびCSSについてでした。ただし、高速ダウンロード用にビデオファイルをホストおよび最適化するためのオプションについて、著者が議論することを望んでいました。また、静的な要素だけでなく、背景ビデオにインタラクティブなデザイン要素を追加する方法を知っておくといいでしょう。

クリスコンバースは、ロチェスター工科大学でグラフィックデザインの学位を取得し、デザインとテクノロジーで22年の経験があります。

//www.lynda.com/HTML-tutorials/Design-Web-HTML-Background-Video/373560-2.html

開示：この記事の金銭的な補償は受けていません。私の経験に基づいて、意見は完全に私自身のものです。