Video: Preloading

One option we have with HTML5 video is preloading. Preloading means the browser will begin loading the video data as soon as the page is loaded instead of waiting until the user clicks Play. Without preloading, the user might have to wait a little bit while the video buffers enough data so it doesn't have to buffer again later during playback. A downside of preloading is that the video data is loaded every time the page is viewed, even if the user never watches the video. This can cause waste of bandwidth and unnecessary cost for you and your users, especially those on mobile devices where data transfer can be expensive.

In this course, author Steve Heffernan contextualizes the state of HTML5 audio and video and shows how to embed media into a web page using HTML5. The course sheds light on configuring the new HTML5 audio and video tags, ensuring backwards compatibility by setting alternative playback methods, encoding the needed file formats, and building custom controls with JavaScript. Also included are tutorials on troubleshooting known issues and reviewing real-world examples of HTML5 audio and video.

Preloading

One option we have with HTML5 video is preloading.Preloading means the browser will begin loading the video data as soon as thepage is loaded instead of waiting until the user clicks Play.Without preloading, the user might have to wait a little bit while the videobuffers enough data so it doesn't have to buffer again later during playback.A downside of preloading is that the video data is loaded every time the page isviewed, even if the user never watches the video.This can cause waste of bandwidth and unnecessary cost for you and your users,especially those on mobile devices where data transfer can be expensive.

So there are good and bad times to use it and we will go over that in a secondbut first let's see how it is that we do use it.To add preloading first let's go back to our code. We're now in the 2-03 folderof the exercise files.I need to add the preload attribute and a preload attribute is an enumeratedattribute which means it can take one of a limited number of values.In this case preload has three possible values: none, auto, and metadata.

So, if we set the value to none, Save that and go to our web browser, and re-load it,we can see that it doesn't actually load any of the video. It doesn't load thefirst frame, the size of video, or any information.That's what preload="none" does.It tells the browser to load nothing.Okay let's go back to our code and the next option is auto. So save that and goto our web browser and reload it.It's now loading that first frame, size of video, and it's continuing to load the entire video.

So what we're telling the browser with the auto setting is that we're notconcerned about bandwidth with this particular video, and so if the browser feelslike it's the best choice for the user, it can load the entire video.So basically we can either say don't preload or leave it up to the browser to decide.In the case of Apple IOS devices, they've made the decision that it's never goodto preload for their users because their users are on mobile connections wherebandwidth could be expensive.So even with the auto setting, the video won't preload on an iPhone. It definitelymakes sense for them.

All the desktop browsers I've tested however will preload the video if youuse the auto setting.Okay, now the third option is metadata and save that and reload and see it looksthe same. It's loading the first frame and the metadata.It's basically telling the browser to load the metadata of the video whichincludes information like the video frame size, duration and the first frame butnot the rest of the video.This can help reduce the initial buffering time a little but not nearly as muchas fully preloading the video.

Preloading the metadata can be helpful in cases where you want the browser toknow how big the video is ahead of time so that the browser can size thespace for the video correctly or if you have a poster frame burned into thefirst frame of the video.However as of now, the only browser that appears to support the metadata settingcorrectly is Firefox version 4.Chrome 10, Safari 5, and older versions of Firefox just preload the entire videoas if you'd use the auto setting.If you are trying to decide which setting to use a good rule of thumb is to onlypreload the video if video is the main focus of the page or if you're prettysure the user will watch the video and you want it to be responsive.

Otherwise set preloading to none, especially on pages that have many videos on them.So in the case of our page here, the podcast is the main focus of the page, sowe will set preload to auto.The audio only version however is less likely to be played so we will setpreload to none and save that.I would be suggesting using the metadata setting instead of the none settingbecause it's relatively a low amount of bandwidth and can't help the browser geta jump on processing video or audio.

But since most browsers are treating metadata just like auto and preloading thewhole video or audio, none is the better choice.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.