0

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?

VinnyGuitara
  • 605
  • 8
  • 26
  • 1
    does your prod server have the same config as dev (does it support byte-range requests)? How's your bandwidth in Prod vs Dev (local network will always be a lot faster) is your video optimized for streaming - https://stackoverflow.com/questions/32937114/set-up-buffering-for-video-object/32959717#32959717 – Offbeatmammal Nov 28 '16 at 04:26
  • I had to optimize for streaming and move the metadata from the end of the file to the beginning. If you make this an answer I will accept it. Thanks for pointing me in this direction. – VinnyGuitara Dec 02 '16 at 19:14

1 Answers1

1

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

Offbeatmammal
  • 7,970
  • 2
  • 33
  • 52