サイトの背景に動画を埋め込む時のベストプラクティスについて考える

ホームページのトップに動画入れるの、流行ってますよね。
(もうちょっと下火になっちゃったかもしれないけど)

この間そんな案件があったんですが、わりと色々な方法を試したので備忘録的めも。

1.Gifファイルを置く

王道のGifファイル。
うまく作れれば、一番ローディング時の負荷が少ないのではないかと思っているのですがどうでしょう…?

動画や写真からGifファイルを作成するサイトがいくつかあるので、紹介しますね。

動画から:
gifs
サイトも安定してるし結構いい感じに作成できました

Gif化
長いGif作ろうとすると、落ちてしまう…でも短いの作るぶんには手軽に作れてよかったです。

写真から:
GIFアニメ作成
写真を30枚くらい使ってここで作成しました。
カクカクしても良いのであれば、手軽でよし!
私はカクカクが気持ち悪かったので、お試しだけ…。
写真アップロードのサイズと枚数に制限があるのでご注意を。

Youtubeから読み込む

自前サーバーに置かなくて良いのでいいかなあと思ってyoutubeからの読み込みも試してみました。
IFrame Player APIを使用しての埋め込みです。
APIリファレンスはこちら。
サンプルコードがリファレンスに載っており、それに要素を足したりすればできるので簡単です。

注意点は以下:
・HTML5にしか対応していない
・ローディングにおよそ3〜4秒かかってしまう場合あり
・ブラウザごとに結構仕様が違うらしく、ロゴ非表示とかにしていても一部Androidで出てしまったり…。
・諸々のサイズ調節がむずかった(HTMLコーダーがいれば大丈夫かと)

上記注意点に関しては以下で対応することをオススメします。
・対応していないブラウザ用、かつローディング中にグレーの画面が出てしまうことを防ぐため、ローディング中は仮で画像を置いておく。
参考:Image preview before loading video

ハマったのはサイズ調節部分で、謎にズームアップされてしまって端っこが切れてしまったりしたのですがこちらの方法で解決しました。
Fullscreen video “losing edges”
OptimiseOptionをオフにするだけです。

ただ、やっぱりローディングスピードが遅いのと
読み込みをするユーザーの環境画質がだいぶ粗かったりしたので、却下。

CDNサービスに動画を置いて読み込む

外部サーバーに置く方法であれば、こちらが最も読み込みが早かった!
今回はCloudFrontに動画を置いて読み込みにしたのですが、youtubeで平均3−5秒かかっていた読み込み速度が1−2秒くらいになりました。
S3に置いてもいいと思います。

ただやっぱり読み込みはそれなりに時間がかかったので、仮置きのプレビュー画像を置くことをオススメします。

webM形式にする

mp4のムービーを使おうとしていたのですが、webMがいいんじゃない?と言われて、webMに変換しておきました。
webMとは、Googleが開発しているフォーマットで、軽量で高品質を売りにしている動画フォーマットです。
こちらもHTML5にのみ対応。
普通にvideoタグで埋め込みますが、対応していないブラウザにも配慮してこんな感じで埋め込んでおきました.

<video controls width="400" height="400"
autoplay loop muted
poster="poster.png">
<source src="background-video.mp4" type="video/mp4">
<source src="background-video.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video. Here is a <a href="background-video.mp4">link to the video</a> instead.</p>
</video>

参考:Video and audio content

mp4からwebmへの変換方法

mp4からwebmへの変換はブラウザ上でできるものが見つからなかったので、iSkysoftを使用。
無料版だと、30秒以上の動画は変換できないので注意です!
30秒くらいの動画なら4、5分くらいで変換できたのでお手軽簡単でした。

上記が今まで試してみた方法ですが、「いやいや、これが早いよ!」という方法あればぜひ!!!!教えてください。

この記事の内容が役に立ったと思ったら、SNSで記事を共有してもらえると幸いです。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)