HTMLで動画を埋め込む

2024年6月23日

HTMLで動画を埋め込むには、<video> 要素を使用します。以下は基本的な例です:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>動画の埋め込み</title>
</head>
<body>

<video width="640" height="360" controls>
    <source src="path/to/your/video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

</body>
</html>

上記の例では、<video> 要素内で動画ファイルへのパス (src 属性) と動画の種類 (<source> 要素の type 属性) を指定しています。controls 属性は、ビデオプレーヤーのコントロールを表示するためのものです。

以下は注意点です:

  1. 動画フォーマット: 現代のブラウザは複数の動画フォーマットをサポートしていますが、一般的なフォーマットとして video/mp4 がよく使われます。ただし、ブラウザやデバイスによっては異なるフォーマットが必要な場合もあります。
  2. 動画サイズ: width と height 属性で動画の幅と高さを指定できます。これはビデオプレーヤーの表示サイズであり、実際の動画ファイルのサイズとは異なります。また、ブラウザのウィンドウサイズやデバイスに応じて自動的に調整されることもあります。
  3. バックアップテキスト: <video> 要素内には、動画がサポートされていない場合に代替テキストを表示するためのコンテンツが含まれています。このテキストは <source> 要素の直後に配置されています。

上記の例を自分の動画ファイルに合わせて適切に変更してください。動画ファイルはプロジェクト内の適切な場所に配置し、パスを正確に指定してください。

未分類

Posted by ぼっち