動画スライドショー

<!--▼▼▼▼▼ここから「動画スライドショー」-->
<div id="mainimg">
<video muted playsinline></video>
<video muted playsinline></video>
<video muted playsinline></video>
</div>
<!--▲▲▲▲▲ここまで「動画スライドショー」-->

tp_lp3のメイン画像の種類について

フォルダ名の末尾が「_movie3」となっているタイプは3枚の動画で構成された動画スライドショーです。枚数変更可能。
フォルダ名の末尾が「_movie1」となっているタイプは1枚の動画のみが表示されるタイプ。
ファイル名の末尾が「_slide」となっているタイプは3枚の写真で構成されたスライドショーです。枚数変更可能。

別のテーマに搭載されているメイン画像を使いたい場合は

例えば、1枚の動画のみのテンプレはtp_lp3_biz_movie1のみですが、このメイン画像を他のタイプに使いたい場合などの説明です。

使いたいメイン画像のフォルダに入っているcss/mainimg.cssと、js/main.jsを上書きし、該当箇所のhtmlコードをコピペすれば使えます。
素材そのものも必要なので、「とりあえず動作確認だけ」という場合は素材もテンプレから移動して下さい。

設定は

cssフォルダの「mainimg.css」と、jsフォルダのmain.js内の「動画スライドショー」にあります。

動画はできるだけ圧縮し、mp4形式にして下さい

スマホ撮影した状態だと容量が大きかったり拡張子がmp4ではなかったりする場合があるので、その際はマニュアルを読んで動画を編集して下さい。
動画の容量が大きすぎるとスライドショーの動作に問題が出る可能性があります。

スライドの入れ替わり(フェード)にかける時間

mainimg.cssの
transition: opacity 0.5s ease;
の0.5で変更できます。

1枚あたりの表示時間は

main.jsの「動画スライドショー」内にある、
}, 4000); //4秒ごとにスライド
の4000の数字で変更できます。

画面いっぱいの範囲でトリミングされます

切り抜かれてもおかしくない動画を使って下さい。

画面が横長の場合と縦長の場合で変更できます

main.jsの「動画スライドショー」内にある、
'1-tate.mp4','2-tate.mp4','3-tate.mp4'
の行は縦画面用。
'1-yoko.mp4','2-yoko.mp4','3-yoko.mp4'
の行は横画面用です。
どちらも同じ動画でいい場合はファイル名を両方揃えておけばOKです。

動画を追加したい場合

main.jsとhtml側にそれぞれ以下のように追加して下さい。動画ファイル名は任意のもので構いません。
'1-tate.mp4','2-tate.mp4','3-tate.mp4','4-tate.mp4'
'1-yoko.mp4','2-yoko.mp4','3-yoko.mp4','4-yoko.mp4'

<!--▼▼▼▼▼ここから「動画スライドショー」-->
<div id="mainimg">
<video muted playsinline></video>
<video muted playsinline></video>
<video muted playsinline></video>
<video muted playsinline></video>
</div>
<!--▲▲▲▲▲ここまで「動画スライドショー」-->

フリー動画も配布中です

以下からお好きな動画をDLして入れ替えて頂いてもOKです。
このテンプレートの配布時点ではまだ数は少ないのですが、今後どんどん追加予定です。
>> 無料の動画素材