How do I get video to load faster on a web page?

Question

I am beginning to add more video to web pages, but being new to the task I am trying to find the right balance between quality and load time.

I added two videos to this page (scroll down just past the red car) and you can see the videos. The first one is 720p but takes forever to load.

Here is the code I am using:

<video autoplay="" class="video" loop="" muted="">
  <source src="/assets/video/Newport-beach-video.mp4" type="video/mp4" /> 
  Your browser does not support video.
</video>

I have researched html 5 and video but I would really like to find out what the optimal encoding for web-based video is and how to optimize loading on web pages.

Answer 1

As Madness says above, hosting videos is a specialised area and the balance of quality vs speed is key as you have noted.

It is common to use separate web servers for different type of content on websites, typically static vs dynamic content, but also for specialised content like video.

Some suggestions in rough order of complexity/expense for your case:

• host the videos on amazon S3, using their CDN Cloudfront to help speed up delivery (example discussed in blog here: https://aws.amazon.com/blogs/aws/using-amazon-cloudfront-for-video-streaming/)
• Host the video on a specialised streaming video hosting site such as Brightcove, Wistia etc. (example guidelines: http://support.brightcove.com/en/video-cloud/docs/quick-video-publishing)
• Set up your own streaming server to host your videos (example overveiw: http://www.wowza.com/uploads/wowza4/documents/WowzaStreamingEngine-Product-Overview_final.pdf)

It is worth understanding how a typical streaimg server balances quality and speed to help you decide the best approach: they use a technique called adaptive bit rate streaming.

This essentially creates multiple bit rate versions of your video and then breaks them up into equal chunks (equal from a 'time' point of view, not size). The client then can request the bit rate for the next chunk it requires from the most appropriate bit rate for the current network conditions - if the network is bad at the moment it will get a low bit rate chunk and if it is good a high bit rate chunk.

Typically, videos start either at a low bit rate or a medium bit rate to allow quick start.

You can see this in action on YouTube if you look at the stats while playing back a HTML5 video.

Using one of the hosting services will hide all this complexity from you, hence their popularity...