動画の最適化
このページは、Next.js アプリケーションで動画を使用する方法を説明し、パフォーマンスに影響を与えることなく動画ファイルを保存して表示する方法を示します。
<video>
と <iframe>
の使用
HTML の <video>
タグを使用して直接動画ファイルを埋め込むか、<iframe>
を使用して外部プラットフォームでホストされている動画を埋め込むことができます。
<video>
HTML の <video>
タグは、セルフホスティングされた動画コンテンツを埋め込むことができ、再生と外観を完全にコントロールできます。
app/ui/video.jsx
export function Video() {
return (
<video width="320" height="240" controls preload="none">
<source src="/path/to/video.mp4" type="video/mp4" />
<track
src="/path/to/captions.vtt"
kind="subtitles"
srcLang="en"
label="English"
/>
お使いのブラウザは video タグをサポートしていません。
</video>
)
}
<video>
タグの一般的な属性
属性 | 説明 | 例 |
---|---|---|
src | 動画ファイルのソースを指定します。 | <video src="/path/to/video.mp4" /> |
width | 動画プレーヤーの幅を設定します。 | <video width="320" /> |
height | 動画プレーヤーの高さを設定します。 | <video height="240" /> |
controls | 指定した場合、デフォルトの再生コントロールセットを表示します。 | <video controls /> |
autoplay | ページが読み込まれたときに動画の自動再生を開始します。ブラウザによって自動再生ポリシーが異なることに注意してください。 | <video autoplay /> |
loop | 動画再生をループします。 | <video loop /> |
muted | 初期値としてオーディオをミュートにします。 autoplay と一緒によく使用されます。 | <video muted /> |
preload | 動画がどのようにプリロードされるかを指定します。値: none , metadata , auto 。 | <video preload="none" /> |
playsInline | iOS デバイス上でインライン再生を有効にします。iOS Safari での自動再生を機能させるために必要になることがあります。 | <video playsInline /> |
Good to know:
autoplay
属性を使用する場合は、動画がほとんどのブラウザで自動的に再生されるためmuted
属性も含めることが重要です。また、iOS デバイスとの互換性のためにplaysInline
属性も重要です。
動画の属性の包括的なリストについては、MDN のドキュメントを参照してください。
動画のベストプラクティス
- フォールバックコンテンツ:
<video>
タグを使用する場合、動画再生をサポートしていな いブラウザ向けにタグ内でフォールバックコンテンツを含めてください。 - 字幕やキャプション: 耳が不自由なユーザーや聞こえにくいユーザーのために字幕やキャプションを含めてください。字幕ファイルソースを指定するために、
<video>
要素と共に<track>
タグを使用してください。 - アクセシブルなコントロール: キーボードナビゲーションとスクリーンリーダーの互換性のために、標準の HTML5 動画コントロールを推奨します。高度なニーズに対しては、アクセシブルなコントロールと一貫したブラウザ体験を提供する react-player や video.js などのサードパーティ製プレーヤーの利用を検討してください。
<iframe>
HTML <iframe>
タグを使用して、YouTube や Vimeo などの外部プラットフォームから動画を埋め込むことができます。
app/page.jsx
export default function Page() {
return (
<iframe
src="https://www.youtube.com/watch?v=gfU1iZnjRZM"
frameborder="0"
allowfullscreen
/>
)
}