jrmy_loadscreen

A polished FiveM loading screen with selectable background videos, a responsive interface and reliable media fallbacks.

Developed by Jaramiyo.

Features

• Spanish and English interface.
• Local image, direct video and YouTube modes.
• Multiple direct background videos with individual fallback sources.
• Previous, play or pause and next playlist controls.
• Optional sound controls for direct background videos.
• Automatic fallback from YouTube to direct video and then to a local poster.
• Support for public FiveManage video URLs.
• Optional local or remote music playlist.
• Updates, rules, team and gallery sections.
• Configurable community links and server identity.
• Real FiveM loading progress with localized stages.
• Smooth manual shutdown with a safety timeout.
• Responsive layouts for widescreen, 4:3 and low-height displays.
• Reduced-motion support and keyboard navigation.
• No framework or database dependency.

Installation

1. Copy jrmy_loadscreen into your server resources folder.
2. Disable any previous loading screen resource.
3. Add the resource to server.cfg.

ensure jrmy_loadscreen

4. Restart the server.

The resource works with Qbox, QBCore, ESX and standalone servers.

To hide FiveM's native loading spinner over the interface, add this optional setting:

setr sv_showBusySpinnerOnLoadingScreen false

Configuration

Open config.js to change the language, server name, text, links, sections, media and music.

Set locale to es or en. Players can also switch language during loading when allowLocaleSwitch is enabled.

All editable content accepts both languages:

headline: {
    es: 'Tu nueva historia empieza aquí.',
    en: 'Your new story starts here.'
}

Framework-controlled closing

The loading screen closes automatically when the network session starts. To close it from your own client flow, add these settings to server.cfg:

setr jrmy_loadscreen:auto_close false
setr jrmy_loadscreen:timeout 180000

Then use either option from a client script:

TriggerEvent('jrmy_loadscreen:close')
exports.jrmy_loadscreen:close()

The timeout is a safety fallback between 30 and 600 seconds. If you rename the resource folder, use the new resource name in the export call.

Background media

The local poster is always loaded first and remains available if external media fails.

Image

media: {
    mode: 'image',
    poster: 'assets/background.webp'
}

Video playlist

Set the media mode to video and add each selectable clip to video.items. A clip can use a local file from html/media or a public HTTPS URL such as a FiveManage file link.

media: {
    mode: 'video',
    poster: 'assets/background.webp',
    video: {
        audio: false,
        volume: 0.7,
        timeout: 9000,
        autoplay: true,
        autoplayNext: true,
        loopPlaylist: true,
        startIndex: 0,
        items: [
            {
                id: 'city-night',
                title: {
                    es: 'Noche en la ciudad',
                    en: 'City at night'
                },
                poster: 'assets/background.webp',
                sources: [
                    { src: 'https://r2.fivemanage.com/your-file/city-night.webm', type: 'video/webm' },
                    { src: 'media/city-night.mp4', type: 'video/mp4' }
                ]
            },
            {
                id: 'community',
                title: {
                    es: 'Nuestra comunidad',
                    en: 'Our community'
                },
                poster: 'assets/gallery-01.webp',
                sources: [
                    { src: 'https://r2.fivemanage.com/your-file/community.webm', type: 'video/webm' }
                ]
            }
        ],
        sources: [
        ]
    }
}

Each entry in items is one video. Its sources are fallback versions of that same clip and are tested in order. The optional item poster is shown while that clip loads; the main media poster is used when an item does not define one.

• autoplay starts the selected clip automatically.
• autoplayNext advances when a clip finishes.
• loopPlaylist returns to the first clip after the last one.
• startIndex selects the initial clip using a zero-based position.

Players can use the on-screen controls to select the previous or next clip and pause or resume playback.

Legacy single video

The original video.sources format remains supported when video.items is empty. These sources are fallback versions of one background video.

video: {
    audio: false,
    volume: 0.7,
    timeout: 9000,
    autoplay: true,
    autoplayNext: true,
    loopPlaylist: true,
    startIndex: 0,
    items: [],
    sources: [
        { src: 'https://r2.fivemanage.com/your-file/background.webm', type: 'video/webm' },
        { src: 'media/background.mp4', type: 'video/mp4' }
    ]
}

When audio is enabled, the video starts muted so autoplay remains reliable. Use the sound button or press M to enable audio after the page opens.

Use the public file URL returned by FiveManage. API keys must never be placed in config.js. Keep hosted videos retention-exempt and use a codec supported by FiveM's browser.

YouTube

media: {
    mode: 'youtube',
    poster: 'assets/background.webp',
    youtube: {
        url: 'https://www.youtube.com/watch?v=VIDEO_ID',
        startAt: 0,
        timeout: 12000
    }
}

YouTube is displayed in a dedicated player. The selected video must allow embedding. If the API, autoplay or video fails, the resource tries the configured direct video playlist before returning to the poster.

Music

Place audio files inside html/media, enable the player and add tracks in config.js.

music: {
    enabled: true,
    autoplay: true,
    volume: 0.28,
    tracks: [
        {
            title: 'Night Drive',
            artist: 'Your Artist',
            src: 'media/night-drive.mp3',
            cover: 'assets/avatar.webp'
        }
    ]
}

Autoplay with sound can be blocked until the player clicks or presses a key. Background video audio remains muted while the music player is enabled so both sources never compete.

Recommended media

• Use a WebP poster close to 1600×900 and keep it below 500 KB.
• Prefer MP4 H.264 or WebM with a moderate bitrate.
• Keep loading videos short and optimized.
• Use HTTPS for remote media.
• Test every remote URL from a clean FiveM connection.

License

MIT © 2026 Jaramiyo