How Do I Upload a Mp4 Audio Video to My Website?
by Abhishek Jakhar
How to embed video and audio in your HTML
HTML allows us to create standards-based video and audio players that don't require the use of any plugins. Calculation video and audio to a webpage is near as easy as adding an image or formatting some text.
There are two different ways to include video elements. We volition be discussing both of them below.
Video Element
The <video> chemical element allows u.s.a. to embed video files into an HTML, very like to the way images are embedded.
Attributes we can include are:
-
srcThis aspect stands for the source, which is very similar to the src attribute used in the image chemical element. Nosotros will add the link to a video file in the src attribute. -
typeThis is going to be video/mp4 considering .mp4 is the format of the video we are using. We can also use unlike video formats like .ogg or .webm, so the value of type attribute volition change to video/ogg or video/WebM respectively.
Note: some common video formats are WebM, Ogg, MP4.
We at present have this video on our page. But there's a problem. This video isn't playing automatically and there are likewise no controls to commencement the video.
Nosotros will have to add controls manually by using the controls attribute to our video element.
This attribute doesn't have any value, because it'due south a boolean attribute. That means it can either be truthful or simulated.
Now, by having the controls attribute in our video element, it means that it'south true and it will display playback controls.
Now, if we remove the controls we could besides make the video autoplay, by using the autoplay aspect. This is too a boolean attribute.
At present, equally y'all can see the video is playing by itself, and at that place'southward no control. So, we didn't actually first the video, but we too 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 higher up that there are ii unlike ways to add the video element. Let's try the other mode.
Source Element
Before we used a video element with self-closing tag, only hither nosotros will close the video element. So nosotros 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.
<video> <source src="http://commondatastorage.googleapis.com/gtv-videos-saucepan/sample/ForBiggerEscapes.mp4" blazon="video/mp4"></video> 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 considering 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 await exactly the same. Just now we take broader browser support.
Now, if we desire to add attributes similar controls, autoplay, loop etc, we volition add together it to the <video> chemical element.
Audio Element
The <audio> element is very like to the video element. Even so, the just major departure is that in that location are no visuals.
We can employ the sound element to play an audio file on our spider web folio — such as an mp3 file.
Now, merely similar the video tag, at that place are two different ways to practise this.
- Utilise a single tag representing the entire element.
- Opening and endmost tag with the child elements in between.
Now, we'll have an opening and closing audio tag, and then we will add the source chemical element in between.
The folder structure might look like this:
|-- project |-- audio |-- sample.mp3 |-- sample.ogg |-- css |-- main.css |-- normalize.css index.html At that place is no controls attribute given to the <audio> element in the example above, so the <audio> chemical element won't show upwardly in the HTML document.
At present, you can come across that there are but a few key differences here. The value in type attribute is changed from "video/mp4" to "audio/mp3". In the src aspect, nosotros'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 whatsoever controls. Then, we will exist adding the controls attribute to the audio element.
Yous can too add other attributes in the <audio> element like autoplay, loop etc.
We have covered the essentials of sound and video elements in HTML.
You can acquire more about audio and video in the links given beneath:
- MDN Web docs — Video
- MDN Web docs — Sound
I promise y'all've found this postal service informative and helpful. I would love to hear your feedback!
Thanks for reading!
Larn to code for costless. freeCodeCamp'southward open source curriculum has helped more than 40,000 people get jobs every bit developers. Become started
Source: https://www.freecodecamp.org/news/video-audio-in-html-a-short-guide-69f721878b47/
0 Response to "How Do I Upload a Mp4 Audio Video to My Website?"
Post a Comment