Please, I need your help.
I'm dealing with a background video for our homepage. This section has 100vh and is full-width. I'm using DIVI as a builder.
We hired a professional videographer to record a video for us. Now he asks me what should be the ideal:
frame size
frame rate
codec
file size
I've done some research and it seems like that the ideals are:
frame size: 1280 x 720
frame rate: 30FPS
codec: I don't know
file size: the less the better
Please, does anyone have any experience with background video? I'm pretty lost.
Also, would you upload it in the WordPress media library or would you use Vimeo/YouTube? I think you can't use YouTube as a background video, correct?
Thanks a lot!
Frame size:
1280 x 720 (=720p) means HD quality, which is quite good, but it is rather up to you, what quality do you find acceptable. Often 1920 x 1080 pixel (=1080p, fullHD) is used for background videos, like my main background video source is https://coverr.co/ where you can download free videos, specifically made for the purpose of being background videos. Those are 1920 x 1080 big. I would say, if you can ask for multiple files, ask for both, 720p and 1080p quality to be able to make a good decision.
The file size is connected to this, so the smaller frame sized video you will use, the smaller file size you will get.
Frame rate:
You could take a look at this image:
https://miro.medium.com/max/1300/1*uMlkXIMNF4VIZoi85NZ3aQ.png
to see what it means.
Movies on blu ray, dvd and cinema use 24 FPS, so that should be enough for you too. Here as well, the lower FPS means less filesize.
Codec:
h264
I'm a WordPress plugin developer and we always suggest this, when our users cannot figure out how to create a video, that plays on all browsers. So far it worked out well for everyone.
YouTube vs Vimeo vs MP4:
By default you cannot make Youtube videos to be backgrounds. There are some coding tricks, which might works, but I wouldn't suggest it.
Vimeo only allows background videos for Pro Vimeo users.
Using mp4 is simple, and also it works better in mobile and tablet devices. Some devices are opening up their Vimeo/Youtube applications automatically, when a Vimeo or Youtube video is started on a website. This is quite bad and your page will end up without background.
You should also note, that most browsers (even on desktop) only allow you to play videos automatically, if you will mute the video in the html code:
https://www.w3schools.com/tags/att_video_muted.asp
What #Gabor said.
1080p (1920 x 1080) is a good resolution for desktop.
If your user is on a mobile or other small-form-factor device it would be good if you could have the choice of 720p (1280x720) or even 360p (360x640). Those will save data downloads and fit the smaller devices. Look for a plugin that delivers the appropriate size video. You'll need a video file for each resolution.
Or don't show background video on users' mobile devices.
In your design think through what will happen in portrait mode. You probably want to clip off the right and left sides of the video material, so the center part fills the screen. So, the action should be in the center.
Is this video huge? Does it play for many minutes? If not, you absolutely should host it on your own site. Why get involved with, and pay for, some third-party media service if you don't have to? If it's really large (> 10MiB or so) you probably should ask another question and give more details.
Put no audio tracks in your background video files. Browsers restrict the playing of audio in background video, so there's no need to make your files fatter with audio tracks that won't play. (If you have audio, consider hosting a separate file to send users who click on the video to view it; most users won't.)
Use .mp4 files with H.264 video in them (one file per resolution). Other stuff, like webm with vp8 video, might generate smaller file sizes. But they don't play in as many makes and models of browser (I'm looking at you, Apple Safari.)
The video, in H.264 parlance, should be coded in the so-called Constrained Baseline Profile. It saves power when played on mobile devices and works better on slower devices.
Ask your videographer to give you streaming mp4 files (also known as fragmented mp4): they can start playing as soon as the first frame is downloaded.
Ask your videographer for advice about file bitrate. Your 1080p files should look decent coded with variable bit rate with a target of one megabit / second (8 seconds per megabyte). Your lower-resolution files will need a smaller bitrate: that's the point of them after all. But, your bitrate may vary. Action/adventure movies need a higher bitrate to look good than do talking heads.
As #Gabor mentioned, 24 frames/sec should be fine. 15 frames/sec is marginal. Ask your videographer what looks best for the material they created for you. Sometimes material shot at 30 frames/sec looks choppy at 24. (The way H.264 video works, once you get below 24 frames/sec the savings in file size aren't as dramatic as you might guess. 15 frames/sec takes more than half the file size of 30 frames/sec.)
this is a new behavior that started lately (last 2 months) in IOS mobile devices only. in android devices the pause/play button overlay still exists.
The behavior:
when embedding inline youtube video with controls=0, when the video plays, the only way to stop it is by clicking the middle of the video on the pause button overlay (except using an external button and the api off course). in desktop and android this works great but in IOS the pause button overlay in the middle of the video does not exists any more. this means that in order to give the user the ability to stop the video we must put controls=1 which is less convenient.
is this intended or a bug?
also, the property fs=0 (is to allow full screen) does not work on IOS.
Thanks
Can the Chromecast browser allow the iframe Youtube player to be set into full screen mode. Want to use this for a screen saver mode. Normally player not full screen, but if no sessions are doing anything then I want to take it to full screen while the playlist is playing.
I do not want to start it up in full screen, I want to switch to full screen after 3 minutes of inactivity on the chromecast receiver.
I am developing an application in Flex in which I need to play an MP4 file. The video is playing properly but not fitting in the video player window; some back area is left above and below the video clip. I tried to adjust the size but all in vain.
First of all, are you using the Flex "VideoPlayer" component?
If so, try changing the "scaleMode" property for your video player, by default it has the value of "letterbox", which is why you're seeing those black areas above and underneath the video. (Possible values are "none", "stretch", "letterbox", or "zoom".)
A video player can interpret a file(mp4,avi...)to picture on screen.
Qt can draw lines,rectangles,pixmap...to picture on screen.
What is the difference between them?
You're comparing apples to oranges. They are completely different.
A video player reads a video stream from a file and decodes it using a decoder (DivX, XviD, x.264, etc.), displaying the output on your screen.
Qt4's object painting allows you to paint pixels onto a QObject. That's basically it.
Video decoders are heavily optimized and some even use GPU acceleration. Qt4's object painting isn't made for rapidly-changing frames and is used do draw basic things.