DOE HOME > Web技術Tips > HTML5 > video要素を使ってホームページで動画を再生する

category_05_m

video要素を使ってホームページで動画を再生する

Pocket

HTML5ではYoutubeなどの外部サイトに頼らなくても、video要素を使うことでホームページに動画を埋め込むことが出来ます。

 

そのときに必要になるvideo要素や、動画の形式についてまとめました。

 

この記事では動画の編集方法やエンコードについては触れないのでご注意ください。

もっとも簡単なvideo要素

<video src="media/penguin.mp4"></video>

video要素はimg要素のように、動画のパスを指定するだけで埋め込むことが出来ます。

 

しかしこれだけだと動画を再生する方法がないので、ブラウザでは画像が表示されているだけの状態になります。

動画を再生するには属性をつける必要があります。

 

<video src="media/penguin.mp4" controls></video>

controls属性をつけることで、動画のコントローラを有効にして、動画を再生できるようにします。

source要素を使う

 上記のようなvideo属性は、ビデオのフォーマットを1種類しか指定できません。

 

一般的にvideo属性はブラウザサポートに合わせて複数のフォーマットを指定します。

 

<video src="media/penguin.webm" controls>
	<source src="media/penguin.mp4" type="video/mp4">
	<source src="media/penguin.webm" type="video/webm">
</video>

 video要素の子要素にsource要素を入れ子にすることでフォーマットを複数指定できます。

 

source要素にはファイルのパスと、フォーマットの種類を表すtype属性を指定します。

 

また、src属性の末尾に #t=10 と指定すると10秒地点から再生します。

メディアフォーマット

まず基礎知識としてsource要素の順番ですが、ブラウザは上から順番に優先的に読み込み、その時点で他のフォーマットは読み込まなくなるので、読み込ませたいフォーマットを一番上に指定します。

 

動画のメディアフォーマットには以下のものがあります。

 

形式拡張子概要
MP4.mp4

ほとんどのブラウザでサポートされているフォーマット

WebMよりも高画質

WebM.webm

googleが開発したが、あまり広まっていない

「誰もが利用できる無料で高品質なウェブ向けビデオフォーマットの開発」というコンセプト

Ogg.oggこれといって特徴はありませんが、古いFirefoxで動作します

メディアフォーマットのブラウザサポート

MP4

ブラウザサポートしているバージョン
IEInternet Explorer 9 以上
FirefoxFirefox 35 以上
Chromeすべて
SafariSafari 3.2 以上
OperaOpera 25 以上

WebM

ブラウザサポートしているバージョン
IE

Internet Explorer:未対応

Microsoft EdgeHTML:EdgeHTML 14 以上

Firefox

Firefox 28 以上

ChromeGoogle Chrome 25 以上
Safari未対応
OperaOpera 16 以上

Ogg

ブラウザサポートしているバージョン
IE

未対応

Firefox

Firefox 3.5 以上

Chromeすべて
Safari未対応
OperaOpera 11.5 以上

video要素の属性について

属性説明
srcurl動画ファイル
controls無しコントローラを表示
posterurlユーザー環境で表示できる動画がない代わりに表示する画像
autoplay無し動画の自動再生
loop無しループ再生
preload

auto(デフォルト)

metadata

none

ページが読み込まれた時点から動画をロードを開始する
muted無しミュート再生
width数値要素の幅
height数値要素の高さ

まとめ

video要素をつかってホームページに動画を設置する方法についてまとめました。

 

HTML5でvideo要素が登場してからは、トップページに動画を使ったサイトもよく見るようになりました。

 

動画の作成自体も、Creative Cloudのおかげで Premiere Pro など、プロ仕様のソフトが使えるようになったことでコストがだいぶ下がったと思います。

 

機会があれば挑戦してみたいですね。

Pocket

ホームページ制作のお見積額が40万円以上で、20%OFFキャンペーン

カテゴリ

人気記事ランキング

  1. 無料で使える明朝体の日本語WEBフォント
  2. Google Mapがエラーで表示されなくなった場合の直し方
  3. WordPressの『get_categories』でカテゴリーリストを自由にカスタマイズする
  4. スマホサイト制作の基礎知識まとめ
  5. Dreamweaverでコメントアウトする方法

最近の投稿

月別アーカイブ

ブログ内検索

ホームページ制作のお問い合わせは横浜のDOEで。