HTML5は、HTMLの最新バージョンです。従来のHTMLと異なり、HTML5ではvideoタグを使用することで、Webページに簡単に動画を追加することができます。
この記事を読み終えると、以下のことができるようになります。
関連コンテンツ
是非、Cloudflareが毎月お届けする「theNET」を購読して、インターネットで最も人気のある洞察をまとめた情報を入手してください!
記事のリンクをコピーする
HTML5は、インターネット上でコンテンツを形成するためのコーディング言語であるHypertext Markup Language(HTML)の最新バージョンです。すべてのWebページは、ブラウザにコンテンツの表示方法を伝達するためにHTMLを使用しています。以前のバージョンのHTMLと比較して、HTML5には多くの機能が追加されており、その1つにWebページに動画を追加する機能があります。HTML5では他にも、SVGグラフィックス、Webサイト上のナビゲーションを定義するタグ、ヘッダーとフッターのタグなどの機能がサポートされています。
HTML5のvideo要素は、ブラウザが画像ファイルを読み込むのと同じように動画ファイルの場所を指定することで、別のソースから動画ファイルを読み込むようにブラウザに指示します(画像自体はHTMLファイルに保存されず、ブラウザが他の場所から取得します)。また、幅や高さなどの属性を記述して、ブラウザに動画の表示方法を指示することもできます。その他のマークアップコードでページ内のどこにビデオを配置するかをブラウザに指示することができます。
HTML5のvideoタグは<video>
で、他のHTML要素と同様に</video>
で閉じます。
これらのタグの間に<source>
タグを入れて動画ファイルの保存場所を示します。このタグの中で次のように動画のソース(src)とファイルの種類(type)の両方を示します。
<video>
<source src="example.mp4" type="video/mp4">
</video>
また、<video>
タグの中には、以下の重要な属性も入れることができます。
width="370"
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で構築されたWebサイトでは、HTTPライブストリーミング(HLS)やMPEG-DASHなど、数あるさまざまなストリーミングプロトコルを使用して動画を再生することができます。これは、HTMLのマークアップコードではなく、サーバーサイドで設定されます。
主要なブラウザはすべてHTML5に対応しているため、以前のバージョンのHTMLにはなかったHTML5のタグを解釈することができます。しかし、すべてのブラウザーがHTML5のすべての機能をサポートしているわけではありません。開発者は、HTML5のvideo要素を解釈できない古いバージョンのブラウザを使用しているユーザーがいることを念頭に置く必要があります。
2008年にHTML5が公開される以前は、多くの場合動画はAdobe Flashのプラグインを使用して埋め込まれていました。HTML5ではプラグインが不要になり、開発者はわずかなHTMLタグでWebページに動画を埋め込むことができるようになりました。その結果、Flashの必要性は低下し、ついにAdobeは2020年12月31日にFlashのサポートを終了しました。
現在では、ほとんどのユーザーがブラウザのプラグインを追加することなく動画を配信できるようになり、開発者もプラグインに頼らずに動画を埋め込むためのさまざまな方法を利用できるようになりました。HTML5のvideo要素は、そのための最もよく使われる方法の1つです。
ブラウザのプラグインとは、ブラウザに本来搭載されていない機能を追加するソフトウェアの一部です。以前は、ブラウザに動画を再生する機能が含まれていないことがありました。Adobe Flashのようなサードパーティプラグインは、この不足部分を埋めるのに役立つものでした。
しかし、プラグインはセキュリティ上の脅威となることもあります。プラグインは、ブラウザやWebサイトが与える攻撃対象領域に加えて、外部の攻撃者がブラウジングセッションを侵害するための新たな攻撃対象領域を与えてしまう可能性があります。さらに、プラグインによってページの機能性が低下してしまう可能性があります。プラグインを使用する場合、Webページを読み込むために1つのソフトウェアだけでなく、複数のソフトウェアが適切かつ迅速に動作しなければならないことを意味します。
HTML5で使用することができるネイティブな動画埋め込みであれば、より高速に読み込むことができます。また、プラグインを使用しないことで、より安全性が高まります。
Cloudflare Streamは、動画のエンコーディング、保管、配信、再生機能を統合したオンデマンド動画プラットフォームです。動画ファイルをStreamにアップロードし、Webページに埋め込む方法については、Cloudflare Stream documentationをご覧ください。または、始める前にCloudflare Streamの詳細についてご覧ください。