画像と動画を混合させて表示VEGAS

動画も一緒に表示させる方法

 

動かしてみた方法は以下の通りです。

 

1.先に動画を表示して、次に画像を表示する方法

 

jQuery(document).ready(function(){
jQuery('.top-img').vegas({
   overlay: 'https://○○○.com/wp-content/themes/△△△/images/overlays/04.png',
   transition: 'fade',
   transitionDuration: 4000,
   delay: 10000,
   animation: 'random',
   animationDuration: 20000,
   timer: false,
   slides: [
   {
   video: {
   src: [
   'https://○○○.com/wp-content/themes/△△△/images/☆☆1.mp4',
   ],
   loop: true,
   mute: true
   }
   },
   { src: 'https://○○○.com/wp-content/themes/△△△/images/□□1.jpg'}
   ]
});
});

 

2.先に画像を表示して、次に動画を表示する方法

 

jQuery(document).ready(function(){
jQuery('.top-img2').vegas({
   overlay: 'https://○○○.com/wp-content/themes/△△△/images/overlays/04.png',
   transition: 'fade',
   transitionDuration: 4000,
   delay: 10000,
   animation: 'random',
   animationDuration: 20000,
   timer: false,
   slides: [
   { src: 'https://○○○.com/wp-content/themes/△△△/images/□□1.jpg'},
   {
   video: {
   src: [
   'https://○○○.com/wp-content/themes/△△△/images/☆☆1.mp4',
   ],
   loop: true,
   mute: true
   }
   }
   ]
});
});



上記２通りを簡単に説明します。

わかりやすくするため、ほとんど同じような設定にしていますが、

指定しているクラス名を間違えないように、.top-imgと.top-img2に分けています。

前回の記事でも書きましたが、このクラス名は自分の好きな覚えやすい名前でOKです。

overlay: 'https://○○○.com/wp-content/themes/△△△/images/overlays/04.png',

については、うっすらと黒がかかったようにしていますので、お好みでpngファイルを変更するか、外してください。

あとは、動きの好みによって、fadeにするのかslideにするのかを決めてください。

 

気をつけなければいけないのが、jQuery系などのプラグインは、ブラウザによってやバージョンによって動かないこともあります。

また、PCでは動くが、スマホでは動かないこともよくあります。

逆にいえば、プラグインなどの利用、または容量の大きい動画や画像でスマホの表示速度が遅くなるよりは、スマホの場合は画像だけ見せる方法も良いかも。

そういった切り替えのための記述を加えることによってきれいなサイトが作れるかも。

 

ここまできたら条件分岐までやってみよう！

 

スマホとPCの条件分岐でVEGASを切り替える方法

 

次は、スマホとPCの条件分岐でVEGASを切り替える方法をやります。

前回の記事はこちら→VEGAS BACKGROUND SLIDESHOWの使い方