オウルキャスト
配信プラットフォームに「Vimeo」をご利用の場合、Vimeoの契約プランや動画の登録方法によって、
レッスンの動画パートで視聴履歴を取得するために必要な設定が異なります。
以下のパターンの中から、自社の状況に該当する項目の手順をご確認のうえ、作業を行ってください。
1. Vimeoの「無料プラン」をご利用の場合
無料プランをご利用の場合、メディアの登録方法は「埋め込みコード配信」のみとなります。
- メディアの登録方法： 「埋め込みコード配信」から動画を登録してください。
- 必要な作業：初期設定のままでは視聴履歴を取得できません。
本ページ下部の「【手順】視聴履歴を取得するためのテンプレート変更方法」を参考に、テンプレートの変更作業を行ってください。
2. Vimeoの「有料プラン（Starterプラン以上）」をご利用の場合
有料プランをご利用の場合は、以下2種類のメディア登録方法からお選びいただけます。
選択した方法に合わせて作業を行ってください。
①「埋め込みコード配信」を利用する場合
- メディアの登録方法： 「埋め込みコード配信」から動画を登録してください。
- 必要な作業：初期設定のままでは視聴履歴を取得できません。
本ページ下部の「【手順】視聴履歴を取得するためのテンプレート変更方法」を参考に、テンプレートの変更作業を行ってください。
②「Vimeo連携機能」を利用する場合
APIによるVimeo連携設定を行うことで、より便利に動画を管理・配信できます。
- 連携機能でできること：
- 管理画面からドラッグ＆ドロップで動画をアップロードするだけで、連携先のVimeo上にも自動で動画が登録されます。
- すでにVimeoにアップロード済みの動画も管理画面に同期され、コンテンツやレッスンの動画パートにそのまま利用できます。
- メディアの登録方法： 「Vimeo連携機能」の利用設定を行ってください。
- 必要な作業：Vimeo連携機能を利用する場合、視聴履歴を取得するためのテンプレート変更作業は不要です。
ご注意点
（１）動画コンテンツでVimeoを使う場合は、この方法では取得できません。
「動画コンテンツのメディアに、Vimeoを利用した時の視聴履歴取得方法」を参照してください。
（２）レッスンの動画パートで使うメディアに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>