サイトの背景に動画を埋め込む時のベストプラクティスについて考えるホームページのトップに動画入れるの、流行ってますよね。(もうちょっと下火になっちゃったかもしれないけど)この間そんな案件があったんですが、わりと色々な方法を試したので備忘録的めも。1.Gifファイルを置く王道のGifファイル。うまく作れれば、一番ローディング時の負荷が少ないのではないかと思っているのですがどうでしょう...?動画や写真からGifファイルを作成するサイトがいくつかあるので、紹介しますね。長いGif作ろうとすると、落ちてしまう...でも短いの作るぶんには手軽に作れてよかったです。写真を30枚くらい使ってここで作成しました。しても良いのであれば、手軽でよし!私はカクカクが気持ち悪かったので、お試しだけ...。写真アップロードのサイズと枚数に制限があるのでご注意を。Youtubeから読み込む自前サーバーに置かなくて良いのでいいかなあと思ってyoutubeからの読み込みも試してみました。APIを使用しての埋め込みです。APIリファレンスはこちら。サンプルコードがリファレンスに載っており、それに要素を足したりすればできるので簡単です。注意点は以下:・HTML5にしか対応していない・ローディングにおよそ3〜4秒かかってしまう場合あり・ブラウザごとに結構仕様が違うらしく、ロゴ非表示とかにしていても一部Androidで出てしまったり...。・諸々のサイズ調節がむずかった(HTMLコーダーがいれば大丈夫かと)上記注意点に関しては以下で対応することをオススメします。・対応していないブラウザ用、かつローディング中にグレーの画面が出てしまうことを防ぐため、ローディング中は仮で画像を置いておく。videoハマったのはサイズ調節部分で、謎にズームアップされてしまって端っこが切れてしまったりしたのですがこちらの方法で解決しました。edges”OptimiseOptionをオフにするだけです。ローディングスピードが遅いのと読み込みをするユーザーの環境画質がだいぶ粗かったりしたので、却下。CDNサービスに動画を置いて読み込む外部サーバーに置く方法であれば、こちらが最も読み込みが早かった!今回はCloudFrontに動画を置いて読み込みにしたのですが、youtubeで平均3−5秒かかっていた読み込み速度が1−2秒くらいになりました。S3に置いてもいいと思います。読み込みはそれなりに時間がかかったので、仮置きのプレビュー画像を置くことをオススメします。webM形式にするmp4のムービーを使おうとしていたのですが、webMがいいんじゃない?と言われて、webMに変換しておきました。webMとは、Googleが開発しているフォーマットで、軽量で高品質を売りにしている動画フォーマットです。こちらもHTML5にのみ対応。contentmp4からwebmへの変換方法mp4からwebmへの変換はブラウザ上でできるものが見つからなかったので、iSkysoftを使用。無料版だと、30秒以上の動画は変換できないので注意です!30秒くらいの動画なら4、5分くらいで変換できたのでお手軽簡単でした。上記が今まで試してみた方法ですが、「いやいや、これが早いよ!」という方法あればぜひ!!!!教えてください。最新の記事まみたす1992年生まれ。知識ゼロ文系女子からSEになっているところ。カメラ、猫、お酒、旅行がすきです。2019年5月18日この記事の内容が役に立ったと思ったら、SNSで記事を共有してもらえると幸いです。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。MeCatstagram。