【Vegas.js】動画を使用する際スマートフォンで挙動を振り分ける【ムービー】

公開日:2020年8月1日 2021年9月24日更新

Categoryweb制作

Contents

1 Vegas.jsをPC・スマートフォンで振り分けたい
2 ウィンドウ幅で振り分けてしまう
3 vegas.jsの読み込み・javascriptの記述

Vegas.jsをPC・スマートフォンで振り分けたい

背景画像をアニメーションを付けながら変化させられるVegas.js。ブラウザいっぱいにフル表示できてアニメーションもつけられるので、割と使用する事が多いスクリプトです。

動画も再生する事ができ、個人的にもよく利用しますが、スマートフォンの場合動画が再生できません。デフォルトの機能で代替静止画を挿入できますが、いっその事PCとタブレット・スマートフォンで完全に内容を別けたい。そんな時の備忘録。

ウィンドウ幅で振り分けてしまう

Teratailでも同じような質問があった。

JavaScript - Vegas2で一定以下の横幅へのリサイズを条件に画像を変更したい｜teratail

一応の完結を迎えているようだが、質問者様もまた別の問題を抱えていた模様。回答者様も、オプションで変更出来るとは記載されてますが、やはり思うような挙動をしなかったので、いっその事ウィンドウ幅を認識させて、規定数以上・以下で内容を振り分けてみる。

$windowWidth = window.innerWidth;
$breakPointA = 991;
isMobileSize = ($windowWidth < $breakPointA);
isPcSize = ($windowWidth > $breakPointA);

まずはウィンドウ幅とブレイクポイントの設定。vegas.jsを読み込ませた後の記述にまとめてしまうのが良いでしょう。ここではPCと991px以下のデバイスとしてますが、必要に応じてタブレットとスマートフォン等も振り分けてください。こちらが参考になりました。

JavaScriptでwindowの幅による条件分岐を作る方法｜DESIGNREMARKS

vegas.jsの読み込み・javascriptの記述

vegas.jsの読み込み等は公式その他で詳細記載されてますので割愛します。

以下javascriptの記載。対象のエレメントに"vegas"とIDを振っています。動画はループ無し。
また、念のため何らか理由でPCで動画が表示されない場合用の代替画像も表示するようにしてます。

$(function() {
	$('#vegas').vegas({
		slides: [
			{ src: 'PC表示画像' },
			{ src: 'PC表示動画の代替画像',
				video: {
				src: [
					'PC表示動画'
				],
				loop: false,
				}
			},
			{ src: 'PC表示画像' },
			{ src: 'PC表示動画の代替画像',
				video: {
				src: [
				'PC表示動画'
				],
				loop: false,
			}
		},
		{ src: 'PC表示画像' },
		{ src: 'PC表示動画の代替画像',
			video: {
			src: [
			'PC表示動画'
			],
				loop: false,
			}
		},
	],
// オプションを記載 //
});
});
// 991px以下のデバイスここから //
if(isMobileSize){
	$('#vegas').vegas({
		delay: 3000,
		slides: [
			{ src: '991px以下のデバイス画像' },
			{ src: '991px以下のデバイス画像' },
			{ src: '991px以下のデバイス画像' },
		],
	// オプションを記載 //
	});
};

これでvegas.jsがウィンドウ幅での振り分け可能になりました。