テック

Fancybox v5で動画／音楽ギャラリーを作る方法

2023年5月27日 by single コメントはまだありません

Contents

1 Fancybox v5で動画／音楽ギャラリーを作る方法
2 動画ギャラリーを作成する
3 音楽ギャラリーを作成する
- 3.1 HTMLマークアップ
  - 3.1.1 グルーピング
4 ご参考
- 4.1 関連ページ

Fancybox v5で動画／音楽ギャラリーを作る方法

サンプル

動画リスト

YouTube

ショパン

夜想曲第1番変ロ短調作品9-1 夜想曲第8番変ニ長調作品27-2 夜想曲第2番変ホ長調作品9-2

HTMLソース

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
  <title>fancybox v5 demo(1)</title
  <link rel="stylesheet" href="/assets/fancyapps/ui-main/dist/fancybox/fancybox.css" />
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
  />
</head>
<body>
  <p>
    <h4>動画リスト</h4>
    <!-- HTML5 video custom dimensions -->
    <a data-fancybox="video-gallery" href="https://www.single-life.tokyo/wp-content/uploads/2022/09/shinkansen.mp4" data-caption="新幹線">
      <img src="https://www.single-life.tokyo/wp-content/uploads/2022/09/shinkansen.jpg" style="width:15%;height:15%;" />
    </a>

    <!-- YouTube -->
    <a data-fancybox="video-gallery" href="https://www.youtube.com/watch?v=z2X2HaTvkl8" >
      <img src="http://i3.ytimg.com/vi/z2X2HaTvkl8/hqdefault.jpg" width="200" height="150" />
    </a>

    <!-- YouTube custom start time -->
    <a data-fancybox="video-gallery" href="https://www.youtube.com/watch?v=dZRqB0JLizw&t=40s">
      <img src="http://i3.ytimg.com/vi/dZRqB0JLizw/hqdefault.jpg" width="200" height="150" />
    </a>

    <!-- Vimeo -->
    <a data-fancybox="video-gallery" href="https://vimeo.com/259411563">
      <img src="https://f.vimeocdn.com/images_v6/lohp/video1_thumbnail.png" width="200" height="150" />
    </a>

    <!-- Vimeo custom start time -->
    <a data-fancybox="video-gallery" href="https://vimeo.com/577635596#t=11m11s">
      <img src="https://i.vimeocdn.com/video/1194909913-14ae3f936b19d7106adf7bf7c04d557aaa5941dcf445e0b004c3c9e060b4b0ae-d?mw=700&mh=393&q=70" width="200" height="150" /    >
    </a>
  </p>
  <script>
    Fancybox.bind('[data-fancybox="video-gallery"]', {
      // オプション
    });
  </script>

  <p>
    <h4>YouTube</h4>
    <!-- YouTube -->
    <a data-fancybox="video-gallery2" href="https://www.youtube.com/watch?v=z2X2HaTvkl8" >
      <img src="http://i3.ytimg.com/vi/z2X2HaTvkl8/hqdefault.jpg" width="200" height="150" />
    </a>

    <!-- YouTube custom start time -->
    <a data-fancybox="video-gallery2" href="https://www.youtube.com/watch?v=dZRqB0JLizw&t=40s">
      <img src="http://i3.ytimg.com/vi/dZRqB0JLizw/hqdefault.jpg" width="200" height="150" />
    </a>
  </p>
  <script>
    Fancybox.bind('[data-fancybox="video-gallery2"]', {
      Html: {
        videoAutoplay: false, /* 自動再生無効 */
        youtube:{
          controls: 1,        /* プレーヤー コントロールを表示 */
          enablejsapi: 1,     /* 、IFrame または JavaScript Player API を呼び出してプレーヤーを制御できる */
          rel: 0,             /* 再生した動画と同じチャンネルから関連動画表示 */
          fs: 1,              /* 全画面ボタン表示 */
        }
      },
    });
  </script>

  <p>
    <h4>ショパン</h4>
    <a style="margin-right:10px"
      href="https://www.single-life.tokyo/wp-content/uploads/2022/09/NocturneinBflatminor_Op.9no.1.mp3"
      data-fancybox="music-galllery"
      data-type="html5video"
      data-thumb="https://www.single-life.tokyo/wp-content/uploads/2022/09/chopin-section1.jpg"
      data-caption="夜想曲第1番 変ロ短調 作品9-1"
    >
      夜想曲第1番 変ロ短調 作品9-1
    </a>
    <a style="margin-right:10px"
      href="https://www.single-life.tokyo/wp-content/uploads/2022/09/NocturnfoPiano_No.8inDflatMajor_Op.27_2.mp3"
      data-fancybox="music-galllery"
      data-type="html5video"
      data-thumb="https://www.single-life.tokyo/wp-content/uploads/2022/09/chopin01.jpg"
      data-caption="夜想曲第8番 変ニ長調 作品27-2"
    >
      夜想曲第8番 変ニ長調 作品27-2
    </a>
    <a 
      href="https://www.single-life.tokyo/wp-content/uploads/2022/09/NocturneNo.2inEflatMajor_Op.9_2.mp3"
      data-fancybox="music-galllery"
      data-type="html5video"
      data-thumb="https://www.single-life.tokyo/wp-content/uploads/2022/09/trend_20200214145309.jpg"
      data-caption="夜想曲第2番 変ホ長調 作品9-2"
    >
      夜想曲第2番 変ホ長調 作品9-2 
    </a>
  </p>
  <script>
    Fancybox.bind('[data-fancybox="music-galllery"]', {
      // オプション
    });
  </script>

</body>
</html>

デモ

デモページ

動画ギャラリーを作成する

Videos

Fancyboxでは、Youtube、Vimeo 、HTML5の動画に対応しています。

HTMLマークアップ

<a data-fancybox="video-gallery" href="(動画URI)" >
   <img src="(サムネール画像URI) width="200" height="150" />
</a>

動画であろうと、HTMLマークアップも画像と同じです。

グルーピング

グルーピングも、「data-fancybox」プロパティの値を統一すれば、複数の動画を一つのギャラリーとして紐づけられます。

<a data-fancybox="video-gallery" href="(動画URI1)" >
   <img src="(サムネール画像URI3) width="200" height="150" />
</a>
<a data-fancybox="video-gallery" href="(動画URI2)" >
   <img src="(サムネール画像URI3) width="200" height="150" />
</a>
<a data-fancybox="video-gallery" href="(動画URI3)" >
   <img src="(サムネール画像URI3) width="200" height="150" />
</a>

Fancybox初期化

マークアップ後、Fancyboxを初期化すれば、動画のギャラリーができます。

  <script>
    Fancybox.bind('[data-fancybox="video-gallery"]', {
      // オプション
    });
  </script>

自動再生させないようにするには？

クリックすると、動画が開始されてしまい、場合によっては大きな音量でスタートしてしまいます。

オプション「videoAutoplay」を『false』を設定すると、自動再生を抑止できます。

videoAutoplay

YouTube動画の設定

YouTubeの場合、専用の設定を指定することができます。

youtube

オプション「youtube」では、YouTube埋め込みプレーヤーのパラメータを指定することができます。

オプションの値は配列で指定できます。

パラメータは以下の通りです。

パラメータ	説明	デフォルト
controls	1:プレーヤーコントロールを表示	1
enablejsapi	1:IFrame または JavaScript Player API を呼び出してプレーヤーを制御できる	1
rel	0:再生した動画と同じチャンネルから関連動画が選択 1:関連動画が表示	0:再生した動画と同じチャンネルから関連動画が選択
fs	1:全画面ボタン表示	1

<script>
  Fancybox.bind('[data-fancybox="video-gallery2"]', {
    Html: {
      videoAutoplay: false, /* 自動再生無効 */
      youtube:{
        controls: 1,        /* プレーヤー コントロールを表示 */
        enablejsapi: 1,     /* 、IFrame または JavaScript Player API を呼び出してプレーヤーを制御できる */
        rel: 0,             /* 再生した動画と同じチャンネルから関連動画表示 */
        fs: 1,              /* 全画面ボタン表示 */
      }
    },
  });
</script>

音楽ギャラリーを作成する

HTMLマークアップ

<a
  href="（音楽ファイルURI）"
  data-fancybox="music-galllery"
  data-type="html5video"
  data-thumb="（サムネール画像URI）"
>
  mp3 file
</a>

まず、属性「data-type」に値『html5video』を指定してください。

なおかつ、再生時にサムネールを表示させるには属性「data-thumb」を設定し、値にサムネール画像のURIを指定してください。

グルーピング

<a
  href="（音楽ファイルURI1）"
  data-fancybox="music-galllery"
  data-type="html5video"
  data-thumb="（サムネール画像URI1）"
>
  mp3 file
</a>
<a
  href="（音楽ファイルURI2）"
  data-fancybox="music-galllery"
  data-type="html5video2"
  data-thumb="（サムネール画像URI2）"
>
  mp3 file
</a>
<a
  href="（音楽ファイルURI3）"
  data-fancybox="music-galllery"
  data-type="html5video"
  data-thumb="（サムネール画像URI3）"
>
  mp3 file
</a>

音楽も画像や動画と同様に、「data-fancybox」プロパティの値を統一すれば、複数の音楽を一つのギャラリーとして紐づけられます。

Fancybox v5で動画／音楽ギャラリーを作る方法

Fancybox v5で動画／音楽ギャラリーを作る方法

サンプル

動画リスト

YouTube

ショパン

HTMLソース

デモ

動画ギャラリーを作成する

HTMLマークアップ

グルーピング

Fancybox初期化

自動再生させないようにするには？

YouTube動画の設定

音楽ギャラリーを作成する

HTMLマークアップ

グルーピング

ご参考

関連ページ

Related Posts

広告

アーカイブ

カテゴリー

Recent Posts

VYMの１年間の積立投資結果（2024年）

HDVの１年間の積立投資結果（2024年）

SPYDの１年間の積立投資結果（2024年）

VYM運用報告（2024年12月）

SPYD運用報告（2024年12月）