FAF Website Main Video
-
can be used webp, or smt that is better. Or some other types of streaming content
-
You need to make sure it works on mobile. I’ve had videos like this cause all sorts of issues like completely freezing the page or crashing the browser or like others said just eating a ton of data. Don’t assume that you know what is “ok” for someone else’s data usage. Just because your mobile plan can handle it doesn’t mean that others can.
You also need to make sure that it scales properly on small screens and doesn’t make the whole website derp out. You can use CSS to load different resources depending on the screen size, so I’d recommend either loading a lower res version of the video or maybe not loading a video at all on mobile.
-
@jip said in FAF Website Main Video:
@speed2 said in FAF Website Main Video:
Having an auto playing video on the website doesnt sounds like a good idea
It won't make sound - just an animation sequence like BAR has:
It still has 7,5MB
So if you're browsing on a phone and eats that much data for news, in our case for a webpage. I'd rather have a simple image -
Sounds good, for sure much better than an image from supcom 2.
-
Since it's a background video it can be scaled down and have reduced framerate. I remember back in the days people had contests how they could fit best looking videos into tiny gifs. No clue what can be reached today but I would aim for 2mb max on the main page.
-
For context, the existing image is already 2.3mb.
-
Well on a certain game we are using webm and manage to get 720p 30fps videos that are 1.30 minute long in a range of 10-30Mb depending on how much action there is in it. So honestly I can see 720p 30s video at 15fps doable in range of like 5Mb.
Actually might as well try seeing what will the trailer end up after moving it through ffmpeg with said settings in webm container.
-
@speed2 said in FAF Website Main Video:
@jip said in FAF Website Main Video:
@speed2 said in FAF Website Main Video:
Having an auto playing video on the website doesnt sounds like a good idea
It won't make sound - just an animation sequence like BAR has:
It still has 7,5MB
So if you're browsing on a phone and eats that much data for news, in our case for a webpage. I'd rather have a simple imageI get your concerns - we could detect the fact that you're on a phone and show a static image instead.
-
First of all i think that pages that auto-play videos in the background suck in general, i would leave such a page as fast as possible. Kinda has this trashy "we are trying to be flashy at the cost of usability" vibe.
@swkoll said in FAF Website Main Video:
For context, the existing image is already 2.3mb.
And that is why i have used my ad-blocker to block that image, because the image used to load really slowly for me and blocked other parts of the page from working fast. If it is a full HD picture then it should be possible to get it to be under 700KB in size, if you use a good format like JPG at reasonable quality
As for video content, I generally think a better idea would be to embed a Youtube trailer in the page, so that people can decide if they want to pay the data cost. Then there is the simple fact that hosting a video yourself SUCKS. A Youtube video will be
- encoded in the best way possible to be as small as possible
- will auto-downscale the video so that multiple resolutions are available
- will automatically select a good quality level depending on connection
- allows people to easily share that video on social media if it is actually a good trailer
I can tell you right now that you will not be able to get it working well by coding stuff yourself. Just use Youtube, please.
-
@rowey The video should be no more than 3 to 8 MB. We will strip the audio track to save size.
The 20 second C&C video shows the kind of content we want. Action shots transitioning into other action shots. A typical trailer or existing video likely will not be suitable.
@RandomWheelchair Good point - we will use a static image for mobile devices.
Also I wasn't aware the current image was 2MB. We can optimise that too.
@Brutus5000 If you're worried about server bandwidth then it's yet another reason to use Cloudflare...
@Eternal MP4 is fine for streaming content like this. If we included webp we would need to provide an mp4 failback anyway.
@Katharsas Hosting a video of this size ourselves doesn't really suck.
- It will be cached by browsers.
- It is streamed not downloaded.
YouTube is out of the question for a background video.
You are also an edge case that blocks the existing background image. We cannot design a webpage for someone using an adblocker to block existing images.
What we can do is keep this file super small and make it so that it falls back to an image for mobile phone users. We can optimize the current fallback image somewhat too.
-
Anyway, 2 minute video is a little bit too much now that I'm trying to do anything with it.
The bar one is just 35s one mp4. that weights 7-8mb. Meanwhile I currently got something like 47Mb for this 2 minute trailer we have or 28mb but I think it's to much of quality drop already.https://drive.google.com/file/d/1mnitiFntXdrgvLNtuBU7FGN9lk22pVHk/view?usp=sharing
https://drive.google.com/file/d/1nXHpkJYE8YEgR6VkZVnGOWidR6hvjFvj/view?usp=sharingBoth are 720p one is still buffering.
-
for the Video we were looking at ruffly 20-30 seconds as that a decent amount I fist thought off any more is a bit too long
-
The C&C one was 8.7MB
-
@kazbek Any chance you could make a version with no audio track and just 20 seconds worth of the best action scenes with a very short transition to and from black at the start and end so that it can loop without being jarring?
The scenes would need to be selected with consideration for the text that will sit on top of it.
-
@furyritchie said in FAF Website Main Video:
@Katharsas Hosting a video of this size ourselves doesn't really suck.
- It will be cached by browsers.
- It is streamed not downloaded.
YouTube is out of the question for a background video.
You are also an edge case that blocks the existing background image. We cannot design a webpage for someone using an adblocker to block existing images.
What we can do is keep this file super small and make it so that it falls back to an image for mobile phone users. We can optimize the current fallback image somewhat too.
Our webpage i supposed to be our landing page right? This means, it is supposed to make the best possible impression the first time a user lands on it, when he has nothing in cache. And we are, unlike Youtube, not using a CDN for self-hosted.
Yes, it is streamed, and if you go down this route please make sure that an Australien user with 16 Mbit downstream shared by family can experience the page without problems (but i will assume that nobody will test that, because this is what usually happens). Most likely they will end up with a stuttering, buffering background, because a full HD video stream can easily require 5-10 Mbit.
Also the ad-blocker story was not supposed to be a "case", i just wanted to tell you that even a 2 MB image on a landing page has the potential to effectively break the page, and that we have already had problems with content being hosted by our servers being slow to download in the past.
If whatever end-result will work on 3G mobile phone in a country not close to Germany, as well as on a 3-5 Mbit desktop connection im gonna stop complaining, but this whole idea is in my mind still really bad from a technical standpoint, and likely to end up with people coding something that "works for them" an then being called "good enough".
And all of that just so that things move in the background. I really don't get it. A good web page is fast and lighweight, and does not include a auto-on video.
-
@katharsas said:
Yes, it is streamed, and if you go down this route please make sure that an Australien user with 16 Mbit downstream shared by family can experience the page without problems (but i will assume that nobody will test that, because this is what usually happens). Most likely they will end up with a stuttering, buffering background, because a full HD video stream can easily require 5-10 Mbit.
The C&C demo we're testing with is 3.2mbps and Rowey has experimented with making it even lower than that.
Also the ad-blocker story was not supposed to be a "case", i just wanted to tell you that even a 2 MB image on a landing page has the potential to effectively break the page, and that we have already had problems with content being hosted by our servers being slow to download in the past.
Good call out. We're going to fix all the images because of your comment. The main image is 1.6MB when it can be 190KB. The footer image is also 1MB when it should be 100KB.
If whatever end-result will work on 3G mobile phone in a country not close to Germany, as well as on a 3-5 Mbit desktop connection im gonna stop complaining, but this whole idea is in my mind still really bad from a technical standpoint, and likely to end up with people coding something that "works for them" an then being called "good enough".
Yes it will default back to a static image for mobile phone users.
And all of that just so that things move in the background. I really don't get it. A good web page is fast and lighweight, and does not include a auto-on video.
The world has moved on from that. We want to showcase what the game is.
-
- People still trying to save some traffic.
-
Not even about traffic, I have like 900 mb/s internet and it still takes me 30 minutes to download 10 mb patches from the server, if this website will also be hosted on the perpetually bottlenecked server I pretty much expect a third of the US to have a problem with the video.
-
@ftxcommando It will actually be substantially faster than it currently is since it streams the video.
Though we're optimising images and taking 2.6MB out of the page load so the comparison evens out once that is sorted out.
We also need to look at a CDN for at least the main faforever domain. Some of the hold up here was the possible issues with Cloudflare and MSI files but we can just move them onto a separate subdomain (edit: the main page links to github, I can't recall where the client pulls them from but putting them on a separate domain away from the webpage/news would remove that as a problem).
-
@eternal said in FAF Website Main Video:
- People still trying to save some traffic.
Are you kidding me. Just because YOU have a decent internet connection at YOUR house in YOUR city does NOT mean that every other person in the world has the same experience. The internet is inherently flaky, and you must ALWAYS think about bandwidth requirements when creating something that will be served over a pipe which you have no control over.
