WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： mane
カテゴリー： マークアップ >テクニック

サイトを制作する上で、メインビジュアルに動画を使用することが定番になってきましたね。
動画データをサーバーに直接置いてしまうとサーバー容量を圧迫してしまうため、YouTubeの動画をメインビジュアルに使用することがありました。
その中で、動画がループされる時に、画面が黒くなりローディング画像が流れてしまうということがありました。
解決方法を見つけたので、備忘録を兼ねて紹介いたします。

まず、ソースコードを紹介します。

//プレーヤの準備が完了した後に呼び出される関数
function onPlayerReady(event) {
	event.target.mute();// ミュート（これを設定しないとスマホで流れません）
	event.target.playVideo();// 動画再生

	//ここから本題！
	setInterval(function() {//ループ時のローディング読み込みを防止させる記述
		event.target.seekTo(0);//再読み込みさせる位置
	}, 10000);//10秒毎にこの処理を実行
}

YouTube APIを設置する時に、必ず2行目にある【function onPlayerReady(event)】こちらの記述をしていると思います。
その中に、7行目からの記述を追記していきます。

Point ①　再生の繰り返し設定
（7行目）JavaScriptのsetInterval関数を使用してループ処理を設定していきます。

Point ②　繰り返し再生する位置
（8行目）seekTo()の部分で、再読み込みさせる位置を指定しています。
seekTo()の丸括内の数字を任意の数字に変更することで、動画再生位置を変更できます。
試してみましたが、動画によっては途中からの再生はループする時に動画がカクついてしまうことがあるので、冒頭からの再生をおすすめします。

Point ③　実行処理の間隔を設定
（9行目）【10000】この数字を再生させる動画の時間に変更します。

以上を追記することによって、動画がループするタイミングにローディング画像を表示させることなく、無限にループ再生させることができます。
ぜひ試してみてください。