As MoritzLost says, downscale. Maybe put a link somewhere to the full-quality version for people that are interested. Lower rez will also lower resource usage on the client side. Even downscaling to 640p, 576p, or even 480p might be good, depending on the content, and how visible it will still be behind the text of your page.
Also, since EVERYONE that visits your site will be loading this video, it's worth taking extra trouble to make sure you squeeze out as much quality per bitrate as you can. Esp. if you're not planning to change the video very often. For h.264, that means feeding a lossless source to x264 with preset = veryslow
, crf = 26
(or 2-pass bitrate target). x264 is the best h.264 encoder. (independent testing of various h.264 encoders has confirmed this.) It has a lot of really clever algorithms for finding ways to make a really small file that looks good, given enough CPU time. (And can run fast if you need it to, but encode time isn't really relevant for this use-case: encode once, download and play MANY times.)
Do NOT play audio by default when your page loads. Hopefully sane people already know this, but MoritzLost was talking about audio. Pages that auto-play audio are widely loathed and regarded as evil.
If you have a link to a full-quality version of the video, you could include audio with that. 96kb/s is enough for AAC stereo to sound excellent. 64kb/s will still sound good. (as long as you don't use a bad encoder, e.g. anything in ffmpeg other than libfdk-aac
.
edit:
I had a look at paypal's video. (view page info -> media -> find the video -> save as).
mediainfo
output:
General
Complete name : /f/p/home-signup.mp4
Format : MPEG-4
Format profile : Base Media / Version 2
Codec ID : mp42
File size : 10.9 MiB
Duration : 1mn 11s
Overall bit rate : 1 276 Kbps
Movie name : Homepage SignUp - Alan Version
Album/Performer : Sorgel, Chase(AWF)
Composer : Sorgel, Chase(AWF)
Description : This video is about Homepage SignUp - Alan Version
Encoded date : UTC 2014-03-13 16:26:17
Tagged date : UTC 2014-03-13 16:26:29
Writing application : HandBrake 0.9.9 2013051800
Video
ID : 1
Format : AVC
Format/Info : Advanced Video Codec
Format profile : Main@L4.0
Format settings, CABAC : Yes
Format settings, ReFrames : 4 frames
Codec ID : avc1
Codec ID/Info : Advanced Video Coding
Duration : 1mn 11s
Bit rate : 1 273 Kbps
Width : 1 280 pixels
Height : 720 pixels
Display aspect ratio : 16:9
Frame rate mode : Constant
Frame rate : 30.000 fps
Color space : YUV
Chroma subsampling : 4:2:0
Bit depth : 8 bits
Scan type : Progressive
Bits/(Pixel*Frame) : 0.046
Stream size : 10.9 MiB (100%)
Writing library : x264 core 130 r2273 b3065e6
Encoding settings : cabac=1 / ref=1 / deblock=1:0:0 / analyse=0x1:0x111 / me=hex / subme=2 / psy=1 / psy_rd=1.00:0.00 / mixed_ref=0 / me_range=16 / chroma_me=1 / trellis=0 / 8x8dct=0 / cqm=0 / deadzone=21,11 / fast_pskip=1 / chroma_qp_offset=0 / threads=12 / lookahead_threads=4 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / bluray_compat=0 / constrained_intra=0 / bframes=3 / b_pyramid=2 / b_adapt=1 / b_bias=0 / direct=1 / weightb=1 / open_gop=0 / weightp=1 / keyint=300 / keyint_min=30 / scenecut=40 / intra_refresh=0 / rc_lookahead=10 / rc=crf / mbtree=1 / crf=23.0 / qcomp=0.60 / qpmin=0 / qpmax=69 / qpstep=4 / vbv_maxrate=20000 / vbv_bufsize=25000 / crf_max=0.0 / nal_hrd=none / ip_ratio=1.40 / aq=1:1.00
Encoded date : UTC 2014-03-13 16:26:17
Tagged date : UTC 2014-03-13 16:26:29
Color primaries : BT.709
Transfer characteristics : BT.709
Matrix coefficients : BT.709
So they used x264 via Handbrake, but they suck at choosing an appropriate CPU-time vs. rate-distortion tradeoff. ref=1,me=hex,subme=2
looks like the veryfast
preset. (x264 --fullhelp
to see how each preset differs from medium
, which uses the default settings for everything.) Luckily for them, the default crf 23
quality setting is about right for their use case. They could have saved I'd guess another 20% bitrate from the 1273kb/s they got from crf23 by using better settings, like veryslow
, or even just medium
or slow
.
They also decided to limit themselves to h.264 Main profile, for compat with some older Android / iOS devices, which is sadly still a good idea, I guess. (--profile Main
). Video that uses more bitrate than needed for the quality is kind of a pet peeve, so it really annoys me that people still distribute Baseline profile encodes. Main profile can't use 8x8dct, which hurts quite a bit, too, but at least it can use CABAC to save about 15% bitrate vs. CAVLC, regardless of absolute rez / bitrate / any other settings.
IDK if it's possible with HTML5 video to have a Baseline, Main, and High profile stream available. I know you can have mp4 and webm alternatives, but those are just containers.