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

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

関連記事

360カメラ

できた!360度カメラの画像をWordPressに

  プラグインで簡単に!   360度カメラで撮影した画像をWordPress(ワードプレス)の固定ページや投稿ページまたは、カスタム投稿タイプなどに使いたいときに便利なのが、 『 …

Google Doc Embedder

WordPressでPDFを埋め込むプラグイン

  Google Doc Embedder   WordPressの記事内や固定ページ内で、PDFのファイルを利用したい、またはダウンロードできるようにしたい時に使うプラグインです …

秒後に切り替わる

WordPress 指定したページにジャンプさせる方法しかもフェードインで滑らかに表示

【自動で切り替わる】【何秒後に切り替わる】【指定したページにジャンプさせたい】 たぶんこれを使う理由としては、 ・新しくWebサイトを作り直した時に、古い方のURLにアクセスした人に自動で新しいURL …

画面サイズ取得

ヘッダー以外の画面サイズ取得をやってみた

  ワードプレスを使っていて、最初に表示されるページのデザインで使えそう。 全画面表示にするために、ディスプレイのサイズ(高さ)を自動で取得して表示させる方法は試したことがありましたが、 今 …

wordpressプラグイン

WordPressプラグインおすすめ10選【2017年度】

  1.セキュリティー Akismet Anti-Spam 自動的にすべてのコメントをチェックし、スパムのように見えるものをフィルターします。   2.バックアップと復元 Updr …