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

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

関連記事

Google FontがEdgeで表示されない

Google FontsがEdgeで表示されない場合

  <link>で読み込んだのにEdgeで正しく表示されない   <link href=”https://fonts.googleapis.com/css2?fa …

動画配信サービス

気になる動画配信サービス

  Amazonプライム物足りない   Amazonプライムの無料体験を利用してみて感じたことは、 動画も音楽も『おまけ』みたいなもの ただ、料金的には『月400円の契約』『年間3 …

画像を順番に表示

画像を順番に重ねて表示

  画像を順番に重ねて表示したい。 画像を遅らせて表示したい。 画像に動きをつけたい。   今回は、WordPressでトップページ(フロントページ)のみ、動きのある画像を表示した …

wifi

WiFiどれがいい?

  Wi-Fi特集   結局どれにすれば良いのか悩んでしまうのでおすすめをご紹介!   海外WiFi   イモトのWiFi Wi-Ho!(ワイホー) 世界各国( …

CSSのcolumnでカテゴリー一覧ページにランダム表示

CSSのcolumnでカテゴリー一覧ページにランダム表示

  アーカイブの一覧表示をランダムにする   前回の記事に関連して、今回はアーカイブのページで試してみたいと思います。 カテゴリーなどの一覧表示に使用する『archive.php』 …