Vimeo利用時の再生回数などの視聴履歴取得方法

ソーシャルキャスト

オウルキャスト

本記事はVimeoの動画配信で視聴履歴を取得する方法についての記事です。
本記事でご案内する方法で、VimeoのVOD配信とライブ配信、両方の視聴履歴を取得できるようになります。

本記事の内容は2021年1月22日時点のものであり、今後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>