Web関連

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

0

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

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

メリットは?

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

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サイズの動画を使ったサイトも増えてくるのでしょうか?
色々と夢は膨らみそうです!

 

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

 

 

http://sleep.muji.net/ja/(最終閲覧日:2015/07/10)

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

0

どんな企業にも必ず必要!IT資産管理ってなに?前のページ

データセンターってなに?~初めて行ってみた!次のページ

ピックアップ記事

  1. AIに求められているものは、実は意外な物だった
  2. 新しい販売形態であるDtoCについて考えてみる
  3. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  4. 新型コロナウイルスで日本の働き方改革が起こる

関連記事

  1. Web関連

    Web制作にも使えるかもしれない面白い心理学を集めてみました。No,3

    前々回はWeb制作にも使えそうな面白い心理学、前回は営業に使えそうな心…

  2. Web関連

    Web制作会社が教えるDDos攻撃からのWEBサイトを守る方法

    WEBサイトを運営している際、気にしなければならないのが外部からの不正…

  3. Web関連

    お値段以上?シェアリングエコノミー

    ここ最近、やたらと耳にするような気がするんですが...知ってますか?…

  4. Web関連

    お財布にも地球にも優しい!余剰食品がゲットできる「食品ロス削減アプリ」

    こんにちは。糖質制限ダイエットに苦しんだり、諦めてマックを食べたり…

  5. Web関連

    今さら聞けない!アクセスログ解析のやり方コラム ~3つの基本指標編~

    つい先日、よく行くクライアント先まで外出に行く途中、電車の中で一緒にい…

  6. Web関連

    パララックスデザインとUI・UX

    jQueryが普及し、フラットデザインの流行もあいまって、最近はパララ…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    世界のブラウザシェアを把握できる「StatCounter」
  2. Web関連

    日用消耗品業界について書きます
  3. Web関連

    無料(フリーソフト)だけど高機能!人気・おすすめペイントソフト4選
  4. Web関連

    WEB制作で考えるべきはここだった!心理学から学ぶデザイン
  5. Web関連

    ECアプリにした方が良い3つのワケ
PAGE TOP