1. トップページ
  2. コラム
  3. webサイトにvideoタグで動画を埋め込む際のTIPS

webサイトにvideoタグで動画を埋め込む際のTIPS

こんにちは。デザイントランスメディアの野濱です。

僕はたまに気が狂ったように動画を埋め込みたくなるんですが、
動画といってもyoutubeの動画をiframeで表示させるのではなく、
videoタグを使っての表示です。

弊社では「動画制作プラン」を提供しており、
近年では動画での訴求を行なっていく事例も増えております。

しかし、html内にvideoタグで動画を埋め込めばいいというわけではなく、そこには最適な方法があります。
今回はその基本的な知識と、TIPSをお伝えしたいと思います。

動画のファイル形式


videoタグがサポートしているファイル形式は、以下の3つになります。
・mp4
・webm
・ogv

例えばmp4では再生できない環境でも、webmやogvでは再生できる場合もありますので、
動画ファイルは上記3つを用意しておきましょう。

ソース例


<video controls autoplay poster="firstframe.jpg" width="320" height="240">
<source src="sample.mp4">
<source src="sample.ogv">
<source src="sample.webm">
<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>

この例の場合、mp4が優先して再生されますが、mp4が再生できなかったらwebmが再生されるといった仕組みになっています。

容量問題


動画を人に見てもらいたい時、より画質の良い映像を見てもらいたいと思うのが人ってもんですが、時には画質より容量を気にしなければなりません。
videoタグで動画を埋め込む場合、webサイトアクセス時にそのまま動画を読み込むので、
容量が大きい動画ファイルだと表示されるまでめっっちゃくちゃ時間がかかります。
加えて、容量が大きい動画を埋め込んだサイトに同時に大量のアクセスされると、
サーバーが落ちます。つまりサーバーに負荷がかかりすぎて耐えきれなくなり、サイトが表示されなくなります。

これは個人的所感にはなりますが、直で読み込む場合には画質より容量を優先した方がいいと考えてます。
サーバーが落ちて機会損失に繋がるよりは、画質が良くなくてもユーザーにちゃんと見てもらって訴求を行う方が大事だと思います。
理想としては1MB〜5MBぐらいでしょうか。
画質を落としても再生時間が長い場合は容量を削減しきれない可能性がありますので、
どうしても容量を落としきれない動画を載せたい場合は
youtubeにアップロードしてyoutube動画の埋め込みを行った方が良いと思われます。

videoタグで埋め込む際の動画の軽量化方法 はこちら。

youtubeの動画を埋め込むケースのメリットとしては、サイト自体の読み込みとは別に、
youtube側で読み込みを行うのでサーバーの負荷が軽減されるのです。
しかし、デメリットとしてはyoutube動画はインターフェースを完全に非表示できなかったりするので、
videoタグもyoutube埋め込みも一長一短ではあるのですが…。

videoタグとyoutube埋め込みそれぞれのメリットデメリット

では、ここでvideoタグとyoutubeの動画表示のメリットデメリットを紹介していきましょう。

videoタグのメリット

・動画を直に読み込む為、再生時のカスタマイズが容易
・動画配信サービスに依存しない為、障害など気にせず常に再生が可能
・動画の差し替えも新しい動画を上書きするだけで容易に可能

videoタグのデメリット

・容量によってはサーバーに負荷がかかり、サイトの品質に影響する
・ブラウザによっては実装できない機能がある

youtube埋め込みのメリット

・ストリーミングで動画を読み込む為、サーバーへの負荷が少ない
・ブラウザ関係なく再生が可能

youtube埋め込みのデメリット

・配信サービス依存のため、障害等が起こった場合再生が出来なくなる
・実装できる機能が限られている
・動画の差し替えの際、都度アップロードし直さなければならない手間がある

おおよそはこんな感じでしょうか。

そもそもサイトが重くなると何が悪いの?

じゃあそもそもなんでサイトが重くなると良くないの?
という話なのですが、簡単にお伝えすると、
・ユーザーストレスによるサイト離脱
・SEOへの影響
上記2点が主な理由となります。

当然、ページの表示が遅いと閲覧しているユーザーはストレスに感じますよね。
アメリカのアクセスツール会社の統計によると、3秒以上表示を待たされるだけで40%のユーザーが離脱してしまうそうです。
加えて、SEO(検索結果の表示優先度)にも影響があります。
検索エンジンは、サイトを一つ一つ巡回してサイトを評価していきます。
検索エンジンから「このサイトは表示速度が遅い」と判断されてしまえば、それだけで検索結果の順位が低くなってしまうのです。そうなると当然閲覧者の低下に繋がりますよね。
なので要件や環境、状況を考え、動画を埋め込む際にはvideoタグなのかyoutube埋め込みなのかをしっかり考えて実装しなければならないのです。

まとめ


今回は技術的な点は度外視して、基本的な事を記しました。
技術的なことを述べると自動再生やループ再生の方法など色々あるのですが、
それは動画をちゃんと埋め込むことが出来てからの話なので、
今回は基本的な事だけをお伝えしました。

大事な事は大きく分けて2つ、
ファイル形式と容量です。

この前提をクリアして初めて、色々カスタマイズができるのだと思います。
なので技術的なことはまた改めてお伝えしようと思います。

ホームページ・ECサイト運用に関する情報をメルマガで配信中!
WEB担当者様向けのお役立ち情報を無料でご案内しております。
登録は下記フォームから!


この記事を書いた人

野濱貴彰

Creative & Development Division