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

関連記事

  1. Web関連

    最近話題の「ニュースアプリの傾向」で検索してみた

    どうも!完全主観をモットーに記事を作成していく コンサル(仮) の…

  2. Web関連

    ライバルサイトに差をつける!インフォグラフィックを作るための5つの手順

    この前、とあるサイトのデザインをしていた時にふっと思いました。…

  3. Web関連

    Webサイトは公開後が大切

    私が初めてインターネットを使用したのは、約20年前、小学校で行われた授…

  4. Web関連

    聞いた事ある?マーケティングオートメーション

    なにやら巷には「マーケティングオートメーション」なるものがあるようで、…

  5. Web関連

    【Web制作会社が教える】10分でわかる!?フラットデザイン実践のポイント

    ファッションと同じように、webデザインにも、その時期ごとの流行があり…

  6. Web関連

    【ホームページ制作】GUIの歴史を辿ってみた

    みなさんはGUIという言葉はご存じでしょうか?ぐいぐい~。GU…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    E-Sportsは日本で普及するのか
  2. Web関連

    ブラウザシェアランキングから見るブラウザの特徴
  3. AIさくらさん

    商業施設のインフォメーションをAIさくらさんが担う!
  4. Web関連

    なぜコスプレをするのか、ハロウィンが終わってから冷静になって考えてみる
  5. Web関連

    面接官になったらこれだけは聞いておくべき3つの質問
PAGE TOP