Cómo incrustar video y audio en su HTML

We now have this video on our page. But there’s a problem. This video isn’t playing automatically and there are also no controls to start the video.

We will have to add controls manually by using the controls attribute to our video element.

This attribute doesn’t take any value, because it’s a boolean attribute. That means it can either be true or false.

Now, by having the controls attribute in our video element, it means that it’s true and it will display playback controls.

Now, if we remove the controls we could also make the video autoplay, by using the autoplay attribute. This is also a boolean attribute.

Now, as you can see the video is playing by itself, and there’s no control. So, we didn’t actually start the video, but we also can’t stop the video.

We can also have controls and autoplay together.

You can provide different attributes to the video element, depending on the requirement.

I mentioned above that there are two different ways to add the video element. Let’s try the other way.

Source Element

Earlier we used a video element with self-closing tag, but here we will close the video element. So we have an opening and closing tag now.

We will also remove the type and source attributes from the video element and paste it into another element.

We just moved the attributes over to the source element.

Now, why would we want to do that?

Well, in most cases, with the video we will have multiple sources because we need to provide different file types depending on which browser is viewing your video because different browsers support different file types.

The video will look exactly the same. But now we have broader browser support.

Now, if we want to add attributes like controls, autoplay, loop etc, we will add it to the eo> element.

Audio Element

The io> element is very similar to the video element. However, the only major difference is that there are no visuals.

We can use the audio element to play an audio file on our web page — such as an mp3 file.

Now, just like the video tag, there are two different ways to do this.

• Use a single tag representing the entire element.
• Opening and closing tag with the child elements in between.

Now, we’ll have an opening and closing audio tag, and then we will add the source element in between.

The folder structure might look like this:

|-- project |-- audio |-- sample.mp3 |-- sample.ogg |-- css |-- main.css |-- normalize.css index.html

There is no controls attribute given to the io> element in the example above, s o the <audio> element won’t show up in the HTML document.

Now, you can see that there are only a few key differences here. The value in type attribute is changed from “video/mp4” to “audio/mp3”. In the src attribute, we’ve changed from a video file with .mp4 extension to an audio file with .mp3 extension.

Now, just like the video element, we won’t actually be able to stop or start the audio without any controls. So, we will be adding the controls attribute to the audio element.

You can also add other attributes in the io> element like autoplay, loop etc.

We have covered the essentials of audio and video elements in HTML.

You can learn more about audio and video in the links given below:

• MDN Web docs — Video
• MDN Web docs — Audio

I hope you’ve found this post informative and helpful. I would love to hear your feedback!

Thank you for reading!