【V】video属性をvideo非対応環境に配慮して使う方法

今どきvideo非対応環境を使っていることのほうが少ないと思いますが知っといて損はないはず

複数の動画ファイルを指定

videoタグは複数の動画ファイルを指定できます。
複数指定した場合、読み込めるファイルの中で一番上に書かれているものが表示されます。
mp4は非対応だがaviは対応している、みたいなブラウザがあったときに役に立つ気がします。

<!-- 一つだけならこれでいい -->
<video src="example.mp4"></video>

<!-- 複数指定する場合はこれ -->
<video>
    <source src="example.mp4">
    <source src="example.avi">
</video>

videoタグ非対応時の代替テキストを指定

videoタグ非対応時は中身に書いてある対応しているタグが見えるようになります。
これに限らず非対応タグは全部できるらしいです

<video>
    <source src="example.mp4">
    <source src="example.avi">
    <!-- こういうふうにするとvideoタグ非対応時に文章が表示できる -->
    <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>