JSで動画を後から読み込む

こんにちは、ウェブラボ技術メモ第16回目です。

1つのページに複数の動画を埋め込むとページの表示速度が遅くなりますよね。

これを改善するために「最初に代替画像を表示しておき、クリックしたら動画を読み込む」という処理をするJavascriptを実装してみたいと思います。

今回はyoutubeに対応したものを実装していきます。

まずはhtmlのhead内でjquery本体と以下のJavascriptを読み込みませます。

次にhtmlのbody内に代替画像を記述しておきます。

たったこれだけの記述で実装可能です。

youtubeの埋め込みコードのsrc属性をあらかじめJavascript側の配列に入れておき、代替画像をクリックしたら埋め込みコードに置き換えるという処理を行っています。

作成したDEMOはこちらです。

ブラウザの開発ツールなどでファイルのレスポンスの状況を調べてみると、クリックされてから動画を読み込んでるのがわかります。

動画を埋め込んだページの表示速度を改善したいとき、是非利用してみてはどうでしょうか？

余談ですが、動画を埋め込む時には著作権や規約にも気を付けてくださいね。

以上、ウェブラボ技術メモでした。