我想跟踪每个用户的视频观看次数,并在数据库中使用名为Viewings
的表格。它同时属于用户和视频,并记录观看的持续时间和已完成视频的百分比。
当点击播放按钮时,我想要找到一个基于id的现有Viewing,它存储在一个30分钟的持久cookie中(在首次点击播放按钮时创建,如果cookie没有&# 39; t已存在)。然后,我想使用length
事件监听器定期更新用户观看视频的每10秒Viewing
timeupdate
lengthWatched
属性。
我有一个JavaScript函数,它以整数形式返回video.addEventListener 'timeupdate', ((e) ->
console.log(lengthWatched(e));
return
), false
,表示当前视频中的秒数。
我已经过测试,确保使用以下功能:
length
所以现在我所要做的就是在此函数返回一个可被10整除的整数时更新#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
。
我非常确定我必须在这里使用AJAX。但是我不太确定进入下一步的最佳方式,或者即使有更好的方法来记录这些数据。
有什么建议吗?
修改 的
使用 agmcleod 和我自己的一些建议,我最终得到了这些有用的JS:
timeupdate
基本上使用 agmcleod 提供的相同控制器。我仍然在努力修复max_duration_reached
每1秒才会命中一次,但我确信它会相当简单。也可以添加function showAllVesselsProductsParent()
{ confirm ("test1");
showAllVessels('regular', 'vesselsExpandDown', 'vesselsExpandUp');
confirm ("test2");
showAllVessels('composite', 'compVesselsExpandDown', 'compVesselsExpandUp');
}
function showAllVessels(type, div1, div2){
confirm(type+"===="+div1+"======="+div2);
var tableId = "";
if(type=="regular"){
confirm ("First Time");
tableId = "vesselsTable";
}else if(type=="composite") {
confirm ("Second Time");
tableId = "compositeVesselsTable";
}
var vesselsTable = document.getElementById(tableId);
var vesselCount = vesselsTable.rows.length-1;
if(vesselCount>0){
var vesselId = "";
if(type=='regular'){
confirm ("regular");
vesselId = "vessel";
}else{
confirm ("compVessel");
vesselId = "compVessel";
}
for(i=0;i<vesselCount;i++){
if(type=='regular'){
var isDeleted = document.getElementById("addJobVessels["+i+"].isDeleted").value;
if(isDeleted != "true"){
confirm ("1");
document.getElementById(vesselId+i).style.visibility = "visible";
document.getElementById(vesselId+i).style.display = "block";
document.getElementById(div1).style.visibility = "visible";
document.getElementById(div2).style.visibility = "hidden";
}
}else{
confirm ("2");
document.getElementById(vesselId+i).style.visibility = "visible";
document.getElementById(vesselId+i).style.display = "block";
document.getElementById(div1).style.visibility = "visible";
document.getElementById(div2).style.visibility = "hidden";
}
}
}
}
。
答案 0 :(得分: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主体发布到控制器端点(因为我们正在更新记录)。请务必从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请求(表单更新)。希望对你有帮助。