Web全般 wordpress

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

投稿日:2017年11月8日 更新日:

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
   }
   }
   ]
});
});



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

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

指定しているクラス名を間違えないように、.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の使い方

 


-Web全般, wordpress
-, , ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

パソコン

パソコン買うなら

  以前、パソコンを購入するときは近くの電気屋さんに行っていましたが、のちにDELLのオンラインショップで購入するようになりました。 最近では、オリジナルのパソコンを取り扱っているオンライン …

スライドショー条件分岐

スライドショーのショートコードをPCとスマホで変える

今回も引き続き、「Smart Slider 3」を使って条件分岐をやってみました。 なぜ、このようなことをするのかと言うと、 PCでは、横長の長方形(例えば、横幅1900px,高さ600pxくらい) …

adobe用パソコン

Adobe用パソコン

  クリエイター向けパソコン   フォトショップ、イラストレーター、ドリームウィーバーなどAdobe CCソフトウェアの動作確認済パソコンを選ぶことで失敗しないPC選びをすることが …

予約1

MTS Simple Booking-Cで指定した日の指定した時間だけ受け付けないようにする

  この日のこの時間だけ受け付けないようにしたい   無料版の予約システム【MTS Simple Booking-C】はすごく簡単に予約可能なプラグインですが、 ある程度決まったス …

seo対策

WordPressのSEO対策は簡単にプラグインで出来る

SEOとは、Search Engine Optimizationの略で、検索エンジン最適化のことです。 検索することによって表示される順位をより高い順位にすることを目的としています。 まず始めに、Go …