Video receiving problem from Laravel to Vuejs - laravel

Question

I stored the video link in the database and stored the video in the public folder. a folder description is something like public/uploads/100/abcd.mp4.
I am reading this video from a Laravel method and receiving this video from Vuejs and trying to show the video in the <video> tag. I also tried to show the video using the direct link, something like <source src="/uploads/100/abcd.mp4">.
But this way I can only show the video but the video progress bar is not working and currentTime cannot be set this way because I tried to set it.
Maybe I need to receive the video in Vuejs using a different way. Please give me a solution to this. I am adding the Laravel method and Vuejs method here, which way i tried to receive the video, I don't know if it is the correct way to receive the video. Please give me the solution if you have any.
the video-tag
```
<video>
<source v-bind:src="axiosGetIntroVideo">
</video>
```
Laravel method from where I am getting the video path and reading the video and returning the video.
$data = Usercvvideos::select('id','userid','name','cv_video','upload_file_type')->where('userid', $id)->where('upload_file_type', $request->gettingFileType)->get();
$source_file = public_path()."/".$data[0]->cv_video;
$filesize = (string)(filesize($source_file));
$fileName = explode("/".$data[0]->userid."/", $data[0]->cv_video);
$originalFileName = $fileName[1];
header('Content-Type: video/mp4');
header('Content-Length: ' . $filesize);
header('Content-Disposition: attachment; filename="' . $originalFileName . '"');
header('Accept-Ranges: bytes');
return readfile($source_file);
Vuejs method from where I called the Laravel method written here and trying to receive the video and trying to show the video in <video> tag
async getIntroData(){
var gettingFileTypeByString={
'gettingFileType': 'introVideo'
};
let returnValue;
try{
await axios.put('url' + this.userId, gettingFileTypeByString
,{
responseType: "arraybuffer",
headers: {
"Accept": "video/mp4",
},
}
).then((response) => {
console.log(response);
returnValue = response.data;
});
let buffer = returnValue;
let videoBlob = new Blob([new Uint8Array(buffer)], { type: 'video/mp4' });
// let videoBlob = new Blob([new Uint8Array(buffer)]);
let url = window.URL.createObjectURL(videoBlob);
this.axiosGetIntroVideo = url;
}
catch(e){
console.log(e);
}
}
This way in Vuejs I tried to get the video but it is not working. please help me to get the video. I am stuck.

Answer 1

You should just record to db url where you uploaded file. Then just set that string to src of video. Also you'll need control attribute in video tag.