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 アナリティクス

GoogleアナリティクスをWordPressに導入設置

  自分のブログやサイトを持っている方にとって必須ともいえるアクセス解析ツールです。このツールを利用することによって、ブログやサイトの細かなアクセス状況によって分析することができるようになり …

ブログとは

ブログとは

ブログ (blog) は、ウェブサイトの一種で、「WebをLogする」という意味でウェブログ (weblog) と名付けられ、それが略されてブログ(Blog)と呼ばれるようになった。 作者の個人的な日 …

オンマウス

マウスオーバーでリンク画像に変化をつける

  自分がしたことを忘れないように記事にしました。 やりたかったのは、マウスオーバー・オンマウスでリンク画像がだんだん大きくなり、上にのせていたマスクがなくなって画像がクリアになること。 い …

ショートコード

ショートコードでPHPファイルを読み込む

便利で何かと使いやすいかな?って思いますので、とりあえずやってみました。 固定ページを書いているときに、別のテンプレートファイル(phpファイル)を読み込みたいときに、直接書くのはやめた方が良いので、 …

seo

seo

SEOって何? もうすでに知っている方もたくさんいるかもしれませんが、 Webサイトを作成する人は気になる言葉ですね。 検索エンジン最適化( Search Engine Optimization)のこ …