Follow along as we learn about adding audio and video to a web page.
Adding Video to Your HTML
Many sites today use video, as it is something that audiences prefer. You can use multiple sources to allow the browser to play the one that it supports. This is especially handy if you are using a newer format, because you can also include older formats in case the user isn't in an updated browser. As with other resources on your site, you should use relative links for the src attribute.
✱ Using HTML5 to Add a Video
The video that we will embed below is included in the video folder of this project. Your zyBook explains how these tags work in detail, but today we'll write some minimum code to get the video to display on our page. Below, we'll add the video from the video folder in the project. Include the attribute that will display controls for the video, and set the width.
Video by Caleb Oquendo✱ Adding Video From YouTube
Adding a video from YouTube is as simple as copying and pasting some code. YouTube videos include embed code under the share menu for each video. Once it is open, you can choose to set some options or just copy the code and paste it into your HTML. YouTube uses a tag called an iframe to hold their videos. These can render more than just videos, though, including an entire web page.
Adding Audio to HTML
In this module, we saw that we can add audio to a web page using the HTML5 audio element. This allows you to add sound to a web page, but can definitely cause some accessibility concerns. At a minimum, you want to be sure to avoid playing the audio automatically and to include controls for the user that will allow them to adjust volume, pause, and play the video.
We are going to add the audio file from the audio folder in this project to the page using the HTML5 audio element.