動画メディアの仕組みにめっぽう詳しい、ユゲタです。
Youtubeをはじめ、インターネット経由で自宅で映画やドラマを観る時代になりましたね。
まだまだ地上波テレビは、視聴率もそこそことっていて、広告効果も有るようですが、それも、あと数年で、世代交代が始まり、
四半世紀語ぐらいには、テレビよりもネットを観る世代が主流になってしまうでしょう。
その時の広告代理店の様変わりっぷりは、今からどうなるか予想することができません。
この予想を考えるのも楽しいですが、個人レベルでホームページを立ち上げるケースも多いと思い、その個人や企業のホームページで動画を設置するケースも増えてきているようで、
そんな時に、読み込みの遅いページに出会って、離脱が多いページが多いように思えたので、今回は簡単なやりかたで、ページ読み込みをスムーズに出来る方法をブログに書きたいと思います。
動画設置ページの気をつける点
4G,5Gが当たり前になってきて、3GやLTE時代よりも、回線が高速になったとはいえ、動画をサックサクに見られる環境として十分とは言えないと感じています。
同時に、ホームページを立ち上げている側としては、回線速度が遅い人がページを見に来た時に、トップページバナーに設置してある動画が原因で離脱率が高くなるというのは、絶対に避けたいでしょう。
WEB制作を行っている人は、本番環境などでの表示テストは、ロンチ語に行うケースも多く、ローカル環境では、ノンストレスでの高速環境で動画表示ができてしまうため、
好き放題詰め込んだ長尺動画を本番環境にアップしていざロンチ！となった後で、「あれ？動画読み込みが遅れてくるよ・・・」と、いっこく堂さながらのwebブラウザの挙動に慌てふためく人も少なくないとか、あるとか・・・
ここで、ストレスのないテスト環境で納品チェックを行って完了をしてしまっている場合、そのままGOしてしまうとして、クライアントが泣き寝入りする話を何度か聞いたことがありますが、
こうした時にどういう対応をするべきなのかいくつか考えてみました。
方法その1「動画を極限まで軽くする」
おそらく殆どの場合が、mp4フォーマットで設置されていると思いますが、まずスマホで撮影した動画サイズをそのままサイトにアップしているような場合は言語道断で、
動画を適正サイズまでダウンさせて、再生フレーム数、クオリティ転送レート、サウンド（無しにする）という調整を行った上で、出来ることなら数ＭBレベルまでサイズを縮小させてみましょう。
ユゲタの調査結果では、めちゃくちゃ早いサーバー（回線）出ない限り、2MBを超えた当たりから、ページの読み込みが遅いな〜と感じ始めます。
ちなみに、サウンドを無しにするのは、webページが読み込まれた時に、自動再生する場合、音声再生をすることができないので、通常は、音声をカットした動画を設置するのがセオリーのためです。
どうしても音声を付けたい場合は、この部分は無視してもらって構いませんが、音声データ容量もバカにできないので、是非仕様検討したほうがいい事をオススメします。
方法その2「ストリーミング対応する」
そして、それでも、5MB、10MB、それ以上になってしまう場合、ストリーミングフォーマットに対応してみましょう。
m3u8フォーマットというApple社が開発したフォーマットを使うと、その昔流行った高価なストリーミングサーバーなどを使わずに、
普通の公開webサーバーだけで、ストリーミング構築ができてしまいます。
ただ、MicrosoftEdgeブラウザ以外は、既存のブラウザで、このフォーマットが対応していないのですが、
hls.jsというライブラリを使うと、このm3u8フォーマットも、通常の動画ファイルとして同じように扱うことができるようになります。
詳しくは下記ページにやり方が掲載されているので、御覧くださいませ。
hls.jsで実装する動画ストリーミングの分かりやすい解説
方法その3「javascriptを使って遅延読み込みをさせる」
WEBブラウザでWEBページを見る時に動画ファイルが遅くなるブラウザとして、safariブラウザがあります。
これは、ユゲタ調べで確認しただけで、それぞれのブラウザの読み込み仕様を確認したわけではないのですが、
safariで見た時に、ページの表示が、動画読み込みの後で行われるため、ページ読み込みに非常に長い時間が掛かっているように思えてしまいます。
これを回避するために、次のように記載すると、簡単にページ表示後に、動画が読み込めるいい感じのページ表示ができるようになります。
<input type="hidden" name="video_src" value="example.mp4">
<video cautoplay muted playsinline loop poster="example.jpg"></video>
<script>
window.addEventListener("load" , function(){
let src = document.querySelector("input[name='video_src']").value;
let source = document.createElement("source");
source.src = src;
document.querySelector("video").appendChild(source);
});
</script>
ポイント解説
まず、inputのtype="hidden"で、動画のファイルパスを指定しておきます。
※別のフォーマットにしても問題ないです、videoタグのdata属性で扱ってもいいかもですね。
そして、windowのonloadイベント後に、sourceタグを作ってそのに任意のsrcを当てがってやるというやりかたです。
あと、videoタグにposter属性を付けて、1フレーム目の画像を入れておくと、静止画ですが、動画再生を待っている感じが出るので、オススメです。
くるくるの読み込みアイコンを表示する方法は、体感的に読み込みが遅く感じてしまうので、できればposterだけで完結させたほうがいいですね。
あまり大きすぎの動画を使う場合はストリーミングをオススメします。
最後に
いかがでしたけ？
動画をwebページで表示するテクニック、参考になりましたか？
え？youtubeのembedタグの方が楽？
そういやそうですね。
自己管理するかしないかという点で取捨選択されるのがいいかと思います。
