CODEWITHSUNDEEP
javascriptvideohtml
VinnyGuitara
VinnyGuitara

Reputation: 605

HTML5 video not streaming and taking 90 seconds to load

I have an HTML5 video player:

<video width="800" height="475" id ="video" controls="" src="" autoplay></video>

That seems to be working 100% in dev but in production videos can take up to 90 seconds to load. I want to figure out if the html5 player is really a streaming player or if it requires a full download first? I was informed by a coworker that setting the tag like this:

<video width="800" height="475" id ="video" controls="" src="" preload="none" autoplay></video>

with the preload option to either none or metadata should force the browser to stream the video instead of buffering the entire thing. What are my options here? Should I abandon the html5 player? I was under the impression that the html5 player was the right way to do streaming video on our intranet. Any suggestions?

Upvotes: 0

Views: 4292

Answers (1)

Offbeatmammal
Offbeatmammal

Reputation: 8238

Because you're having to move the file over the public internet, rather than local network you'll want to use something like ffmpeg to move the meta data (MOOV atom) to the front of the video file so it can start streaming faster

./ffmpeg -y -i SourceFile.mp4 -s 1280x720 -c:v libx264 -b 3M -strict -2 -movflags faststart DestFile.mp4

The above will give you a 1280x720 output, at 3Mbps using h264 in an mp4 container, and will then do a second pass to move the moov element to the front of the file enabling it to start streaming faster (see this answer for some more detail).

You should also check that your Production server configuration matches your dev server, specifically the ability to support byte-range requests that allow more optimal streaming of content

Upvotes: 1

Related Questions