[RELEASE] Loading Screen (MP4, AVI, ...)

Loading Screen

:computer: Description

A simple script to display the video of your choice as a loading screen on your FiveM Server.
This script has only been used in our last FiveM server Lagoon Island. This server is now closed but I wanted to share this script as it can be useful for the community.

Please note that this script is not working with YouTube links.

:page_with_curl: Required script

  • This script is standalone

:books: Install guide

  • To install this resource, simply download, drag & drop the folder ā€œloadingscreenā€ to your resources on your FiveM server/FTP.
  • Make sure to add : ā€œensure loadingscreenā€ in your server.cfg to start the resource.
  • Access the index.html file and edit the line 22 with the URL of your video :
    Line 22 : source src=ā€œhttps://cdn.lagoon-island.fr/videos/loading.mp4?v3ā€ type=ā€œvideo/mp4ā€

:scroll: Config

You can access the config.js for the following modifications :

  • Change the video URL

  • Change if you want the volume muted or not

  • Modify default video volume

:scroll: Alternate config

  • Modify cursor & buttons:
    Access folder ā€œimgā€, from here you can modify the cursor, volume buttons, that will appear during your loading screen. If you decide to replace them by your own images, please make sure to keep the same names (example: you decide to replace the cursor.svg, when you move your new file to the folder, once moved, make sure the name is back to cursor.svg with your new image).

  • Modify cursor size:
    In style.css go to lines 100 & 101 and choose the pixels size you want.

:facepunch: Credits

:white_check_mark: Download Link

10 Likes

This looks sick, iā€™m gonna test it now brother

Hey mate,

I hope this works for you. If you have any issue with it please let me know.

Cheers :wink:

1 Like

Easily fixable client sided but in the fxmanifest you havenā€™t specified an FX version <3

fx_version ā€˜adamantā€™

Have just uploaded the new fxmanifest.lua with the correct FX ā€˜adamantā€™.

Thanks for pointing this out @TRZL

1 Like

After editing the fx_version to ā€˜adamantā€™ it is now fixed and works perfectly. Brilliant resource and definitely saves server devs a lot of time <3

1 Like

Glad it can help :wink: good day AlxB

1 Like

:desktop_computer: UPDATE 24/08/2020 :desktop_computer:

  • Code cleaned up, I advise you guys to get the last file version from my github.
  • Added a config file (config.js) where you can manage different options, cf install guide & config. All credits go to @grobux for this.
  • Added the video preview in description.
1 Like

Yo, having real problems with this script. When I load it into my dev server there is no mouse, no audio, no video itā€™s a black screen and shows the mute button. This is all happening without even me changing anything. I also donā€™t understand how to get a video link ending in ā€œAVI or MP4ā€ without it being a yt link or some other stuff. Please help. https://i.gyazo.com/ac7cbc8aa7ec1d1641fb3038024fcdda.mp4

2 Likes

Hi @Graham_Jones,

When I load it into my dev server there is no mouse, no audio, no video itā€™s a black screen and shows the mute button.

It seems the config.js file is not working as expected with the video link.

Please go to the index.html file and edit it as follow :

Line 22 : source src=ā€œhttps://cdn.lagoon-island.fr/videos/loading.mp4?v3ā€ type="video/mp4"

or with the video link you want to show.

I also donā€™t understand how to get a video link ending in ā€œAVI or MP4ā€ without it being a yt link or some other stuff.

As you can see on my own video link, I ended up adding my video.mp4 file, directly into my web serverā€™s ftp. Giving me this direct video link : https://cdn.lagoon-island.fr/videos/loading.mp4?v3

Iā€™m quite sure you can reproduce the same with your game server hosting machine.

If you still have more issues with the script do not hesitate to contact me via direct message.

Cheers,
Slam

1 Like

Who made the graphics I am interested in purchasing custom made ones for myself

1 Like

Hi @houhy,

I just sent you a DM with the information you are looking for.

Have a good day,
Peace

1 Like

Hi, could you tell me how did you make this link https://cdn.lagoon-island.fr/videos/loading.mp4?v3

Hi @RekSePL,

The easiest way is too put the video in the ui folder of this plugin.
Then, you can use the filename of your video file as an URL.

For example, if your plugin is deployed in this folder: /myserver/plugins/loadingscreen/
You can put a video file myvideo.mp4 in this folder: /myserver/plugins/loadingscreen/ui/
And then, use myvideo.mp4 as the URL for your video (<source src="myvideo.mp4" type="video/mp4">).
You will have to restart your server instance to load these changes.
You can of course set the name of the video to whatever you like.

Good luck !

6 Likes

Ok but what if I wanted to use a webserver, how can i use that with the url.

Then you simply put your video on your webserver and update the URL with one pointing to the file on your hosting.
Iā€™m not sure to understand what problem youā€™re facing. Can you give more context?

1 Like

Hi there, love this script. Im just having trouble when adding in my video. I have just inserted the video into the UI folder, and just made it load via local folder instead of a FTP server link. The video plays just fine. However, the issue im running into is that the cursor disappears when hovered over the video. As well as the loading bar not showing up at all. And that blue border also does not show up, I was going to remove it or change it to something else. But I canā€™t even do that lol. Any help would be greatly appreciated.

The only thing i changed, was drag and drop the video into the ā€œuiā€ folder, then changed the html code to just " ā€˜intro.mp4ā€™ "

what loading screen template are you using?

Is possible to force player to watch the video untill the end and after the video end, the game load?