WordPress × Vimeo Player APIで作る動画講座サイト

WordPressとVimeo Player APIを使って、動画講座サイトを作る方法を紹介します。

今回は、以下の機能を実装します。

動画タイトルの一覧を表示して、クリック時に動画プレイヤーを切り替える
視聴が完了した動画のチェックボックスにチェックを入れる

デモページはこちら。

Vimeo側の設定

まず、Vimeoの管理画面で動画をアップロードして、動画IDをメモしておきます。

動画IDは動画のURLから確認できます。
https://vimeo.com/manage/videos/{動画ID}

WordPressに動画情報を登録する

今回はAdvanced Custom Fieldsプラグインを使用して、WordPressに動画情報を登録します。
フィールド名とフィールドタイプは以下の通りです。

movie（group）
- chapter1（group）
  - movie_id（text）
  - title（text）
- chapter2（group）
  - movie_id（text）
  - title（text）

PROプランを購入している場合は、繰り返しフィールドが便利です。

表示エリアの作成

#movie-areaが動画プレイヤーの表示箇所です。
.js-movie-playをクリックすると、動画プレイヤーが切り替わるようにします。

<div class="l-mc-demo">
  <div class="p-mc-demo">
    <div class="p-mc-demo__columns">
      <div class="p-mc-demo__column p-mc-demo__column--l">
        <div class="p-mc-demo__movie" id="movie-area" data-movie-id=""></div>
      </div>
      <div class="p-mc-demo__column p-mc-demo__column--s">
        <div class="p-mc-demo__list">
<?php
  $movies = get_field('movie');
  foreach ( $movies as $chapter ) :
?>
          <div class="p-mc-demo__list-item js-movie-play" data-movie-id="<?php echo $chapter['movie_id']; ?>">
            <input type="checkbox" class="p-mc-demo__checkbox" id="movie-check-<?php echo $chapter['movie_id']; ?>" disabled="disabled" />
            <label class="p-mc-demo__title"><?php echo $chapter['title']; ?></label>
          </div>
<?php
  endforeach;
?>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScriptを読み込む

次に、functions.phpでVimeo Player APIとスクリプトファイルを読み込みます。
そして、wp_localize_script関数を使って動画IDを渡します。wp_localize_script関数の使い方はこちら。

function my_enqueue_scripts() {
  if ( is_page('movie-course-demo') ) {
    wp_enqueue_script(
      'my-vimeo-api',
      'https://player.vimeo.com/api/player.js',
      null,
      false,
      true
    );
    wp_enqueue_script(
      'my-vimeo',
      get_theme_file_uri() . '/my_inc/js/vimeo.js',
      array('jquery', 'my-vimeo-api'),
      '1.0.0',
      true
    );
    $movie_ids = array();
    $movies = get_field('movie', get_queried_object_id());
    foreach ( $movies as $chapter ) {
      $movie_ids[] = $chapter['movie_id'];
    }
    wp_localize_script('my-vimeo', 'movieIds', $movie_ids);
  }
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

動画プレイヤーの作成

最後に、動画プレイヤーの作成、切り替え、チェックボックスの処理を追加して、実装完了です。

jQuery(function($) {
  // 最初の動画IDを渡して、動画プレイヤーを作成
  const firstMovie = movieIds[0];
  const options = {
    id: firstMovie,
    width: 640,
    title: false,
    byline: false,
    portrait: false
  };
  let player = new Vimeo.Player('movie-area', options);
  
  $('#movie-area').attr('data-movie-id', firstMovie);  // 表示中の動画プレイヤーの情報をHTMLに追加
  $('.p-mc-demo__list-item[data-movie-id="' + firstMovie + '"]').addClass('active');  // スタイル用
  
  // 視聴完了イベントにコールバック関数を登録
  player.on('ended', function () {
    $('input#movie-check-' + firstMovie).prop('checked', true);
  });
  
  // 動画プレイヤーの切替
  $('.js-movie-play').on('click', function () {
    const oldMovie = $('#movie-area').attr('data-movie-id');
    const newMovie = $(this).attr('data-movie-id');
    if ( oldMovie && oldMovie != newMovie ) {
      //  古い動画プレイヤーの削除
      player.destroy().then(function() {
        // 新しい動画プレイヤーの作成
        options['id'] = newMovie;
        player = new Vimeo.Player('movie-area', options);
        
        $('#movie-area').attr('data-movie-id', newMovie);
        $('.p-mc-demo__list-item').removeClass('active');
        $('.p-mc-demo__list-item[data-movie-id="' + newMovie + '"]').addClass('active');
        
        player.on('ended', function () {
          $('input#movie-check-' + newMovie).prop('checked', true);
        });
      }).catch(function(error) {
      });
    }
  });
});

デモページはこちら。