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

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

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

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

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

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

$(function (){
	var youtube = new Array(
		'https://www.youtube.com/embed/qLUnhoeaMwA?rel=0',  //1つ目の動画　※youtubeの埋め込みコードのsrc属性をここに入れてください
		'https://www.youtube.com/embed/2rGTay3d0PQ?rel=0',  //2つ目の動画　※youtubeの埋め込みコードのsrc属性をここに入れてください
		'https://www.youtube.com/embed/Lss9YMX09ew?rel=0'   //3つ目の動画　※youtubeの埋め込みコードのsrc属性をここに入れてください
	);
	$('.youtube').each(function(index, element) {
		$(this).click(function (){
			$(this).after('<iframe width="480" height="270" src="'+youtube[index]+'&autoplay=1" frameborder="0" allowfullscreen></iframe>').remove(); //ここにsrc属性を変数に置き換えた埋め込みコード
		});
	});
});

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

<p><img class="youtube" src="img/movie_click.gif" width="480" height="270"></p>  //1つ目の動画の代替画像
<p><img class="youtube" src="img/movie_click.gif" width="480" height="270"></p>  //2つ目の動画の代替画像
<p><img class="youtube" src="img/movie_click.gif" width="480" height="270"></p>  //3つ目の動画の代替画像

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

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

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

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

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

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

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