<video>タグ自体をビデオの再生に使用できますが、ネストされた<source>タグにより、柔軟性と互換性が高まります。
まずは<video>タグの基本的な使い方を見ていきましょう。<video>タグは、Web ページにビデオを埋め込むために使用される HTML5 の要素です。<video>たとえば、タグを使用してビデオのソース ファイル パスを指定するだけです。
<video src="video.mp4" controls></video>この例では、src属性はビデオ ファイルへのパスを指定し、controls属性はビデオ プレーヤーを表示するコントロール バーを示します。これにより、ビデオを Web ページ上で直接再生できるようになります。
こうやって見るとシンプルで使いやすいラベルって本当ですか<video>？
しかし！！！
しかし！！！
しかし！！！
でもその後がキーポイントなんでしょうね！！！
まず<source>、複数の形式をサポートできるタグを使用します。
ブラウザーやデバイスが異なれば、サポートされるビデオ形式も異なります。特定のブラウザは、MP4 や WebM などの特定のビデオ形式のみをサポートする場合があります。
タグをネストすることにより<source>、異なる形式で複数のビデオ ソースを提供できるため、ブラウザはサポートする形式に応じて再生に最適なソースを選択できます。例えば：
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>このように、ブラウザが MP4 形式をサポートしている場合はビデオ ソースとして選択され、MP4 はサポートしていないが WebM 形式をサポートしている場合はビデオ ソースとしてvideo.mp4選択されます。video.webmこれにより、ビデオがブラウザーやデバイス間で適切に再生されることが保証されます。
次に、複数の<source>タグをネストすることで、それぞれに異なるビデオ コンテンツを含む複数のビデオ ソースを提供できます。
ブラウザは<source>タグ順にビデオ ソースを 1 つずつ確認し、最初に再生可能なソースを選択して再生します。最初のソースを再生できない場合、ブラウザは再生可能なソースが見つかるまで次のソースに戻ります。
このようにして、<source>タグ内に代替ビデオ ソースを指定して、1 つのソースが再生できなくなった場合でも、代替ソースを利用できるようにすることができます。
さらに、メディア クエリとレスポンシブ デザイン手法を使用すると、さまざまな画面サイズやデバイス タイプに基づいてさまざまなビデオ ソースを提供できます。
<source>複数のタグをネストし、タグ内の属性を<source>使用してさまざまなメディア クエリ条件を指定することにより、さまざまなデバイスに最適なビデオ ソースを選択できます。media
たとえば、大画面のデバイスには高解像度のビデオ フィードを提供し、モバイル デバイスには低解像度またはより適切に適応したビデオ フィードを提供できます。これにより、ビデオ再生のパフォーマンスとユーザー エクスペリエンスが最適化されます。
<source>次の例は、タグとメディア クエリを使用してさまざまなデバイスに適応する方法を示しています。
<video controls>
<source src="video-large.mp4" type="video/mp4" media="(min-width: 800px)">
<source src="video-small.mp4" type="video/mp4" media="(max-width: 799px)">
</video>この例では、デバイスのビューポート幅が 800 ピクセル以上の場合、ブラウザはそのデバイスをvideo-large.mp4ビデオ ソースとして選択します。ビューポートの幅が 800 ピクセル未満の場合、ブラウザはそれをビデオvideo-small.mp4ソースとして選択します。これにより、デバイスの画面サイズに基づいて最適なビデオ ソースが提供されます。
どうやって？
タグを理解したので<video>ビデオを再生できます。なぜ<source>タグをネストする必要があるのでしょうか?
ネストされたタグにより、 <source>HTML5 の<video>タグの柔軟性と互換性が向上します。複数のビデオ ソースを提供し、メディア クエリを使用することで、さまざまなブラウザやデバイスでビデオが適切に再生されることを確認し、さまざまなデバイスに最高のビデオ エクスペリエンスを提供できます。