[Solved] Is there a way to stream a video/gif to the loading screen?

FiveM Resource Development Discussion
1

Never mind, I figured it out xD

https://gyazo.com/89a4390ff5145b51d90f447bc8d94477

1 Like
2

Yes, open it, we’ll laught together :stuck_out_tongue:

1 Like
3

I got it to stream the video (using another resources gif as a template)

but its on top of everything, How do i put it to the back?

html:

<html>
    <head>
        <link href="keks.css" rel="stylesheet" type="text/css" />
    </head>

    <style>#selector {width:100%; height:100%;}</style>
 <!-- If you want change the background please, change the background.gif to your link -->
 <!-- Note speedplay.fr is my domaine expire in 2018 so if the gif dosen't work in 2018 that is normal -->
    <img src='http://speedplay.fr/background.gif' id='selector'/>
    
    <body>
       <audio id="Loading" autoplay loop >
         <source src="music/Loading.ogg" type="audio/ogg">
    </audio>
    <script>
     var vid = document.getElementById("Loading");
     vid.volume = 0.1
    </script>
        <div class="backdrop">
            <div class="top">
                <h1 title=""></h1>
                <h2 title=""></h2>
            </div>

            <div class="letni">
                <h2 title="Loading...">Loading...</h2>
                <h3></h3>
                <div class="loadbar"><div class="thingy"></div></div>
                <p>Under Development</p>
            </div>
            <div class="bottom">
                <div id="gradient">
                </div>
            </div>
        </div>

<script type="text/javascript">
// this will actually restart the loading bar a lot, making multiple loading bars is an exercise to the reader... for now.
// for a set of possible events, see https://github.com/citizenfx/cfx-client/blob/up-master/components/loading-screens-five/src/LoadingScreens.cpp
var count = 0;
var thisCount = 0;

const emoji = {
    INIT_BEFORE_MAP_LOADED: [ '🐌' ],
    INIT_AFTER_MAP_LOADED: [ '🐘', '🐤' ],
    INIT_SESSION: [ '💲', '💳', '📌' ],
};

const handlers = {
    startInitFunctionOrder(data)
    {
        count = data.count;

        document.querySelector('.letni h3').innerHTML += emoji[data.type][data.order - 1] || '';
    },

    initFunctionInvoking(data)
    {
        document.querySelector('.thingy').style.left = '0%';
        document.querySelector('.thingy').style.width = ((data.idx / count) * 100) + '%';
    },

    startDataFileEntries(data)
    {
        count = data.count;

        document.querySelector('.letni h3').innerHTML += "\u{1f358}";
    },

    performMapLoadFunction(data)
    {
        ++thisCount;

        document.querySelector('.thingy').style.left = '0%';
        document.querySelector('.thingy').style.width = ((thisCount / count) * 100) + '%';
    },

    onLogLine(data)
    {
        document.querySelector('.letni p').innerHTML = data.message + "..!";
    }
};

window.addEventListener('message', function(e)
{
    (handlers[e.data.eventName] || function() {})(e.data);
});
</script>
    </body>
</html>

css:

body
{
    margin: 0px;
    padding: 0px;
}

.backdrop
{
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    background-image: url(loadscreen.jpg);
    background-size: 100% 100%;
}

.bottom
{
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 100%;
}

#gradient
{
    position: absolute;
    bottom: 0px;
    width: 100%;

    height: 25%;

    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}

@font-face {
    font-family: 'BankGothic';
    src: url('bankgothic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

h1, h2 {
  position: relative;
  background: transparent;
  z-index: 0;
}
/* add a single stroke */
h1:before, h2:before {
  content: attr(title);
  position: absolute;
  -webkit-text-stroke: 0.1em #000;
  left: 0;
  z-index: -1;
}


.letni
{
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 10%;

    z-index: 5;

    color: #fff;

    font-family: "Segoe UI";
}

.letni p
{
    font-size: 22px;

    margin-left: 3px;

    margin-top: 0px;
}

.letni h2, .letni h3
{
    font-family: BankGothic;

    text-transform: uppercase;

    font-size: 50px;

    margin: 0px;

    display: inline-block;
}

.top
{
    color: #fff;

    position: absolute;
    top: 7%;
    left: 5%;
    right: 5%;
}

.top h1
{
    font-family: BankGothic;
    font-size: 60px;

    margin: 0px;
}

.top h2
{
    font-family: BankGothic;
    font-size: 40px;

    margin: 0px;

    color: #ddd;
}

.loadbar
{
    width: 100%;
    background-color: rgba(140, 140, 140, .9);
    height: 20px;

    margin-left: 2px;
    margin-right: 3px;

    margin-top: 5px;
    margin-bottom: 5px;

    overflow: hidden;

    position: relative;

    display: block;
}

.thingy
{
    width: 10%;
    background-color: #eee;
    height: 20px;

    position: absolute;
    left: 10%;}
4

There’s a resource on here that allows YouTube video streaming for the loading screen

5

Yeah its my release xD