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. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. 新しい販売形態であるDtoCについて考えてみる
  4. 新型コロナウイルスで日本の働き方改革が起こる

関連記事

  1. Web関連

    ARを活用したビジネス

    スマートフォンが登場してから、急速にスマートフォン用のアプリが増えまし…

  2. Web関連

    料理が上手い人は仕事も出来るのか

    今回はちまたでまことしやかに囁かれている「料理が上手い人は仕事もできる…

  3. Web関連

    基礎からわかるサーバー選び

    サーバーのこと知っていますか?サーバーとはWebページの公開やメー…

  4. Web関連

    Web制作でも重要!顧客満足度を高めるための3つポイント

    ちょっと前にうちの社長が「本を読むときに、オススメ!コレめっちゃ便利」…

  5. Web関連

    SEOの基礎中の基礎

    皆さん調べたいことがあったら検索しますよね。そのときに表示される検索結…

  6. Web関連

    ウェディングトレンドとマーケティング

    こんにちは。ジューンブライドという言葉がありますが、私は5月・6月と友…

おすすめ記事

最近の記事

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

アーカイブ

  1. AI関連

    RPA+AIで考えるビジネス
  2. Web関連

    見てるだけで甘い! スイーツサイトを調べてみた
  3. AI関連

    人工知能(AI)が犯罪防止で安全で安心な未来をつくる!?
  4. Web関連

    地方移住×ローカルWEBメディア
  5. Web関連

    ホームページの更新メンテナンスに役立つPDCAサイクルの基本について
PAGE TOP