DEV Community

Cover image for HTML THE GOLDEN LUTE
Manu Martinez
Manu Martinez

Posted on

3 1

HTML THE GOLDEN LUTE

Hello, tribe! Today we are going to talk about the multimedia that HTML allows us to have in our web pages! let's start:

In case we want to put a video we have to use the <video> tag and in case of audio <audio>, which shares almost the same attributes and functions as video.

Video

has the following attributes:

  • src
  • poster
  • preload
  • mediagroup
  • autoplay
  • loop
  • muted
  • controls
  • width
  • height

Audio

has the following attributes:

  • src
  • preload
  • mediagroup
  • autoplay
  • loop
  • muted
  • control

example

<video src="..." ></video>

<videos>
  <source src="..." type="video/mp4" />
  <source src="..." type="video/webm" />
</videos>

Enter fullscreen mode Exit fullscreen mode

Formats

For audio:

  • MP3
  • AAC
  • Ogg
  • Opus

For video:

  • MP4,
  • WebM
  • AV1

These are some examples of formats, they are not the only ones, nor all of them.

👽⚡ Curious facts:

if we drag a video to the browser window, we will see that it starts to play in it!
If you want to insert videos from Youtube or another alternative service, you should use the HTML iframe tag instead of the <video> tag.

Well guys I think that's all for today! Thanks for following my blog and always remember to be the best version of you! 💪

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay