CODEWITHSUNDEEP
javascripthtmlcssvideo
user39063
user39063

Reputation: 325

How can I make a HTML Video Background to play instantly?

currently I have a problem with a project. I have a full HD video I'd like to play in Background. The video is h264 encoded. The Problem is, that the video is quite long, so it has 90MB. But even with my 200MBit connection I have to wait about 5 seconds before the video starts to play.

What can I do to prevent this?

I use this code:

<video autoplay muted loop id="myVideo">
  <source src="video.mp4" type="video/mp4">
</video>

I'd like to have the same performance, like Netflix. After a simple click the video just starts.

How is it possible?

Upvotes: 0

Views: 2606

Answers (1)

Offbeatmammal
Offbeatmammal

Reputation: 8236

There are a few things you can do to help:

1/ optimize the video for fast start. The MOOV atom in an MP4 file is normally at the end which means it has to get to that before it will start playing. Using ffmpeg you can move that to the front:

ffmpeg -i source.mp4 -a:v copy -a:c copy -movflags faststart output.mp4

(this will copy the video and audio with no changes, just change the package)

2/ you could add the preload attribute to the video source to allow the browser to optimize based on it's own rules what pre-loading it's going to do

<video preload="auto" muted loop....>

which will help, but still not give you 'instant' start.

3/ Depending on the size you might want to preload the video into a blob when the page is loading so you can show the 'play' button when it's fully buffered and ready to go. See this answer for a solution (rather than re-typing it here)

4/ Most browsers have support for adaptive streaming (HLS or MPEG-DASH) so you could create fragmented mp4 files which will allow 'instant' start at a low bitrate/quality that ramps up as the browser/video player (eg jwPlayer) detects and adapts to network conditions

Upvotes: 2

Related Questions