So i always wanted a way to stream a video to the loading screen so i could make it fully custom and easy.
With this you can do many things (Stream sponge-bob if you really want to)
Why would you want to do this?:
Maybe your great at making trailer type videos and want your players to see something epic!
Have an image pulse colours?
The possibilities are endless.
The easiest way for me to achieve this was just by embedding a YouTube video.
Ive never touched HTML before so there may be ways to improve it.
Current features:
Video will resize to your resolution (Aslong as your aspect ratio is 16:9)
Audio is streamed from the video.
So this template features a sponge bob video for testing sake (Why sponge bob? WHY THE HELL NOT!)
This replaces your keks resource so please make sure to make a backup.
How to change the video URL:
Firstly download the resource here: keks.rar (22.3 KB)
Extract the keks folder and put it in your [test]/ folder (Remove or rename the old one first.)
Once you have done that head to the index.html
On line 7 is where you will find the link to the YouTube video.
Now the fun part, If you have uploaded your video or want use a video thats allready on youtube click on that video, At the top of the page in the URL box you will see something like this https://www.youtube.com/watch?v=CEs5x5ul2Oo
What you need to do is copy everything thats hightlighted here watch?v=CEs5x5ul2Oo
Now on line 7 you need to replace UjH6waMaBd4 with your snippet of URL from the step above.
Once thats done your good to go! Clear your cache and start your server!
Do note the audio comes through at 100% volume. i would suggest when creating a video to have the volume at a sweetspot before exporting.
Please feel free to link your videos down below so people can get some ideas etc
Also you gain 0 quality loss. But be warned if you try and stream a 4K video it may cause some users issues. Im not sure if it streams the highest quality or goes by your youtube settings.
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.
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
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
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&controls=0&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>
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!
