VideoPlay History

Demo.js

recordVideoPlayHistory('testVideo', {
    "EmailOrUserName": "[email protected]", 
    "WatchTokenOrPwd":"ayr1",
    "LoginToken": "C52AC508-8778-E5FC-95F3-35DDDB21BBC1",
    "UserType": 1
  }, guid(), 7);

guid.js

function guid() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}

videoPlayHistoryHelper.js

function recordVideoPlayHistory(videoEleId, authInfo, pageGenerateGuid, vDid) {
  var video = document.querySelector('#' + videoEleId);

  _checkDependency();
  _checkParams(videoEleId, authInfo, pageGenerateGuid, vDid);

  var END_POINT = "http://localhost:50341";
  var slidingWindowSeconds = 10, lastTimePlayed = null;

  var timeUpdateHandler = _.throttle(_updateWatchInfo, slidingWindowSeconds * 1000, {
    trailing: true,
    leading: true
  });

  video.addEventListener('timeupdate', timeUpdateHandler);
  video.addEventListener('seeked', function () {
    //send report to server Immediately after seeking progress.
    if (lastTimePlayed && (lastTimePlayed.length !== video.played.length)) {
      timeUpdateHandler.cancel();
    }
  });

  //------------------------------------------------------------------------------------------------------
  function _checkDependency() {
    if (typeof $.ajax !== "function") {
      throw new Error("Can't find Jquery, VideoHistory helper init error!");
    }
    if (typeof _.throttle !== "function") {
      throw new Error("Can't find Lodash, VideoHistory helper init error!");
    }
  }

  function _checkParams(videoEleId, authInfo, pageGenerateGuid, vDid) {
    var video = document.querySelector('#' + videoEleId);
    if (videoEleId === undefined || video === null) {
      throw new Error('video element not exist!');
    }

    if (vDid === undefined || authInfo === undefined || pageGenerateGuid === undefined) {
      throw new Error('params invalid!');
    }
  }

  function _updateWatchInfo() {
    lastTimePlayed = video.played;

    var videoPlayedLength = video.played.length;
    if (videoPlayedLength === 0) {
      console.warn("can't report, video played property is empty.")
      return;
    }

    var data = {
      "recordModel":
      {
        "id": pageGenerateGuid,
        "VDid": vDid,
        "TimeRangeStart": Math.ceil(video.played.start(videoPlayedLength - 1)), 
        "TimeRangeEnd": Math.ceil(video.played.end(videoPlayedLength - 1)), 
        "TotalDuration": Math.ceil(video.duration)
      },
      "authModel": authInfo
    };

    $.ajax({
      type: 'POST',
      url: END_POINT + "/WebServices/OnlineVideoHistory.asmx/recordVideoPlayHistory",
      data: JSON.stringify(data),
      crossDomain: true,
      contentType: "application/json",
      success: function (res) {
      },
      error: function (error) {
        console.error(error);
      }
    });
  }
}

videoPlayHistoryHelper.min.js

function recordVideoPlayHistory(e,r,t,o){var n=document.querySelector("#"+e);!function(){if("function"!=typeof $.ajax)throw new Error("Can't find Jquery, VideoHistory helper init error!");if("function"!=typeof _.throttle)throw new Error("Can't find Lodash, VideoHistory helper init error!")}(),function(e,r,t,o){var n=document.querySelector("#"+e);if(void 0===e||null===n)throw new Error("video element not exist!");if(void 0===o||void 0===r||void 0===t)throw new Error("params invalid!")}(e,r,t,o);var i="http://localhost:50341",a=null,d=_.throttle(function(){a=n.played;var e=n.played.length;if(0===e)return void console.warn("can't report, video played property is empty.");var d={recordModel:{id:t,VDid:o,TimeRangeStart:Math.ceil(n.played.start(e-1)),TimeRangeEnd:Math.ceil(n.played.end(e-1)),TotalDuration:Math.ceil(n.duration)},authModel:r};$.ajax({type:"POST",url:i+"/WebServices/OnlineVideoHistory.asmx/recordVideoPlayHistory",data:JSON.stringify(d),crossDomain:!0,contentType:"application/json",success:function(e){},error:function(e){console.error(e)}})},1e4,{trailing:!0,leading:!0});n.addEventListener("timeupdate",d),n.addEventListener("seeked",function(){a&&a.length!==n.played.length&&d.cancel()})}