レッスンの動画パートに、Vimeoを利用した時の視聴履歴取得方法

オウルキャスト

レッスンの動画パートで使うメディアを「埋め込みコード配信」にし、
Vimeoの埋め込みコードを使った場合、 
初期設定のままのテンプレートではレッスンの動画パートの動画視聴履歴を取得することができません。

レッスンの動画パートで動画受講履歴を取得するためのテンプレート変更手順を解説します。

※レッスンの動画パートで使うメディアにVimeo以外の埋め込みコードを使った場合は
テンプレートを変更しても動画受講履歴は取得できません。

テンプレートの変更後は事前に必ず動作確認してください。

本記事の内容は2024年10月01日時点のものであり、今後Vimeoの仕様変更により正常動作しなくなる可能性があることを予めご了承ください。
この方法はデフォルトのテンプレートを利用している場合に限った説明になります。
テンプレートの編集が難しい場合、サポートへお問い合わせ下さい。ご要望を伺い作業を承ることも可能です（有償作業となります）。

PC版テンプレート

デザイン管理＞テンプレート＞「PC版」タブ

PC版::埋め込みコードメディア/メディアプレイヤー（レッスン向け）

テンプレートの内容を下記のように差し替えてください

{{lessonContent.media.profiles.code|raw}}
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
function initPlayer(startTime) {
{% if curriculum %}
var recorder  = Socialcast.createWatchLessonHistoryRecorder({{lessonContent.id}}, {{lessonPart.id}}, 60, {{curriculum.id}});
{% else %}
var recorder  = Socialcast.createWatchLessonHistoryRecorder({{lessonContent.id}}, {{lessonPart.id}}, 60);
{% endif %}
recorder.playEndRateUpdate({{playEndRate.rate}});
var iframe = document.querySelector('iframe[src*="/player\.vimeo\.com/video/"], iframe[src*="/vimeo\.com/event"]');
if (iframe != null) {
	var player = new Vimeo.Player(iframe);
    player.on('loaded', function() {
      player.setCurrentTime(startTime);
      recorder.timeupdate(startTime);
    });
    player.on('play', function() {
      recorder.timeupdate(startTime);
      recorder.start();
    });
    player.on('pause', function() {
        recorder.stop();
    });
    player.on('ended', function() {
        recorder.complete();
        recorder.stop(true);
        recorder.timeupdate(0);
        player.setCurrentTime(0);
    });
    player.on('timeupdate', function(event) {
        player.getDuration().then(function(duration)
        {
            recorder.totalTimeUpdate(duration);
            recorder.timeupdate(event.seconds);
        recorder.checkPlayEnd();
        }
        ).catch(function(error) {
        // an error occurred
        });
    });
  }
}
</script>

スマートフォン版テンプレート

デザイン管理＞テンプレート＞「スマートフォン版」タブ

スマートフォン版::埋め込みコードメディア/メディアプレイヤー（レッスン向け）

テンプレートの内容を下記のように差し替えてください

{% if lessonContent.media.profiles.code_mobile|replace({'　':''})|trim is not empty %}
{{ lessonContent.media.profiles.code_mobile|raw }}
{% else %}
{{ lessonContent.media.profiles.code|raw }}
{% endif %}

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
function initPlayer(startTime) {
{% if curriculum %}
var recorder  = Socialcast.createWatchLessonHistoryRecorder({{lessonContent.id}}, {{lessonPart.id}}, 60, {{curriculum.id}});
{% else %}
var recorder  = Socialcast.createWatchLessonHistoryRecorder({{lessonContent.id}}, {{lessonPart.id}}, 60);
{% endif %}
recorder.playEndRateUpdate({{playEndRate.rate}});
var iframe = document.querySelector('iframe[src*="/player\.vimeo\.com/video/"], iframe[src*="/vimeo\.com/event"]');
if (iframe != null) {
var player = new Vimeo.Player(iframe);
player.on('loaded', function() {
player.setCurrentTime(startTime);
recorder.timeupdate(startTime);
});
player.on('play', function() {
recorder.timeupdate(startTime);
recorder.start();
});
player.on('pause', function() {
recorder.stop();
});
player.on('ended', function() {
recorder.complete();
recorder.stop(true);
recorder.timeupdate(0);
player.setCurrentTime(0);
});
player.on('timeupdate', function(event) {
player.getDuration().then(function(duration)
{
recorder.totalTimeUpdate(duration);
recorder.timeupdate(event.seconds);
recorder.checkPlayEnd();
}
).catch(function(error) {
// an error occurred
});
});
}
}
</script>