Отслеживание «длительности просмотренных видео» аналитики от JavaScript

Question

Я хочу отслеживать видеоролики для каждого пользователя с таблицей в базе данных под названием Viewings. Он относится как к пользователю, так и к видео, и записывает длительность просмотра, а процент видео завершен.

Когда нажата кнопка воспроизведения, я хочу либо найти существующий просмотр на основе идентификатора, который хранится в 30-минутном сохраняющемся файле cookie (который создается при первом нажатии кнопки воспроизведения, если файл cookie не работает 't уже существует). Затем я хочу периодически обновлять атрибут length этого Viewing на каждые 10 секунд, когда пользователь просматривал видео, используя прослушиватель событий timeupdate.

У меня есть функция JavaScript, которая возвращает lengthWatched как целое число, которое представляет сколько секунд в видеоролике.

Я проверил, чтобы убедиться, что это работает со следующей функцией:

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

Так что теперь все, что нужно сделать, это обновление length всякий раз, когда эта функция возвращает целое число, делящееся на 10.

I «Конечно, мне придется использовать AJAX здесь. Но я не слишком уверен в лучшем способе перейти к следующему шагу, или, может быть, даже если лучше всего записать эти данные.

Любые предложения?

Edit:

Используя предложения от 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, чтобы поражать только каждую секунду, но я уверен, что это будет довольно просто. Также можно добавить max_duration_reached.

Answer 1

Ajax - именно то, что вам нужно. Учитывая, что вы используете рельсы, я предполагаю, что у вас есть 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 

Извините, если мой кофейник выключен, это было давно. Anyways, который отправляет тело json свойства length в конечную точку контроллера, используя PUT (поскольку мы обновляем запись). Не забудьте заполнить viewingsId из вашего файла cookie.

В стороне маршрутов, вы можете иметь стандартный ресурс здесь:

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 

Сильные параметры немного не является обязательным, просто пытается сохранить хорошие практики , Обновите разрешение на любые другие параметры, которые могут вам понадобиться. Я написал действие update, чтобы он мог работать с html-запросами (обновления формы). Надеюсь, что это поможет тебе.