ビデオの挿入: <video>

4.1 <video> タグの基本

<video>要素を使って、ウェブページにビデオを埋め込むと、ブラウザで直接ビデオコンテンツを再生できるんだ。 この要素は、さまざまなフォーマットのサポートを含む再生のカスタマイズ、属性とJavaScriptメソッドを使用した制御など、幅広い機能を提供しているんだ。一緒に詳しく見ていこう。

シンプルな例

<video>タグはsrc属性と一緒に使われるよ。これはビデオファイルへのパスを示すんだ。それに加えて、 再生ボタン、一時停止、音量調整といった標準的なコントロール要素を表示するcontrols属性を追加することもできるよ。

    
      <video src="videofile.mp4" controls></video>
    
  

複数ソースの例

いろんなブラウザへの対応を考慮して、<source>タグを使って複数のビデオソースを指定することができるんだ。 これにより、ブラウザが対応可能なビデオフォーマットを選ぶことができるよ。

    
      <video controls>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Your browser does not support the video element.
      </video>
    
  

<video> タグの属性

• src: ビデオファイルへのパスを指定する
• controls: 再生コントロールを表示する
• autoplay: ページロード時に自動でビデオを再生する
• loop: ビデオの再生が終了したら繰り返す
• muted: ページがロードされたときに音をオフにする
• preload: ブラウザがビデオをどうロードするかを指定する。可能な値: none, metadata, auto
• width と height: ビデオプレーヤーの幅と高さを設定する
• poster: ビデオ再生前に表示するプレースホルダー画像を指定する

4.2 主な属性

1. 自動再生

autoplay属性により、ページがロードされたらすぐにビデオファイルが自動的に再生されるんだ。 オーディオの時と同じで、ユーザーをいらつかせないように、慎重に使ってね。

    
      <video src="videofile.mp4" autoplay></video>
    
  

2. ビデオのループ再生

loop属性はビデオファイルを無限にループ再生することを示すんだ。 背景ビデオやアニメーションに役立つよ。

    
      <video src="videofile.mp4" loop></video>
    
  

3. ミュート

muted属性はビデオファイルの音声をロード時にオフにするんだ。既定では音声なしでビデオを再生したいときに便利で、 ユーザーが必要に応じて音をオンにすることができるんだ。

    
      <video src="videofile.mp4" muted></video>
    
  

4. プリロード

preload属性はブラウザがページのロード時にビデオファイルをどのようにロードするかを指示するんだ。 3つの値のうちの1つを取ることができるよ:

• none: ブラウザはビデオを事前にロードしない
• metadata: ブラウザはメタデータのみ（長さ、サイズなど）をロードする
• auto: ブラウザはページがロードされたらビデオをすべてロードする

    
      <video src="videofile.mp4" preload="auto"></video>
    
  

5. ポスター

poster属性は、ビデオ再生が始まる前に表示されるプレースホルダー画像を指定するんだ。 ビデオの内容に関する視覚的情報をユーザーに提供するのに役立つよ。

    
      <video src="videofile.mp4" poster="posterimage.jpg"></video>
    
  

4.3 対応フォーマット

クロスブラウザ互換性を確保するために、複数のビデオフォーマットの使用が推奨されるんだ。 最も一般的なフォーマットにはMP4、WebM、およびOGGがあるよ。

MP4フォーマット

MP4 (MPEG-4 Part 14)は最も人気のあるビデオフォーマットの1つなんだ。ほとんどのブラウザとデバイスでサポートされているよ。 MP4はロス圧縮を使用していて、ファイルサイズが比較的小さいのに良いビデオ品質を提供してくれる。

例:

    
      <video src="videofile.mp4" type="video/mp4"></video>
    
  

WebMフォーマット

WebMはインターネットでの使用を目的に開発されたオープンビデオ圧縮フォーマットだよ。ほとんどの現代の ブラウザでサポートされていて、良いビデオ品質を提供するんだ。

例:

    
      <video src="videofile.webm" type="video/webm"></video>
    
  

OGGフォーマット

OGG (Ogg Theora)は多くのブラウザでサポートされているオープンビデオフォーマットだよ。このフォーマットは 良いビデオ品質を提供し、MP4やWebMの代替としてよく使用されるんだ。

例:

    
      <video src="videofile.ogv" type="video/ogg"></video>
    
  

互換性を確保するための複数フォーマットの使用例

クロスブラウザ互換性を確保するため、異なるフォーマットの複数ビデオソースを指定することが推奨されるんだ。 ブラウザは最初にサポートされたフォーマットを選ぶよ。

    
      <video width="600" controls autoplay muted>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Your browser does not support the video element.
      </video>