How to store video playing progress time in database in Laravel - php

Question

I have a users table and lesson table. In users table I have watch_history column in which I want to store the data of current playing lesson_id and currentTime of video so the user can continue watching from skip or left video.
I am new to ajax so I don't know how to send the data continuously to database using ajax.
This is my JS code which is printing the currentTime in console.
<script>
var vid = document.getElementById("player");
$(function() {
var timeout;
$("#player").on("playing pause", function(e) {
// save reference
var v = this
// clear previous timeout, if any
clearTimeout(timeout)
// call immediately if paused or when started
performaction(v.currentTime, v.duration)
// set up interval to fire very 5 seconds
if (e.type === "playing") {
timeout = setInterval(function() {
performaction(v.currentTime, v.duration)
}, 3000)
}
})
function performaction(currentTime, duration) {
console.log(currentTime);
}
})
</script>
How can I send the timing of video with lesson id in one array using ajax in Laravel. I am using the plry.io video player. This above JS code is present on the Lesson_video.blade.php page on which I have the lesson id.
I am working on a college project.

Answer 1

In your html:
<input type="hidden" name="_token" value="{{csrf_token()}}"/>
In your javascript do this:
function performaction(currentTime, duration, videoId){//pass video id to this function where you call it.
var data = {time: currentTime, duration: duration}; //data to send to server
var dataType = "json"//expected datatype from server
var headers = { 'X-CSRF-TOKEN': $('input[name="_token"]').val()}
$.post({
url: '/saveTime/'+videoId, //url of the server which stores time data
data: data,
headers: headers,
success: function(data,status){
alert(status);
var data = JSON.parse(data)
alert(data['message']);
},
dataType: dataType
});
}
function resumePlayback(videoId){//Ajax request for getting the time
$.ajax({
url: '/getTime/'+videoId,
success: function(data,status){
var data = JSON.parse(data);
if(status == 200){
document.getElementById('player').currentTime = data['playbackTime'];
alert(playbackTime);
}
},
dataType: "json"
});
}
In your routes/web.php:
Route::post('/saveTime/{video}', 'InstructorCourseController#saveTime')->name('video.saveTime');
Route::get('/getTime/{video}', 'InstructorCourseController#getTime')->name('video.getTime');//Route for getting the saved time
In your InstructorCourseController.php:
public function saveTime(Request $request, $video){
$request->validate([
'time' => 'required',
'duration' => 'required'
]);
$user = Auth::user();
if($user === null){
return response()->json(['message' => 'User not authenticated', 403);
}
$user_id = $user->id;
$video = Video::where('id',$video)->first();
if($video === null){
return response()->json(['message' => 'Video not found', 404);
}
$currentTime = $request->time;
$duration = $request->duration;
//save them somewhere
return response()->json(['message' => 'Time saved', 200);//send http response as json back to the ajax call
}
public function getTime(Request $request, $video){
$user = Auth::user();
if($user === null){
return response()->json(['message' => 'User not authenticated', 403);
}
$video = Video::where('id',$video)->first();
//get the time from saved time where you saved it with this data
$playbackTime = Somemodel::where('video_id',$video->id)->where('user_id',$user->id)->get()->last();//use this one if you insert the time instead of updating an existing row each time a time is saved.
$playbackTime = Somemodel::where('video_id',$video->id)->where('user_id',$user->id)->first();//use this one if you update the time instead of inserting a new row each time a time is saved.
if($playbackTime === null){
//there's no saved time
$playbackTime = 0;
}else{
$playbackTime = $playbackTime->currentTime;//use what column you saved the time in.
}
return response()->json(['playbackTime' => $playbackTime, 200);
}