HTML5における動画の仕組みは?| HTML video

HTML5は、HTMLの最新バージョンです。従来のHTMLと異なり、HTML5ではvideoタグを使用することで、Webページに簡単に動画を追加することができます。

学習目的

この記事を読み終えると、以下のことができるようになります。

  • HTML5の定義
  • HTML5がプラグインなしでストリーミングを可能にする方法について説明する
  • HTML5でのvideo要素の使用方法を説明する

関連コンテンツ


さらに詳しく知りたいとお考えですか?

是非、Cloudflareが毎月お届けする「theNET」を購読して、インターネットで最も人気のある洞察をまとめた情報を入手してください!

当社がお客様の個人データをどのように収集し処理するかについては、Cloudflareのプライバシーポリシーをご確認ください。

記事のリンクをコピーする

HTML5とは?

HTML5は、インターネット上でコンテンツを形成するためのコーディング言語であるHypertext Markup Language(HTML)の最新バージョンです。すべてのWebページは、ブラウザにコンテンツの表示方法を伝達するためにHTMLを使用しています。以前のバージョンのHTMLと比較して、HTML5には多くの機能が追加されており、その1つにWebページに動画を追加する機能があります。HTML5では他にも、SVGグラフィックス、Webサイト上のナビゲーションを定義するタグ、ヘッダーとフッターのタグなどの機能がサポートされています。

HTML5のvideo要素はどのように機能するか?

HTML5のvideo要素は、ブラウザが画像ファイルを読み込むのと同じように動画ファイルの場所を指定することで、別のソースから動画ファイルを読み込むようにブラウザに指示します(画像自体はHTMLファイルに保存されず、ブラウザが他の場所から取得します)。また、幅や高さなどの属性を記述して、ブラウザに動画の表示方法を指示することもできます。その他のマークアップコードでページ内のどこにビデオを配置するかをブラウザに指示することができます。

HTML5のvideoタグは<video>で、他のHTML要素と同様に</video>で閉じます。

これらのタグの間に<source>タグを入れて動画ファイルの保存場所を示します。このタグの中で次のように動画のソース(src)とファイルの種類(type)の両方を示します。


<video>
  <source src="example.mp4" type="video/mp4">
</video>

また、<video>タグの中には、以下の重要な属性も入れることができます。

  • Width:動画の幅をピクセル単位で指定します。ピクセル数は、引用符の間に入れます: width="370"
  • Height: 動画の高さを指定します。width属性と同じように機能します。
  • Play、pause、volume:これらのコントロールにより、ユーザーは動画の再生を制御することができます。これらを含めるにはcontrols要素を<video>タグに追加します。

動画の複数の代替ソースを<video>のタグの間に入れて、ブラウザが最初のファイル形式に対応していない場合に備えることも可能です。ブラウザは、常に列挙された最初のsourceを使用します。

また、<video>タグの間にテキストを配置することができます。このテキストは、ユーザーのブラウザが HTML5ビデオに対応していない場合にのみ表示されます。

まとめると、動画を埋め込むためのHTML5のコードは、次のようになります:


<video controls width="370" height="130">
  <source src="example.mp4" type="video/mp4">
  <source src="alternate-example.webm" type="video/webm">
Your browser does not support HTML5 video.
</video>

autoplay(ページが読み込まれるとすぐに動画を再生する)、loop(動画をループ再生する)、muted(動画をミュートする)、poster(動画を読み込む前に画像を表示する)など、その他多くの他の属性もvideo要素内で使用することができます。Mozillaには、これらの属性に関する優良なドキュメントがあります。

HTML5で使用されるストリーミングプロトコルは?

HTML5自体は、ストリーミングプロトコルではありません。HTML5で構築されたWebサイトでは、HTTPライブストリーミング(HLS)やMPEG-DASHなど、数あるさまざまなストリーミングプロトコルを使用して動画を再生することができます。これは、HTMLのマークアップコードではなく、サーバーサイドで設定されます。

すべてのブラウザがHTML5に対応しているか?

主要なブラウザはすべてHTML5に対応しているため、以前のバージョンのHTMLにはなかったHTML5のタグを解釈することができます。しかし、すべてのブラウザーがHTML5のすべての機能をサポートしているわけではありません。開発者は、HTML5のvideo要素を解釈できない古いバージョンのブラウザを使用しているユーザーがいることを念頭に置く必要があります。

HTML5以前のWebサイトではどのように動画コンテンツを含めていたか?

2008年にHTML5が公開される以前は、多くの場合動画はAdobe Flashのプラグインを使用して埋め込まれていました。HTML5ではプラグインが不要になり、開発者はわずかなHTMLタグでWebページに動画を埋め込むことができるようになりました。その結果、Flashの必要性は低下し、ついにAdobeは2020年12月31日にFlashのサポートを終了しました。

現在では、ほとんどのユーザーがブラウザのプラグインを追加することなく動画を配信できるようになり、開発者もプラグインに頼らずに動画を埋め込むためのさまざまな方法を利用できるようになりました。HTML5のvideo要素は、そのための最もよく使われる方法の1つです。

ブラウザのプラグインとは?

ブラウザのプラグインとは、ブラウザに本来搭載されていない機能を追加するソフトウェアの一部です。以前は、ブラウザに動画を再生する機能が含まれていないことがありました。Adobe Flashのようなサードパーティプラグインは、この不足部分を埋めるのに役立つものでした。

しかし、プラグインはセキュリティ上の脅威となることもあります。プラグインは、ブラウザやWebサイトが与える攻撃対象領域に加えて、外部の攻撃者がブラウジングセッションを侵害するための新たな攻撃対象領域を与えてしまう可能性があります。さらに、プラグインによってページの機能性が低下してしまう可能性があります。プラグインを使用する場合、Webページを読み込むために1つのソフトウェアだけでなく、複数のソフトウェアが適切かつ迅速に動作しなければならないことを意味します。

HTML5で使用することができるネイティブな動画埋め込みであれば、より高速に読み込むことができます。また、プラグインを使用しないことで、より安全性が高まります。

Cloudflare Streamの動画を埋め込む方法は?

Cloudflare Streamは、動画のエンコーディング、保管、配信、再生機能を統合したオンデマンド動画プラットフォームです。動画ファイルをStreamにアップロードし、Webページに埋め込む方法については、Cloudflare Stream documentationをご覧ください。または、始める前にCloudflare Streamの詳細についてご覧ください。