毎日コーディングクイズシリーズ！今回はHTML5のメディア要素について、実践的なクイズ形式で学習しましょう！
🎯 問題
あなたは企業のWebサイトで、プロモーション動画をユーザーに見せたいと考えています。この動画は自動再生はしないが、ユーザーがページにアクセスしたときに最初のフレームが表示され、すぐに再生できる状態にしておきたいです。また、動画が読み込まれない場合はテキストメッセージを表示する必要があります。
<video width="800" height="450" poster="thumbnail.jpg">
<source src="promo-video.mp4" type="video/mp4">
<source src="promo-video.webm" type="video/webm">
<p>お使いのブラウザは動画の再生に対応していません。</p>
</video>
A.
B.
C.
D.
controls preload="auto"B.
controls preload="metadata"C.
controls preload="none" autoplayD.
autoplay muted preload="auto"
答えを確認する
✅ 正解：B
正解
正解は B. controls preload=”metadata” です！
解説
この問題のポイントは、ユーザーエクスペリエンスとパフォーマンスのバランスを取ることです。要件を満たすためには、ユーザーが動画を制御できるようにし、最初のフレームを表示しつつ、不要なデータ転送を避ける必要があります。
- 選択肢A:
preload="auto"は動画全体を事前に読み込むため、ユーザーが再生しない場合でも大量のデータを無駄に転送してしまいます。モバイルユーザーにとって負荷が大きすぎます。 - 選択肢B:
preload="metadata"は動画の長さや最初のフレームなどの基本情報だけを読み込み、poster属性と組み合わせて最適な表示を実現します。ユーザーが再生ボタンを押せばすぐに再生開始できます。 - 選択肢C:
preload="none"とautoplayの組み合わせは矛盾しています。また、要件では「自動再生はしない」と明記されているため不適切です。 - 選択肢D:
autoplayは要件に反しており、controlsがないとユーザーが動画を操作できません。企業サイトで突然音が出る可能性もあります。
実際の開発では、preload="metadata"を使用することで、ページの読み込み速度を保ちながら、動画の準備を適切に行うことができます。特にモバイルデバイスでは、データ使用量を抑えることが重要です。
<video width="800" height="450" poster="thumbnail.jpg" controls preload="metadata">
<source src="promo-video.mp4" type="video/mp4">
<source src="promo-video.webm" type="video/webm">
<p>お使いのブラウザは動画の再生に対応していません。</p>
</video>HTML5の動画要素を使用する際は、ユーザーの通信環境や端末の性能を考慮して、適切なpreload設定を選択することが重要です。企業サイトでは特に、ユーザーの意図しない大量のデータ転送を避けることで、サイト全体のパフォーマンスと評価を向上させることができます。
💡 ポイント
- preload=”metadata”は動画の基本情報のみを読み込み、パフォーマンスとUXのバランスが最適
- poster属性と組み合わせることで、動画読み込み前でも適切な表示が可能
- 複数のsource要素でブラウザ対応を強化し、フォールバックテキストでアクセシビリティを確保
- 自動再生は慎重に：企業サイトでは特にユーザー体験を重視し、controls属性で操作権をユーザーに委ねる
