从 JavaScript 跟踪“观看视频时长”分析

Question

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

单击播放按钮时，我想根据 id 查找现有查看，该 id 存储在 30 分钟的持久 cookie 中（如果 cookie 没有，则在第一次单击播放按钮时创建） t 已经存在）。然后，我想使用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 提供的基本相同的控制器。我仍在努力将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

抱歉，我的咖啡脚本已关闭，已经有一段时间了。无论如何，使用 PUT 将长度属性的 json 主体发布到控制器端点（因为我们正在更新记录）。请务必从您的 cookie 中填充viewingsId。

在路线方面，您可以在这里拥有标准资源：

 resources :viewings

然后在控制器中：

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 请求（表单更新）。希望对你有所帮助。