Video and Audio - Chapter 8
Video and Audio
The latest version of HTML supports adding video to a website through the use of the <video> element, but it’s not completely straightforward because different browsers support different formats for video. So before we talk about how to do that, we will discuss an easy way to add video to your website.
The <iframe> element supports the use of video—in fact the <iframe> element allows you to essentially display another webpage, within your website.
YouTube supports the use of the <iframe> element. So if you have a video that you have created and posted to YouTube, you can display that video by using the opening <iframe> tag, filling in attributes like width and height, designating the source of the video and utilizing the closing tag.
<iframe width=“Value” height=“Value” src=“URL”> </iframe>
Video sharing sites usually display the <iframe> code for you when you select “Share” (or something similar that) under a video.
So if I wanted to share a video that I made about a book that I wrote, I would write the following code:
<iframe width="560" height="315" src="https:// www.youtube.com/embed/IZ-XLWOVqus?rel=0" frameborder="0" allowfullscreen> </iframe>
This would place the video right in the screen on my website and I could get the code directly from the site.
Now if I wanted to display and play an audio file on my website, I would have to (you guessed it) use the <audio> element and give the browser source information for the file.
If I have stored the audio file in the same folder as my webpage (i.e., index.html), then I can simply write:
<audio src=“filename” controls> </audio>
This will make controls appear on the webpage and a user will be able to click, “play”, to hear the audio. This can be done for any audio file—a podcast, music, etc. As long as it is in the right format (i.e., .mp3) it should be able to be played by many browsers.
If I save my audio file in a different folder than my webpage, say in a subfolder called, “media”, I would have to include that information along with the src attribute of my code (just like we had to do with images when they were saved in a different folder).
Let’s say I had an audio file named, sit.mp3, and it was saved in a folder called, media. I would code the addition of the audio file to my website in this way:
<audio src=“media/sit.mp3” controls> </audio>
Please note that you agree to our Terms and Conditions by downloading this content.