First of all, we need to talk about the source element, which is sort of the basis for some of these other elements. The picture element, which is sort of a fancier image tag about that in a second. There's audio and video codecs, or how audio and video can be stored and good algorithms are used to compress them. And then we have the audio element and the video element. And finally, the iframe. html five brought in support for writing media, in the backgrounds of these media supports, as the source tag tells the browser where to look for the file and offer several options based on what codecs the particular browser supports.

Alright, so the picture element allows you to set different images for different sizes of the screen. Because it gives you a fallback of the browser doesn't happen to support the picture element. And this is the source element uses a source set attribute, but within audio and video uses just the source attribute. There's also another way to do this using a source set attribute on the image tag itself. But I find this a little harder to wrap your mind around and the benefits are comparatively small at this time. Stage, it can be a little bit more efficient, give the browser a little bit more leeway in choosing the right image.

But picture element also allows you to do different images at different sizes, and do what's called Art directing, which allows you to put in different parts of an image that you might be interested in showing at the different sizes. So the picture element looks something like this, we have the source set here, with the actual file that we're gonna be using. And so your immediate query here with min width 40 M, as you may remember from the last class or from other classes, you've taken, maybe one m is equal to the default font size for the website. reason I'm associating the media query with the size of the font is that some people will make their font larger. And if we hook it into sort of the font size, then our media queries will still work. And they'll also work fine when we get to the right pixel size.

So it's just sort of a little bit more robust way to set our media query. Now our default is going to be This other image now in the first image, the zombie has no top hat. And in the second image, this fallback image, the zombie does have a top hat. So that's how we'll see the difference between the two images. And then finally, we have this picture. Now, if the browser didn't understand the picture element, or the source element, it would just skip those two, and it would just show the image element there.

So codec is a way of saving audio or video file compression algorithm. There's also container files, which is the extension of the file, and can hold a variety of different codecs. Not every browser supports every codec or even every container file. So some codecs are open source, but not well supported. Some are widely supported, but aren't is as good at compressing the file off even the video quality high, etc. So there are different codecs that are used for different purposes at different times.

Alright, so let's talk about audio. But a tag allows you to play audio directly on the page, you need to include the controls attribute to show the audio controls for the user. Otherwise nothing will actually be shown on the page itself. So the controls attribute is also a Boolean attribute, meaning that you don't have to say controls equals true or controls equals controls, you just have the word controls there, and it will work to add controls. So then we also have some source elements. So for instance, here we have three different source elements.

So so.org is a Ogg Vorbis file usually is pretty small, but not always well supported. And four a is probably something you're a little bit more familiar with. It's, it's the next the MP MPEG four specification, which is fairly high quality. Then we also have the mp3 which is probably a little bit lower quality, but has very wide support. Lastly, we had that link to the mp3 file, just provide that fallback in case somebody is using a browser that does not support the audio or source of them. There's also the video tag which works very similarly to the audio tag.

It also needs the controls attribute. So video controls, and then we have some sources. WebEx is a file format that gets the video very small But as of this recording really only works in Chrome. avi is the OG thi ora, which is the video component of Ogg Vorbis, or the Ogg specifications, the open source specification. Then we have the mp4. And finally, we have a link for those browsers that don't support video or source.

Lastly, we're going to talk about the iframe element, which is used most often to embed videos. Technically, an iframe is displaying one webpage within another. When you are embedding a video in your page, you're basically saying take the YouTube page and stick it in this other page here. Here's an example of an iframe. We have a width and height set, we have a source set the YouTube video, we have frame border and allow allows a bunch of different options and allow full screen and then the closing of the iframe. Alright, let's take a look at these in code.

First, we have a picture element, same picture element I showed you earlier. And then if we change this sighs here, eventually should get a top hat. So as we came down to be within 40 M, the page size being within 40 on the top that appeared and if I go above that, again, it drops out. So it's just a way of showing different images. Now this HR here is just a horizontal rule, and I'm just using it as a separator. So this is the horizontal rule here.

Or here we have audio, brains, brains. Lovely audio, because it's showing controls that's showing here. And it's showing these whatever of these files is most easily understood by the browser, or the first one that's understood by the browser it will use that so within Chrome I think, and four a and mp3 are both supported, don't believe August, but it is supported in Firefox and maybe another browser next week, video. So this is the videos straight video tag. And there's a video playing. It's just a quick video of these guys dancing.

And as you can see here, their controls are included. So we have our source which controls different sources and then fall back if we need it, which in this case we don't. And then here is an iframe, the same iframe we showed in the slides. So here it just is playing it through YouTube, which takes a little bit longer to thing and then it shows some other videos. Alright, that's it for multimedia hordes. Next up is HTML tables.