1. ホーム
  2. ホームページの作り方
  3. HTML
  4. HTMLの「video」タグの使い方をご紹介！ホームページに動画を簡単に埋め込む
  • 最終更新日
  • HTML

HTMLの「video」タグの使い方をご紹介！ホームページに動画を簡単に埋め込む

ホームページを作っているとjQueryなどを使用して動きのあるサイト作りをしたくなります。その方が見てて楽しいですし、作っていて面白かったりします。

ちょっと動きを付けるのであればCSSの「animation」プロパティを使うのも良いですね。でも、もっと簡単に動きを加えるなら動画をページに埋め込んでやるのが早い！

HTML5から「video」タグが使えるようになりました。これを使うと簡単に動画を埋め込む事ができます。

目次 [閉じる]

videoタグの使い方

それでは「video」タグの記述方法を見ていきましょう。

index.html

            
    
                
  1. <!DOCTYPE html>
    2. 
                
  2. <html>
    3. 
                
  3. <head>
    4. 
                
  4. <meta charset="UTF-8">
    5. 
                
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
    6. 
                
  6. <title>videoタグを使って動画を埋め込む</title>
    7. 
                
  7. </head>
    8. 
                
  8. <body>
    9. 
                
  9. <video controls>
    10. 
                
  10.   <source src="sample.webm" type="video/webm">
    11. 
                
  11.   <source src="sample.ogv" type="video/ogv">
    12. 
                
  12.   <source src="sample.mp4" type="video/mp4">
    13. 
                
  13. </video>
    14. 
                
  14. </body>
    15. 
                
  15. </html>
    16.

こちらが一番シンプルな形で「video」タグに「controls」属性を追加しています。「controls」を記述する事によってコントロールパネルを表示しています。

コントロールパネルっていうのは再生・停止を制御したり音量調整や全画面へ切り替たりできるアレです。

            
    
                
  1. <video controls>
    2. 
                
  2.   <source src="sample.webm" type="video/webm">
    3. 
                
  3.   <source src="sample.ogv" type="video/ogv">
    4. 
                
  4.   <source src="sample.mp4" type="video/mp4">
    5. 
                
  5. </video>
    6.

「video」タグの中には「source」タグを入れて使用するんですが、「source」タグを使用する目的はすべてのブラウザで動画を再生できるようにするためです。

動画の拡張子は「webm」・「ogv」・「mp4」が使用できます。ただ、すべてのブラウザで表示できる拡張子が無いのでそれを補うために3つ記述しているという訳です。

上記のタグの意味は「sample.webm」を表示するけど、対応していないブラウザなら「sample.ogv」を表示、「sample.ogv」が対応できないなら「sample.mp4」を表示するという事です。

大体のブラウザが「mp4」の拡張子に対応しているので、はじめから「mp4」の動画のみを設定する事も多くなってきています。その場合の記述はもっと簡単にできます。

            
    
                
  1. <video src="sample.mp4" controls></video>
    2.

ひとつの拡張子のみの設定で動画を再生する場合は「video」タグに直接読み込むファイルのパスを記述すればOKです。

試しに何でも良いので動画を用意してご自身で試してみてください。ちょっとした動画なら無料でダウンロードできる素材サイトがあるので一度ご確認ください。

videoタグの属性一覧

「video」タグには属性を追加する事によって好みの形にカスタマイズする事ができます。

controls
コントロールパネルを表示します。
width
横幅を指定します。
height
高さを指定します。
muted
無音を指定します。
autoplay
自動再生を指定します。
loop
ループ再生を指定します。
poster
開始画面の画像を指定します。
playsinline
インライン再生を指定します。
preload
動画の読み込みを指定します。

auto
事前に動画ファイルを読み込みます。（初期値）

none
事前の動画ファイル読み込みを禁止します。

metadata
動画ファイルのメタデータだけ読み込みます。

videoタグを使ったサンプル

それでは前項の属性を使った動きを3つご紹介します。それぞれの属性は合わせて使用する事が多いです。使用する属性によっては注意しなければいけない点もあるので覚えておいてください。

開始画面の画像を指定する（コントロールパネル付き）
「poster」・「controls」を追加します。
            
    
                
  1. <video src="sample.mp4" poster="sample.jpg" controls></video>
    2.

「poster」を使うと動画が開始される前に好きな画像を表示する事ができます。特に見てもらいたい箇所を画像として切り取って使用したりします。

横幅・高さを指定する（コントロールパネル付き）
「width」・「height」・「controls」を追加します。
            
    
                
  1. <video src="sample.mp4" width="300px" height="158" controls></video>
    2.

パソコンで見ていると特に問題はないですが、これをスマホで見ると動画再生のボタンしか表示されなくて背景が真っ白になります。これを回避するためにはひとつ前で紹介した「poster」を設定しなければいけません。

基本的に僕は横幅と高さを設定する必要は無いかなと思います。CSSでも調整できますし、レスポンシブ対応にするならCSSでの設定が必要です。

            
    
                
  1. video {
    2. 
                
  2.   width: 100%
    3. 
                
  3. }
    4.

「width:100%;」を追加してやればスマホで見ても動画がハミ出る事なく枠内に収まってくれます。

自動再生・ループ再生・インライン再生を指定する
「muted」・「autoplay」・「playsinline」・「loop」を追加します。
            
    
                
  1. <video src="sample.mp4" muted autoplay playsinline loop></video>
    2.

自動再生をおこなうためには「muted」属性も追加して、無音状態にしなければ自動再生されないので注意してください。

スマホで動画を見る場合は全画面表示になりますのでページ内で自動再生したければ「playsinline」を追加してインライン再生にしなければいけません。

逆に言うと「playsinline」を設定していなければスマホで自動再生は動きませんの注意です。

Facebookの投稿をホームページに埋め込む！特定の投稿のみの埋め込みも可能 HTMLの文字の改行と行間の取り方！初心者がやってしまう間違いを回避しよう

よく読まれている記事

おすすめの記事

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ！Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。

チェピレア日記