0

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?

user39063
  • 183
  • 1
  • 13
  • 1
    "after a simple click" is probably also some kind of delay. – Jonas Wilms Jul 23 '18 at 19:10
  • 2
    And it looks like if [pseudo-streaming](https://stackoverflow.com/questions/25669948/pseudo-streaming-an-mp4-file) is what you are looking for – Jonas Wilms Jul 23 '18 at 19:14
  • 1
    have you looked into putting the 'moov atom' at the beginning of your MP4 file... in other words "web optimizing" the video file. I have heard that this can reduce the delay before a video is ready to play. https://www.adobe.com/devnet/video/articles/mp4_movie_atom.html – WillD Jul 23 '18 at 20:11
  • Technically even Netflix is loading videos at the start. I believe they do it similar to Youtube in which they will display a lower/higher quality video dependant of one's internet speed. Perhaps try a test of loading a youtube video as the background to see if you can get the same effect? – rawnewdlz Jul 23 '18 at 20:21
  • You did not mentioned what serves that video (like nginx, apache, etc..) – bigless Jul 24 '18 at 00:40

1 Answers1

2

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

Offbeatmammal
  • 7,970
  • 2
  • 33
  • 52
  • 1
    Point 1 and maybe 4 are the only viable... preload auto is the default and loading 90MB to memory before being able to play it is... not instant. – Kaiido Jul 24 '18 at 23:46