Videos are loading slowly to the player when it is uploaded with Tus-php

Question

I have used tus.js client and tus-php to upload videos to my server. But after uploading the files when I try to stream it on the player it is waiting the whole video to load to start playing.

This is my client

 const input = document.querySelector(".videoUploadInput");
        input.addEventListener('change', function(e) {
            // Get the selected file from the input element
            var file = e.target.files[0]
            const extension = file.name.split('.').pop();
            const uniqueId = Date.now().toString(36);
            const tempFileName = `${uniqueId}_${Date.now()}.${extension}`;
            // Create a new tus upload
            var upload = new tus.Upload(file, {
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}", // Include the CSRF token in the headers
                },
                // Endpoint is the upload creation URL from your tus server
                endpoint: '/tus',
                // Retry delays will enable tus-js-client to automatically retry on errors
                retryDelays: [0, 3000, 5000, 10000, 20000],
                // Attach additional meta data about the file for the server
                metadata: {
                    filename: tempFileName,
                    filetype: file.type,
                },
                // Callback for errors which cannot be fixed using retries
                onError: function(error) {
                    console.log('Failed because: ' + error)
                },
                // Callback for reporting upload progress
                onProgress: function(bytesUploaded, bytesTotal) {
                    var percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2)
                    console.log(bytesUploaded, bytesTotal, percentage + '%')

                    $('.progress-bar').css('width', percentage + '%').text(percentage + '%');

                },
                // Callback for once the upload is completed
                onSuccess: function() {
                    console.log("UPLOAD", upload);
                    $('.VideoInputFile').val('/storage/videos/' + tempFileName);
                    // console.log('Download %s from %s', upload.file.name, upload.url)
                    $('.submitButton').attr('disabled', false);
                },
            })

            // Check if there are any previous uploads to continue.
            upload.findPreviousUploads().then(function(previousUploads) {
                // Found previous uploads so we select the first one.
                if (previousUploads.length) {
                    upload.resumeFromPreviousUpload(previousUploads[0])
                }

                // Start the upload
                upload.start()
            })
        })

This is my backend service provider

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use TusPhp\Tus\Server as TusServer;

class TusServiceProvider extends ServiceProvider
{
    /**
     * Register services.
     *
     * @return void
     */
    public function register()
    {



        $this->app->singleton('tus-server', function ($app) {
            $server = new TusServer();

            $server->setApiPath('/tus');
            $server->setUploadDir(public_path('storage/videos'));

            return $server;
        });
    }

    /**
     * Bootstrap services.
     *
     * @return void
     */
    public function boot()
    {
        //
    }
}

I am sending video chunks to my route and my route initiates the provider and it combines the video chunks. But after it combines the video to a single file I am waiting the whole video to load to stream