こんにちは。デザイントランスメディアの野濱です。
弊社では「動画制作プラン」を提供しており、
近年では動画での訴求を行なっていく事例も増えております。
しかし、html内にvideoタグで動画を埋め込めばいいというわけではなく、そこには最適な方法があります。
例えばWEBサイトのトップページの最初に表示される部分（ファーストビューといったりします）に自社にとって伝えたい理念や自社の雰囲気などが表示されればユーザーの目を引き、ブランディングにも繋がりますよね。
今回はその動画を埋め込むことによっての基本的な知識・メリットと、TIPSをお伝えしたいと思います。
目次
3つの埋め込み方法
直接VIDEOタグでの埋め込み
今回の主題ですが、mp4やogvなどの動画ファイルを直接HTMLに読み込む方法です。
この場合、動画埋め込み箇所のレイアウトや表現方法の縛りが少なく、自由に動画を表示する事が可能です。
しかし、直接埋め込むが故にファイルサイズを気にしたり、調整の必要が多くあったりと工数に影響がでたりします。
YOUTUBEでの埋め込み
自身でYOUTUBEチャンネルを解説し、そこにアップロードした動画を埋め込む方法です。
いわゆるストリーミングといわれる読み込み形式なので、WEBサイトへの負荷（重くなったりなど）が少ないのですが、ユーザーが意図的に再生しなければならなかったり、そもそもYOUTBEのサービスに依存しているので、YOUTUBEに障害が起きたときなどは閲覧ができなくなったりします。
更に、埋め込んだ動画にはYOUTUBEのアイコンやシークバーなどが最初から表示されたりと、表現できる幅がせまくなってしまいます。
javaScriptでのモーション
正確には一般的な動画と意味合いが違ってくるのですが、事前に用意したアニメーションの素材等をjavaScriptと呼ばれる言語で動かすパターンもあります。
こちらも表現の幅は広がり、容量もmp4などと比べると少なめに住みますが、実装するコストが多くかかったりしてしまいます。
そもそも容量が多いとどうなるのか？
WEBサイトを閲覧する際に負荷がかかり、サイトへのアクセス速度が遅くなってしまいます。 アクセス速度が遅いと、SEO（検索順位）に影響が出たり、直帰率（ユーザーが1ページだけ閲覧してすぐサイトを閉じてしまう割合）が増えてしまいます。 サイト高速化については弊社のこちらの記事、動画容量削減に関してはこちらの記事、
そもそもの動画制作から見直したい方はこちらの記事がおススメです。是非ご一読ください。
埋め込みの注意点
動画のファイル形式
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つ、
ファイル形式と容量です。
この前提をクリアして初めて、色々カスタマイズができるのだと思います。
なので技術的なことはまた改めてお伝えしようと思います。
