HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLページに動画を追加する方法を徹底解説！

HTMLページに動画を埋め込む基本的な方法

HTMLページに動画を表示したい場合は、<video>要素を使用します。これは、HTMLで動画を標準的な方法で埋め込むために用意されたタグです。

動画を正しく表示するためには、以下のポイントを押さえておきましょう。

  • height（高さ）とwidth（幅）を指定して、レイアウトが崩れないようにする
  • <source>要素を使って動画ファイルの場所（src）を指定する
  • type属性で動画の形式（MIMEタイプ）を明示する

記述例

実際のコードは以下のようになります。

<video width="640" height="360" controls>
  <source src="sample.mp4" type="video/mp4">
  お使いのブラウザはvideoタグに対応していません。
</video>

<video>タグで使える主な属性一覧

<video>タグは、下記のような属性をサポートしています。用途に合わせて組み合わせて使用しましょう。

属性値説明
heightpixels（ピクセル）動画の高さを指定します。
srcURL動画ファイルのアドレス（URL）を指定します。
typeMIME_type動画のMIMEタイプ（例：video/mp4）を指定します。
widthpixels（ピクセル）動画の幅を指定します。

補足：より使いやすい動画プレイヤーにするには

上記の属性に加えて、controls属性を付けると再生・一時停止・音量調整などの操作ボタンが表示されます。また、autoplay（自動再生）、loop（繰り返し再生）、muted（ミュート状態で再生）などの属性も用意されており、目的に応じて活用すると、よりユーザーフレンドリーな動画コンテンツを実現できます。

  1. HTMLページで円を描く方法｜CSSのborder-radiusを使った簡単な実装例

    HTMLページ上に円を描くには、主に「SVG」「Canvas」「CSS」の3つの方法があります。中でも最も手軽なのが、CSSのborder-radiusプロパティを使う方法です。要素の幅と高さを同じ値にし、border-radiusをその半分（または50%）に設定するだけで、簡単に正円を描くことができます。CSSで円を描くサンプルコード以下のコードを実行すると、青い円が画面に表示されます。ぜひ実際に試してみてください。<!DOCTYPE html> <html>    <head>     

  2. HTMLページからリダイレクトする方法を解説！metaタグの使い方

    ページリダイレクトとは？ ページリダイレクトとは、あるURLをクリックしてページXにアクセスしたにもかかわらず、内部的に別のページYへ自動的に転送される仕組みのことです。サイトの移転やURLの変更、メンテナンス中の一時的な誘導など、さまざまな場面で活用されています。 HTMLページでリダイレクトする基本：METAタグを使う HTMLページから別のページへリダイレクトさせるには、<meta>タグを使用します。<head>内に記述したmetaタグのhttp-equiv属性でHTTPヘッダーに相当する値を指定し、content属性で転送までの待機秒数と転送先URLを設定しま