Failed to load resource: the server responded with a status of 404 (Not Found)

You cannot use blade syntax in JavaScript.. this code does not work:

var vidSources = [
    @foreach($videos as $video)
    "{{ $video->video_file }}",
    @endforeach
  ];

@nakov I think it will work as long as that code is inside a blade file? I could be wrong :)

@bosspogs If you press f12 and select network, can you then see the url it is trying to call. Can you perhaps see what is wrong with it?

okay sir. But even before I change into blade syntax when I put the files like this

var vidSources = [
    "videos/laughsone.mp4",
    "videos/fly.mp4"
];

Yes I see it sir on the network tab. It said Failed to response data. And by the way, I see in the console tab that I use the blade syntax, in the console it provides the video files so I think it is not a problem if you use a blade syntax file on the script code

In the network tab you can rightclick the failed link and select Open in new tab. Now you can see the link How does it differ from the correct one?

@bosspogs This will work for you:

<script >
        var vidElement = document.getElementById('video');
        var videos = JSON.parse('@json($videos)');
        
        var vidSources = [];
        for (let i in videos) {
            vidSources.push(videos[i].video_file)
        }
        
        var activeVideo = Math.floor((Math.random() * vidSources.length));
        vidElement.src = vidSources[activeVideo];
        vidElement.addEventListener('ended', function(e) {
            // update the active video index
            activeVideo = (++activeVideo) % vidSources.length;
            if (activeVideo === vidSources.length) {
                activeVideo = 0;
            }

            // update the video source and play
            vidElement.src = vidSources[activeVideo];
            vidElement.play();
        });
    </script>

404|Not Found sir

@bosspogs The url is '404|Not found' ? Please check again :)

By url i mean something like http://mysite.local/videos/laughsone.mp4

The url is http://127.0.0.1:8000/queue/videos/GJpq2NfwNONwl0SeYhQ1uSXKu6vhcmW6CVT9sPSS.mp4 and it shows 404|Not Found. Sorry I didn't explain it correctly.

Great. And what would the correct url be for it to work?

Is is the correct one ? http://127.0.0.1:8000/queue/videos/laughsome.mp4

For now is this one sir http://127.0.0.1:8000/queue/videos/GJpq2NfwNONwl0SeYhQ1uSXKu6vhcmW6CVT9sPSS.mp4 because I based my video on my database. This one http://127.0.0.1:8000/queue/videos/laughsome.mp4 that was before when I am not still using from my database. The http://127.0.0.1:8000/queue/videos/GJpq2NfwNONwl0SeYhQ1uSXKu6vhcmW6CVT9sPSS.mp4 is coming from the @foreach($videos as $video) "{{ $video->video_file }}", @endforeach

Does the file queue/videos/GJpq2NfwNONwl0SeYhQ1uSXKu6vhcmW6CVT9sPSS.mp4 exist?

yes in my database sir in my videos table

It should also exist on your computer. You cannot play a video based on a link in your database if that video does not exist on you harddrive :)

Okay sir. So I revert back to my http://127.0.0.1:8000/queue/videos/laughsome.mp4 where it is save in my hard drive at the same time it is under public/videos and it is the same sir.

var vidSources = [
  "videos/laughsone.mp4",
  "videos/vidone.mp4",
 ];

create a folder in public queue and move the videos folder to queue. After doing this the url will be http://127.0.0.1:8000/queue/videos/laughsome.mp4

It works now sir @cyberkingyash. How about if you want to play the videos from the database, it would still work?

The filenames need to match 😊

Okay sir I will try to figure out that one sir

@bosspogs How does the videos get into the database? It might be worth looking into saving the file in the correct place with the correct name, when you add them to the database :)

@bosspogs You mean to say you want to store the video only on database? If yes then you can't do this.

Here sir @sinnbeck

VideoController@store

public function store(Request $request)
    {
        if (request()->has('video_file'))
        {
            Video::create([
                'video_file' => $request->file('video_file')->store('videos', 'public')
            ]);
        }
      
        return redirect()->route('video.index')->with('success' , 'Video uploaded successfully');
    }

oh so sadly I cannot autoplay loop my videos from my database. So sir is it not possible to autoplay loop videos from db?

You are saving the videos in /videos but you try to find them in /queue/videos

$request->file('video_file')->store('queue/videos')

It doesn't work sir. In the network tab, this is the url http://127.0.0.1:8000/queue/queue/videos/YKL1YnxzyLPaFG6SgTRy1qh2A1l65Gio5orMUcFy.mp4. The queue was doubled. To avoid confusion, this is how I declared the route for that window page Route::get('/queue/{name}', 'DisplayController@show')->name('display.show');.

Wrap your links in url

{{ url('storage/'. $video->video_file) }}

Like this one sir?

var vidSources = [
  @foreach($videos as $video)
  "{{ url('storage/'. $video->video_file) }}",
  @endforeach
];