Dealing with Media

HTML Media

There are a few tags in HTML that allow us to add media like images, videos and audios into the webpage.

<img>

<img src="/media/myimage.jpg"

alt="description of the image here"

title="additional information here"

width="400px" height="300px">

Or simply:

<img src="/media/myimage.jpg">

The src attribute is required, and contains the path/url to the image you want to embed.

In Glitch, you can drag your into the assets folder, then click on the image and copy the url.

The alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility.

Screen readers will read alt text out to their users so they know what the image means.

Alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot.

The title attribute (different from alt) contains a text representing advisory information related to the element. The value of the title attribute is usually presented to the user as a tooltip, which appears shortly after the cursor stops moving over the image.

Use both width and height attributes to set the intrinsic size of the image, allowing it to take up space before it loads. You can also set the size of the image in CSS.

Video with controls:

<video width="320" height="240" controls>

<source src="myvideo.mp4" type="video/mp4">

</video>

Autoplay your video:

<video width="320" height="240" autoplay muted>

<source src="myvideo.mp4" type="video/mp4">

</video>

The controls attribute adds video controls, like play, pause, and volume. It doesn’t require any value.

Most of the browsers now don’t allow video autoplay unless it’s muted. So always add the muted attribute if you want your video to autoplay.

<audio controls>

<source src="myaudio.mp3" type="audio/mpeg">

</audio>

or:

<audio controls autoplay muted>

<source src="myaudio.mp3" type="audio/mpeg">

</audio>