javascript - ユーザーが動画を視聴した時間を追跡する

Question

私はオンラインコースを教えていますが、生徒が実際に特定のビデオを視聴していることを確認する必要があります。今、私はすべてを打ち負かすことができることを理解していますが、私が探しているのは、生徒の説明責任の旅を始めるためにいくつかの調整を行うことができるという80/20の法則です。

Q1：現在のウィンドウがフォーカスを失った場合にイベントを発生させるJavaScript経由の方法はありますか？

Q2：ビデオの再生が終了したときにイベントを発生させる方法はありますか？

Q3：生徒がタイムラインの最後をクリックするのではなく、ビデオが最後まで再生されたことを確認する方法はありますか？

私は（もう一度）言わざるを得ないと感じています。「あなたはあなたの時間を無駄にしている、学生はあなたがすることは何でも打ち負かすだろう」のようなものでこの質問に答えないでください。

score 9 · Accepted Answer

使用しているプレーヤーは何ですか。JWPlayerやFlowPlayerなどのオープンソースのビデオプレーヤーを使用している場合。イベントを追跡できます。私は個人的にフロープレーヤーを好み、グーグルアナリティクスを使用して、ページ上で必要な期間やその他のタスクを追跡できます。

ページに認証メカニズムがあるので、学生のユーザー名（または識別子）を取得できます。これをラベルとしてGoogleAnalyticにイベントをプッシュすると、クリックしたリンク、再生した時間、再生した時間など、生徒が行ったすべてのことを追跡できます...

あなたはグーグルアナリティックhttp://www.google.lk/analytics/その無料をセットアップすることができます:)
イベント追跡ガイドhttps://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide
フロープレーヤーイベントhttp://flash.flowplayer.org/documentation/events/player.html

セットアップ例

        <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', '#########']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

      })();

    </script>

記録します

_gaq.push(['_trackEvent', 'Videos', 'Play', 'Gone With the Wind']);

これは、http： //vsp.ideawide.com/から取得したライブコードの一部であり、これらのイベントの一部を追跡しています。

var events = {
    clip : {
        onStart: function(clip) {
            _gaq.push(['_trackEvent',"Videos", "Play", defaults.source]);
        },


        onPause: function(clip) {
            _gaq.push(['_trackEvent',"Videos", "Pause", defaults.source, parseInt(this.getTime())]);
        },

        onResume: function(clip) {
            _gaq.push(['_trackEvent',"Videos", "Resume", defaults.source, parseInt(this.getTime())]);
        },

        onSeek: function(clip) {
            _gaq.push(['_trackEvent',"Videos", "Seek", defaults.source ]);
        },

        onStop: function(clip) {
            _gaq.push(['_trackEvent',"Videos", "Stop", defaults.source, parseInt(this.getTime())]);
        },
         onFinish: function(clip) {
            _gaq.push(['_trackEvent',"Videos", "Finish", defaults.source]);
        }
    },
    onFullscreen: function() {
        _gaq.push(['_trackEvent',"Videos", "Full Screen", defaults.source]);
    },
    onError: function(errorCode , errorMessage) {
        _gaq.push(['_trackEvent',"Videos", "Error", defaults.source, errorCode ]);
    }
}

適切なプレーヤーを使用して分析を適切に設定した最後の注意として、80/20を99/1に改善できます。

score 3 · Accepted Answer

これは、ビデオタグを使用したHTML5ビデオを想定しています。

player = document.getElementById("player");

//Get current percent complete. You may want to check for 95%+ rather than 100%.
setInterval(function(){
    percentComplete = player.currentTime/player.duration;
}, 300); 

window.onblur = function() {
//this will be called when the window loses focus
};

コントロール属性なしでビデオタグを呼び出して、シークバーを無効にすることができます。次に、以下を使用してクリック時に再生をトリガーできます。

player.play();

score 3 · Accepted Answer

最初のアプローチの問題

私はオンラインコースを教えていますが、生徒が実際に特定のビデオを視聴していることを確認する必要があります。

これが問題です。あなたの要件は、学生が実際にビデオを見るということですが、プログラムでできる最善のことは、ビデオがサーバーによって送信され、クライアントによって受信されたことを確認することです。顔認識や音声ループバックなどの極端な手段を使用する以外に、誰かがそれを見ているか、意図された視聴者がそれを見ているか、または誰かが聞いているかどうかを確認することはできません。学生は単にビデオを開始して立ち去ることができます。

それは専門的なことのように聞こえるかもしれませんが、実際には重要な違いです。あなたが持っているのは、誰かが本を読むことを確実にするように設計されたシステムと同等ですが、システムができることは、いつでも本が開いているか閉じているかをチェックすることだけです。

安全

今、私はすべてを打ち負かすことができることを理解していますが、私が探しているのは、生徒の説明責任の旅を始めるためにいくつかの調整を行うことができるという80/20の法則です。

十分な努力ですべてを打ち負かすことができますが、提案された解決策はほとんど楽に打ち負かすことができます。平均的なユーザーがシステムを合法的に使用するよりも不正行為を行う方が簡単な場合は、実装する価値がない可能性があります。

別のアプローチ

ブラウザがビデオを実行しているかどうかに焦点を合わせるのではなく、焦点をユーザーに戻すことを検討してください。ビデオの表示中に特定のユーザー操作を要求することにより、システムに対する信頼度を大幅に高めることができます。

これを行う最も簡単な方法は、ビデオをいくつかの小さな部分に分割し、各部分が再生された後に次のビデオへのリンクを表示することです。

次に、その一連の動画のリクエスト間の時間を（ユーザーごとに）表示する小さなスクリプトを作成し、セグメントの長さを考慮して（またはその場合の平均と比較して）離れすぎている、または近すぎるリクエストにフラグを立てることができます何らかの理由でデータが利用できません）。サーバーログにアクセスできる場合は、サーバーログからこのデータを直接取得することも、自分で記録することもできます。

理解

追加の手順を実行して理解度（または保持力）をテストしたい場合は、この代替アプローチを簡単に拡張できます。次の動画へのリンクを1つ持つ代わりに、質問への回答という形で、その動画へのリンクをいくつか用意します。生徒が答えを共有することを心配している場合は、正解かどうかを生徒に伝えずに、次の動画に送ってください。後でこのデータを見て、それを使用するかどうか、およびどのようにカーブさせるかを決定できます。

score 1 · Accepted Answer

たぶん、ビデオの長さに対してsetTimeoutを実行し、ビデオの長さが経過したらイベントを発生させます。

これを試して、ウィンドウがフォーカスを失ったときを検出します。

window.onblur = function() {
   //do something here...
};

setTimeoutの精度が本当に心配な場合は、次のことを試してください。

var start = (new Date).getTime();

function CheckTime() {

   var diff = (new Date).getTime() - start;
   if (diff >= videoLength) {
       FireVideoDoneEvent();
   }
   else {
       setTimeout(function() {
           CheckTime();
       }, 1000);
   }

}

score 1 · Accepted Answer

Q1：イベントonblurを探してください

Q2：それはプレイヤーによって異なります。ExternalInterface.call（ "myFunctionName（）"）;を使用してjavascript関数を呼び出すことができるフラッシュビデオプレーヤーがあります。AS3から

Q3：そのすべてのオプションを備えたフラッシュプレーヤーを見つけようとしますが、私の解決策はjavascriptよりもas3です。

これがお役に立てば幸いです。

score 1 · Accepted Answer

前述のように、window.onblurを処理します
ビデオが終了すると、「終了」イベントが発生します
mediaElement.played.end（）を呼び出して、ブラウザーで再生された秒数を取得できます。

こことここを参照してください

javascript - ユーザーが動画を視聴した時間を追跡する

6 に答える 6

Related

Reference