福岡のホームページ制作会社

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

COLUMNコラム

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動画の埋め込みを行った方が良いと思われます。


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


まとめ


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


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


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


この記事を書いた人 野濱 貴彰 Creative & Development Division