Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
So there are good and bad times to use it and we will go over that in a second but 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 folder of the exercise files. I need to add the preload attribute and a preload attribute is an enumerated attribute 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 the first 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 go to 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 not concerned about bandwidth with this particular video, and so if the browser feels like 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 good to preload for their users because their users are on mobile connections where bandwidth could be expensive. So even with the auto setting, the video won't preload on an iPhone. It definitely makes sense for them.
All the desktop browsers I've tested however will preload the video if you use the auto setting. Okay, now the third option is metadata and save that and reload and see it looks the same. It's loading the first frame and the metadata. It's basically telling the browser to load the metadata of the video which includes information like the video frame size, duration and the first frame but not the rest of the video. This can help reduce the initial buffering time a little but not nearly as much as fully preloading the video.
Preloading the metadata can be helpful in cases where you want the browser to know how big the video is ahead of time so that the browser can size the space for the video correctly or if you have a poster frame burned into the first frame of the video. However as of now, the only browser that appears to support the metadata setting correctly is Firefox version 4. Chrome 10, Safari 5, and older versions of Firefox just preload the entire video as if you'd use the auto setting. If you are trying to decide which setting to use a good rule of thumb is to only preload the video if video is the main focus of the page or if you're pretty sure 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, so we will set preload to auto. The audio only version however is less likely to be played so we will set preload to none and save that. I would be suggesting using the metadata setting instead of the none setting because it's relatively a low amount of bandwidth and can't help the browser get a jump on processing video or audio.
But since most browsers are treating metadata just like auto and preloading the whole video or audio, none is the better choice.
There are currently no FAQs about HTML5: Video and Audio in Depth.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.