概要

Jストリーム社が提供しております「Equipmedia」をご使用される場合の連携方法についてご説明致します。
なお、この方法はソーシャルキャスト・ビデオラーニングとの連携方法になります。ソーシャルキャストをご利用の方は「Jストリームの埋め込みコードを利用する方法」をご参照下さい。

基本的にはEquipmediaから発行されます「貼付けタグ」をソーシャルキャストの「埋め込みコード」に登録して頂くことで連携が可能になります。
しかし埋め込みコードで登録された動画の再生回数や視聴履歴、問題は、ソーシャルキャスト上では記録することが出来ません。 そこで、再生回数のカウントをし、視聴履歴を記録するためには、テンプレートの修正を行って頂くことで再生数のカウントが可能になります。

注意

• 再生数のカウントが不要な場合は以下の作業は必要ありません。
• 問題の表示が必要ない場合は以下の作業は必要ありません。
• Jストリームの「Equipmedia」専用の対応となります。埋め込みコードに他のサービスを混在して利用する場合にはこの方法は利用出来ません。

Equipmediaからタグのコピー

「Equipmedia」の管理画面で動画の登録を行って下さい。（動画登録方法は「Equipmedia」のマニュアルをご覧ください。）

1. ソーシャルキャストに登録する動画の「共通タグ」ボタンをクリックして下さい。
2. 使用するプレイヤーは「レスポンシブデザイン」を設定したプレイヤーを選択して下さい。
   • プレイヤーの設定は「プレイヤー管理」から作成することができます。 詳しくは「Equipmedia」のマニュアルをご覧ください。「レスポンシブデザイン」設定をしていないプレイヤーですとSocialcast側で動画部分がうまく表示されない場合がございます。
3. 「objectタグ」を選択してください
4. 「タグのコピー」をクリックしてください

テンプレートの修正

ソーシャルキャストの管理画面からデザイン管理を開いて下さい。修正が必要なテンプレートはPCとスマートフォンそれぞれで「動画プレイヤー（埋め込みコード）」になりますので開いて頂き、下記のコードで上書き保存して下さい。

PC版 動画プレイヤー（埋め込みコード）

<script type="text/javascript">
  commonData['contentsId'] = {{contents.id}};
</script>
<div>
{{contents.getConfig('embed_code')|replace({'jstream_t3.PlayerFactoryOBJ': 'var player = jstream_t3.PlayerFactoryOBJ'})|raw}}
<script type="text/javascript">
  var firstPlay = true;
  player.accessor.addEventListener('playing', function(){
    if (firstPlay) Socialcast.setPlayCount(commonData['contentsId']);
    firstPlay = false;
  });
  player.accessor.addEventListener('complete', function(){
    Socialcast.setCheckedContents(commonData['contentsId'])
      .done(function(data){
        if ($('.questionArea').size()) {
          $('.questionArea').show();
          $('html, body').animate({scrollTop: $('section.questionArea').offset().top});
        }
      })
      .fail(function(){
        alert('問題の取得に失敗しました');
      });
  });
</script>
</div>

スマートフォン版 動画プレイヤー（埋め込みコード）

<script type="text/javascript">
  commonData['contentsId'] = {{contents.id}};
</script>
<div>
{% set smtEmbedCode = contents.getConfig('smt_embed_code') %}
{% if smtEmbedCode|length %}
  {{smtEmbedCode|replace({'jstream_t3.PlayerFactoryOBJ': 'var player = jstream_t3.PlayerFactoryOBJ'})|raw}}
{% else %}
  {{contents.getConfig('embed_code')|replace({'jstream_t3.PlayerFactoryOBJ': 'var player = jstream_t3.PlayerFactoryOBJ'})|raw}}
{% endif %}
<script type="text/javascript">
  var firstPlay = true;
  player.accessor.addEventListener('playing', function(){
    if (firstPlay) Socialcast.setPlayCount(commonData['contentsId']);
    firstPlay = false;
  });
  player.accessor.addEventListener('complete', function(){
    Socialcast.setCheckedContents(commonData['contentsId'])
      .done(function(data){
        if ($('.questionArea').size()) {
          $('.questionArea').show();
          $('html, body').animate({scrollTop: $('section.questionArea').offset().top});
        }
      })
      .fail(function(){
        alert('問題の取得に失敗しました');
      });
  });
</script>
</div>

このようにしておくことで、Equipmediaの動画の再生数をソーシャルキャスト上でも記録することが出来ます。

テンプレートの修正を行わない場合

たとえば、特定の埋め込みコードの動画のみ再生数、視聴履歴を記録する場合は、Equipmediaの「貼付けタグ」を都度編集して、ソーシャルキャストの埋め込みコードに登録を行って下さい。

<script type="text/javascript" charset="UTF-8" src="https://ssl-cache.stream.ne.jp/www/xxxxxx/jmc_pub/jmc_swf/player/t3/obj.js"></script>
<script type="text/javascript">
  var player = jstream_t3.PlayerFactoryOBJ.create({
  b:"xxxxxx.eq.webcdn.stream.ne.jp/www/xxxxxx/jmc_pub/jmc_swf/player/",
  c:"xxxxxx",
  m:"xxxx",
  s:{
    hp:360,
    rp:"fit",
    sn:"f,t,m,g",
    wp:640
  }
});

var firstPlay = true;
player.accessor.addEventListener('playing', function(){
  if (firstPlay) Socialcast.setPlayCount(commonData['contentsId']);
  firstPlay = false;
});
player.accessor.addEventListener('complete', function(){
  Socialcast.setCheckedContents(commonData['contentsId'])
    .done(function(data){
      if ($('.questionArea').size()) {
        $('.questionArea').show();
        $('html, body').animate({scrollTop: $('section.questionArea').offset().top});
      }
    })
    .fail(function(){
      alert('問題の取得に失敗しました');
    });
});
</script>
<noscript>
<div>このコンテンツを見るためにはJavaScriptを有効にしてください。Please enable JavaScript to watch this content.</div>
</noscript>

Equipmediaから出力された貼付けタグを上記のように編集することで連携が可能です。

3行目の編集

jstream_t3の前にvar player = を挿入して下さい。

15行目から31行目の編集

該当のコード挿入して下さい。