[Release] Stream videos to your loading screen

This does not work for me at all. Gives me the youtube video but all black and a play button in middle but video does not play??? and yes i did everything as stated.

I got the same problem

make sure it looks like this:

https://www.youtube.com/embed/UjH6waMaBd4?autoplay=1

Not working for me just saying your browser doesn’t reconigse these types of formats.

Allright i may know why.

On the video at the bottom there is a share button, take the ling from that as it may be diffrent

It’s exactly the same. Could it be an issue that I’m using FX server?

Maybe, This was done via citmp

It works for me, but it looks like a 144p video. I tried a different embed link: https://www.youtube.com/embed/[MYVIDEO]?autoplay=1&vq=hd1080

It works when you paste it in Google Chrome but it doesn’t go in hd on loading screen.

1 Like

Awesome job! Very light weight… atleast now i dont have to host a gif and ogg for everyone! Thanks dude!

P.S dont suppose there is a way to keep the text overlays? and loading bar?

1 Like

This was my first attempt at HTM/CSS

There is more then likely a way to do this, Im guessing you would have to make the video go to the back, and have your text up front although im not too sure :slight_smile:

Hi there can you please tell me how i can modify the time for the loading screen? In that case my video can been watched for all the duration. I want to put 45 seconds…thanks for all

update : didn’t work… i have a vrp server

Well, ehm this is basically my edit of the loading screen, it has the loading bar as an overlay over the Youtube video, and I managed to get rid of the scrollbar on the side. Not very professionally coded or whatsoever, but it works and that’s good enough for me.

index.html
<html>
    <head>
        <link href="keks.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
html {
        overflow: hidden;
}
</style>
    </head>
    <body>
        <body bgcolor="#000000"> 
    <style>#selector {width:100%; height:100%;}</style>
        <div class="video-container"><param name="wmode" value="transparent" /><iframe width="1080" height="1920" src="https://www.youtube.com/embed/plAa7IGpLFA?autoplay=1;rel=0&amp;controls=0&amp;showinfo=0;wmode=transparent" frameborder="0" allowfullscreen></iframe></div>
        <div class="bottom">
            <div class="letni">
                <h2 title="Loading...">Loading...</h2>
                <h3></h3>
                <div class="loadbar"><div class="thingy"></div></div>
                <p>yo momma, she's a bit on the heavy side.</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>

3 Likes

How do you turn down the volume of the video

I am not sure that this still works - was made for cfx - if your looking for a simple video loading screen check out my release here - [Broken] YouTube Video Loading Screen - hope this helps!

i was wondering if there is a way to combine the video streaming from this and esx cinema?

1 Like

doesnt work followed instructions exactly keeps giving errors

Helo, is here some way to get out control and stream video from computer?

is there any way to set the YT VIDEO to full screen, i dont find any other scripts who can play my yt video

Hi,
Inside the html, I think I remember that there is a command request 1080p video, when I place it in IE for a test, it’s running 1080p, but why I became to 144p when I put it into the server? Is that possible to give me a hand on it? Thanks

same problem