javascript - 通过 JavaScript 跟踪 "video duration watched"分析

Question

我想使用数据库中名为Viewings 的表来跟踪每个用户的视频观看次数。它既属于用户又属于视频，记录观看时长和视频完成的百分比。

当单击播放按钮时，我想根据 id 查找现有的观看，该 id 存储在 30 分钟持久 cookie 中(如果 cookie 不存在，则在首次单击播放按钮时创建该 cookie)已经存在)。然后，我想使用 timeupdate 事件监听器，在用户观看视频的每 10 秒定期更新此 Viewing 的 length 属性。

我有一个 JavaScript 函数，它以整数形式返回 lengthWatched，它表示视频当前有多少秒。

我已经测试过以确保它适用于以下功能:

video.addEventListener 'timeupdate', ((e) ->
  console.log(lengthWatched(e));
  return
  ), false

所以现在我所要做的就是每当此函数返回可被 10 整除的整数时更新 length。

我很确定我必须在这里使用 AJAX。但我不太确定继续下一步的最佳方法，或者即使有更好的方法来记录这些数据。

有什么建议吗？

编辑:

根据 agmcleod 的建议和我自己的一些建议，我最终添加了这些有效的 JS:

#global variables
videoId = location['pathname'].split('/').pop()
viewingCookieName = "Video "+videoId.toString()

#taken from http://www.quirksmode.org/js/cookies.html for easy reading of cookies
readCookie = (name) ->
  nameEQ = name + '='
  ca = document.cookie.split(';')
  i = 0
  while i < ca.length
    c = ca[i]
    while c.charAt(0) == ' '
      c = c.substring(1, c.length)
    if c.indexOf(nameEQ) == 0
      return c.substring(nameEQ.length, c.length)
    i++
  null

video.addEventListener 'timeupdate', ((e) ->
  duration = lengthWatched(e)
  if (duration % 5 == 0)
    currentLength = 0
    $.get "/viewings/" + readCookie(viewingCookieName), (data) ->
      currentLength = data['length']
      return
    $.ajax(
      url: "/viewings/" + readCookie(viewingCookieName) + ".json"
      type: 'PUT'
      data: { viewing: {length: currentLength + 5}}
      dataType: 'json').success ->
        console.log('put')
  return
  ), false

#only including relevant code, took out other video play functionality
video.onplay = (e) ->
  unless readCookie(viewingCookieName)
    $.ajax(
      url: "/viewings.json"
      type: 'POST'
      data: { viewing: { video_id: videoId, user_id: gon.current_user_id } },
      dataType: 'json').success (data) ->
        viewingId = data['id']
        time = new Date(Date.now() + 1800000).toUTCString()
        document.cookie = viewingCookieName+"="+ data['id']+"; expires="+time
  return

基本上使用了agmcleod提供的相同 Controller 。我仍在努力将 timeupdate 修复为每 1 秒一次，但我确信这会相当简单。还可以添加 max_duration_reached。

Answer 1

Ajax 正是您所需要的。鉴于您使用的是 Rails，我认为您已经使用了 jquery。你可以这样做:

video.addEventListener 'timeupdate', ((e) ->
  duration = lengthWatched(e);
  console.log(duration);
  if (duration % 10 === 0)
    $.ajax({
      url: "/viewings/" + viewingsId + ".json",
      type: "PUT",
      data: { viewing: { length: duration } },
      dataType: "json"
    }).done(() -> {
      // callback
    });
  return
  ), false

抱歉，如果我的 CoffeeScript 关闭了，已经有一段时间了。无论如何，使用 PUT 将长度属性的 json 主体发布到 Controller 端点(因为我们正在更新记录)。请务必从您的 cookie 中填充viewingsId。

在路线方面，您可以在此处拥有标准资源:

 resources :viewings

然后在 Controller 中:

class ViewingsController < ApplicationController
  def update
    viewing = Viewing.find(params[:id])
    if viewing.update_attributes viewing_attributes
      respond_to do |format|
        format.html
        format.json { render json: viewing }
      end
    else
      respond_to do |format|
        format.html { redirect_to viewing }
        format.json { render errors: viewing.errors, status: 422 }
      end
    end
  end

private

  def viewing_attributes
    params.require(:viewing).permit(:length)
  end

end

强参数位是可选的，只是为了保持良好的实践。更新您可能需要的任何其他参数的许可。我编写了更新操作，因此它也可以处理 html 请求(表单更新)。希望对您有帮助。