Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Another option we have is to autoplay the video or audio, which means it will play automatically once the page loads without any interaction from the user. This can be useful in cases where you know your user will watch the video first. Think of a YouTube video being played back on the YouTube site. When you go to the video's page the video starts playing automatically because you're obviously there to watch that video. So it doesn't make sense to make you click play to start it. So to add autoplay, first let's go back our code and we're now in the 2-04 folder of the exercise files.
To add it, we just add the autoplay attribute. It's not a Boolean attribute, so it's just true or dalse and we just include it to turn it on or exclude it to turn it off, and we can save that, and jump back to our web browser and reload it. (Music playing) See that the video starts playing automatically. That was easy. Let's go back, and do the audio just to make sure that works and we will delete it from the video so they're not playing at the same time. All right I'll save our audio tag and reload.
(Music playing) And the audio is playing automatically. Awesome. Now if you are loading that from your computer it probably started immediately. If you are loading the videos from the Internet, you might notice a pause and that's just the video or audio player buffering enough data so that it can play back without stopping. One thing to note is that autoplay like preload is disabled on iOS devices like the iPhone. This goes along with Apple's decision to protect their user's bandwidth since mobile bandwidth can be expensive. So on an iPhone in order for the video to play it all the user has to interact with the video. There is no autoplay option.
But otherwise for the majority of browsers and devices that is how we autoplay the video. This podcast is a good example of a page where you might choose to use autopsy, for the video version at least but not the audio version. On pages not like this one, be careful you're not annoying your users by autoplaying a video they don't want to watch.
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.