動画コンテンツのメディアに、Vimeoを利用した時の視聴履歴取得方法 – ソーシャルキャスト/オウルキャスト　ヘルプセンター

ソーシャルキャスト

オウルキャスト

配信プラットフォームに「Vimeo」をご利用の場合、Vimeoの契約プランや動画の登録方法によって、
動画コンテンツの視聴履歴を取得するために必要な設定が異なります。

以下のパターンの中から、自社の状況に該当する項目の手順をご確認のうえ、作業を行ってください。
本記事でご案内する方法で、VimeoのVOD配信とライブ配信、両方の視聴履歴を取得できるようになります。

1. Vimeoの「無料プラン」をご利用の場合

無料プランをご利用の場合、メディアの登録方法は「埋め込みコード配信」のみとなります。

メディアの登録方法：「埋め込みコード配信」から動画を登録してください。
必要な作業：初期設定のままでは視聴履歴を取得できません。
本ページ下部の「【手順】視聴履歴を取得するためのテンプレート変更方法」を参考に、テンプレートの変更作業を行ってください。

2. Vimeoの「有料プラン（Starterプラン以上）」をご利用の場合

有料プランをご利用の場合は、以下2種類のメディア登録方法からお選びいただけます。
選択した方法に合わせて作業を行ってください。

①「埋め込みコード配信」を利用する場合

メディアの登録方法：「埋め込みコード配信」から動画を登録してください。
必要な作業：初期設定のままでは視聴履歴を取得できません。
本ページ下部の「【手順】視聴履歴を取得するためのテンプレート変更方法」を参考に、テンプレートの変更作業を行ってください。

②「Vimeo連携機能」を利用する場合

APIによるVimeo連携設定を行うことで、より便利に動画を管理・配信できます。

連携機能でできること：
- 管理画面からドラッグ＆ドロップで動画をアップロードするだけで、連携先のVimeo上にも自動で動画が登録されます。
- すでにVimeoにアップロード済みの動画も管理画面に同期され、コンテンツにそのまま利用できます。
メディアの登録方法：「Vimeo連携機能」の利用設定を行ってください。
必要な作業：Vimeo連携機能を利用する場合、視聴履歴を取得するためのテンプレート変更作業は不要です。

ご注意点

（１）VOD配信では、「視聴日時」と「視聴完了日時」を記録出来るようになっておりますが、ライブ配信では、「視聴完了日時」を記録出来ません。
その為、ライブ配信では「総視聴時間」や「最終視聴箇所」も正確には取得が出来ませんので予めご了承ください。

（２）オウルキャストのレッスンの動画パートでVimeoを使う場合は、この方法では取得できません。
「レッスンの動画パートのメディアに、Vimeoを利用した時の視聴履歴取得方法」を参照してください。

（３）動画コンテンツで使うメディアにVimeo以外の埋め込みコードを使った場合は、
テンプレートを変更しても動画コンテンツの視聴履歴は取得できません。

【手順】視聴履歴を取得するためのテンプレート変更方法

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

PC版テンプレート

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

パーツテンプレート::埋め込みコードメディア/プレイヤー

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

{{content.media.profiles.code|raw}}

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
function initPlayer(startTime) {
    var recorder = Socialcast.createWatchHistoryRecorder("{{content.id}}", 60);
    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) {
            recorder.timeupdate(event.seconds);
        });
    }
}
</script>

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

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

パーツテンプレート::埋め込みコードメディア/プレイヤー

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

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

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
function initPlayer(startTime) {
    var recorder = Socialcast.createWatchHistoryRecorder("{{content.id}}", 60);
    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) {
            recorder.timeupdate(event.seconds);
        });
    }
}
</script>