CODEWITHSUNDEEP
htmlvideo
Rahul Iyer
Rahul Iyer

Reputation: 21005

When does video get downloaded from the source when using HTML 5 <video> tag?

The W3Schools page shows this example on how to use the video tag.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

My questions are:

  1. When does the video get downloaded to the users browser? At page load, or when he presses play?
  2. Is it browser dependent ? Is it possible that each browser downloads the video at different times ?

The reason I ask, is because we are exploring using a paid service for hosting our video files, rather than Google, so we don't have advertisements or other stuff mixed with our video, and are trying to calculate how much bandwidth we may use (Not everyone who visits our page, may choose to click "play" on the video).

EDIT - If we specify multiple types, like mp4, ogg etc, will all compatible supported types be downloaded ? Or just the first supported type?

Upvotes: 4

Views: 4200

Answers (2)

user1693593
user1693593

Reputation:

When does the video get downloaded to the users browser? At page load, or when he presses play?

It depends on the browser...

The preload should default to auto if not specified, but this is not always the case. Older versions of Safari, Opera, Chrome etc. may download the whole video if preload is not specified.

As in Robert's answer, you can define pre-load behavior using the preload attribute/property. If you use metadata then the browser will load enough (header) data to determine its dimension, length and format so it can update the video player window, set time and so forth.

This will be the best option IMO if you pay for bandwidth and want some control on this aspect. Using none is an alternative if you don't need to determine dimension, determine length etc. in advance.

There is however no guarantee for how much data that will actually be loaded by the browser, but up-to-date browsers do respect the intended purpose of the preload settings in larger degree.

The video player may not be as responsive as with metadata (or none) as there is typically no video ready in the buffer. auto can cause the video to be loaded in part or in full depending on browser. Newer Chrome and Firefox will only load a "flying-start" buffer until you play the video and then depending on other variables (cache, length etc.) may try to load the entire video.

If we specify multiple types, like mp4, ogg etc, will all compatible supported types be downloaded ? Or just the first supported type?

No, the browser will check the type first (or guess it from file extension if type is not supplied) without connecting to internet, and pick the first it "may" or "probably" can play (see the canPlayType() method). Try to always provide type (and codec if possible).

When this is determined the browser will go to next step, the pre-loading which require connecting to the file (except from preload="none").

Possible work-around

A work-around is to set the video source using JavaScript at the point of playing either by using a predefined element in the document or dynamically creating it.

This will of course introduce a delay in the start process. For a dynamically created video element you also need to check the video source types manually and handle the various events.

For example (assuming a video element exist in the document):

var video = document.getElementById('myVideoElement'),
    src = '';

if (video.canPlayType('video/mp4').replace('no', '').length > 0) {
    src = 'myVideo.mp4';

} else if (video.canPlayType('video/ogg').replace('no', '').length > 0) {
    src = 'myVideo.ogv';

} else if (video.canPlayType('video/webm').replace('no', '').length > 0) {
    src = 'myVideo.webm';

} else {
    /// sorry...
}

video.src = src;

Upvotes: 2

Robert Harvey
Robert Harvey

Reputation: 180787

You can specify attributes for the <video> tag that will "suggest" to the browser how you want the video to behave:

preload

This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:

  • none: hints that either the author thinks that the user won't need to consult that video or that the server wants to minimize its traffic; in others terms this hint indicates that the video should not be cached.

  • metadata: hints that though the author thinks that the user won't need to consult that video, fetching the metadata (e.g. length) is reasonable.

  • auto: hints that the user needs have priority; in others terms this hint indicated that, if needed, the whole video could be downloaded, even if the user is not expected to use it.

  • the empty string: which is a synonym of the auto value.

More info here.

In general, MDN is going to be a better resource for detailed information like this than W3SCHOOLS.

Upvotes: 3

Related Questions