HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

【HTML】動画のダウンロード中に表示される画像（ポスター）を設定する方法

HTMLでは、poster属性を使用することで、動画がダウンロードされている間に表示する画像を簡単に設定できます。

poster属性とは

poster属性は、<video>要素に指定できる属性の一つで、動画の読み込み中や再生前の状態で表示されるサムネイル画像（ポスター画像）を定義します。ユーザーが再生ボタンを押すまでの間、この画像が画面に表示されるため、真っ黒な画面を見せることなく、視覚的に魅力的な演出が可能になります。

使用例

以下のコードは、poster属性を実装した具体例です。実際にブラウザで実行して、挙動を確認してみてください。

<!DOCTYPE HTML>
<html>
   <body>
      <video width = "300" height = "200" poster = "https://www.tutorialspoint.com/images/logo.png" controls>
         <source src = "/html5/foo.ogg" type = "video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         お使いのブラウザはvideo要素に対応していません。
      </video>
   </body>
</html>

コードのポイント解説

  • poster属性：ダウンロード中や再生前に表示したい画像のURLを指定します。
  • controls属性：再生・一時停止・音量調整などの操作パネルを表示します。
  • source要素：OGG形式とMP4形式など複数の動画ソースを指定することで、ブラウザごとの互換性に対応できます。
  • フォールバックテキスト：<video>タグ内に記述したテキストは、動画非対応の環境で表示されます。
  1. HTMLで画像をレスポンシブ対応にする方法【初心者向け解説】

    Webページをスマートフォンやタブレットなど、さまざまな画面サイズに対応させるには、画像をレスポンシブ対応にすることが重要です。HTMLで画像をレスポンシブにするには、CSSで2つのプロパティを設定するだけで実現できます。レスポンシブ画像の基本：2つのプロパティまず、<img>タグを使って画像を配置します。そのうえで、以下の2つのプロパティを指定しましょう。height: auto; … 画像の高さを幅に合わせて自動的に調整します。max-width: 100%; … 画像が親要素（画面幅）より大きくならないよう制限します。具体的には、次のようにインラインスタイルとして記述します。

  2. HTMLで画像をリンクとして使用する方法

    HTMLで画像をリンクとして使用するには、<img>タグと、href属性を持つ<a>タグを組み合わせます。<img>タグはWebページに画像を表示するためのタグであり、<a>タグはリンクを作成するためのタグです。<img>タグのsrc属性には表示したい画像のURLを指定します。あわせてwidth属性とheight属性を指定することで、画像のサイズを明示的に制御でき、レイアウトの崩れを防ぐこともできます。基本的な書き方構造としては、<a>タグの中に<img>タグを入れ子にするだけです。これにより、クリック可能な画