HTML5の動画のメリット│東京のWeb制作会社の動画関連コラム

Columnコラム

Web制作

ホームページ制作会社が紹介するHTML5の動画のメリット

ホームページ制作会社が紹介するHTML5の動画のメリット

2015/07/10
このエントリーをはてなブックマークに追加

こんにちは!デザイナーの角田です。
皆さんは使ったことはありますか?きっとありますよね、Youtubeです。
そんなみんな大好きYoutubeですが、今までは動画の再生にはAdobeのFlashPlayerを使用していましたが、2015年の1月からはHTML5を使用したものに切り替わりました。
何か変わったのか?と言われると、特に違いはないような・・・?

と、いうわけで今回はHTML5での動画再生について簡単にまとめてみました。

html5kakuta_20152001.png

メリットは?

違いを分かりやすくするために、今回は簡単にメリットを紹介します。
一つ目は誰もが思い当たることだと思います。

1.Flashに対応していないデバイスでもアニメーションが見れる

一番のメリットはこれでしょうね。
iPhone、iPadなどのFlashPlayer非対応のデバイスを持ったユーザーにとっては嬉しいことです。
わざわざ専用のアプリに移行しなくても、ブラウザ上でそのまま動画が見れます。便利な世の中になりましたね!
しかしFlashを使用したサイトは減りつつあるものの、実際はまだまだ存在します。
フルFlashを使用したサイトもまだありますよね、全く見れません。(←iPhoneユーザー)

PC向けのブラウザゲームもまだまだFlash対応ですが、これらもいずれHTML5になったりはしないのでしょうか。
iPadで艦これが出来たら良いのになあ。
・・・おっと、余談でした。

2.ファイルサイズが小さくなった

そのままの意味ですが、軽くなったようです。
軽くなったことにより、何かと話題の4Kサイズの動画も配信が出来るようになったり、
動画再生までのスピードも、これまでに比べると15~80%ほど早くなったとか。
こればかりは体感してみないと何とも言えませんが、4Kサイズの動画が配信できるようになるのは良いですね~!
ビデオカメラでも、4Kサイズに対応したものが続々登場しているので、
これからもっと、4Kサイズの動画を使ったサイト等が増えるのでしょうか・・・!

3.記述が分かりやすくなった

HTML5では「header」「main」「footer」などなど、要素がたくさん追加されたことはご存知でしょうか?
その追加された要素の中の一つ「video」が、今回挙げているHTML5での動画再生に使われるのです。
ということで、従来とHTML5での記述の仕方の違いを見てみましょう。


◇従来のFlahsPlayerを使用した記述例

<object id=0 type="動画の形式" data=swfファイル名> <param name="パラメータ名" value="flv=動画のファイル名&title=タイトル&margin=0" /> </object>

.・・・色々と必要な要素があります。少しややこしい!
では、HTML5での記述方法を見てみましょう。

◇HTML5を使用した記述例

<video src="動画.mp4" ></video>

なんと、たったこれだけ。ねっ簡単でしょう?
他にも、自動再生したり、動画のサイズを指定したりと色々要素を付け足すこともできます。

さらに、最近見ることが多くなってきた、背景に動画を使ったサイト。
あれも実は、HTML5のVideoタグを使用しているのです。
前項にも書きましたが、4Kの動画も増えてきているので
背景にキレイな4Kサイズの動画を使ったサイトも増えてくるのでしょうか?
色々と夢は膨らみそうです!

最後に、背景に動画を使ったサイトを一つ紹介して今回は終わりたいと思います。

html5kakuta_20152002.jpg

http://sleep.muji.net/ja/

無印良品の、まくらを紹介したサイト。個人的に欲しいです、これ。

text_totop