por Without a doubt, multimedia content, especially in the case of videos, is a format widely valued by Internet users. For this reason, knowing how insert videos with HTML on a web page is a topic that you must know very well, especially if you want to create a more attractive website.
How to insert HTML videos into a web page with the
First of all, we are going to explain how to insert videos with HTML into a web page thanks to the
Since the fifth revision of HTML, called HTML5, Web developers began to integrate the tag into web pages. This new tag changed the way multimedia content is displayed and allows you to insert video in HTML.
Before October 2014, when HTML5 was released, embedding a video on a web page was a laborious job for new developers. Now, thanks to the following line, you can insert videos with HTML in a simple and practical way:
In this way, we can show on our page a video that we have hosted on the network. The next is add attributes at our whim for better visualization. In the previous example we see that the video will be displayed on the page with a size of 420 pixels wide and 240 pixels high and we can insert video in html.
Now, what happens if the video format we want to display cannot be played in a browser? It is enough to add a line that tells the Internet user that it is not available. Let’s see it with an example:
But that’s not the only thing you can do with the
The attributes of the tag for inserting video into html, that is, the tag video html, are:
autoplayBoolean type attribute. If included in the code, starts the video autoplaying sooner for the tag video html.bufferedRead attribute that includes a TimeRanges (en-US) object. Allows you to determine which time intervals are buffered.controlsAn attribute that allows the user to increase or decrease the volume of the video, skip forward or stop playback, search for the tag video HTML.heightAttribute that indicates the height of the video in pixels of the video in HTML.loopA boolean type attribute. Once the HTML video is finished, it plays again from the beginning.posterAn attribute that includes a URL where a preview image is hosted. If this attribute is not specified, the first frame of the video will be the preview.srcMain attribute in which the URL where we have the video hosted is specified. You can also use the
It should be noted that there is a problem with the latest revision of HTML5 and some browsers. It turns out that Some browsers do not support certain video formats, There are especially problems with codecs. For this reason, our embedded video may look great in Chrome, for example, but it won’t play in Opera.
To address this issue, HTML5 includes the attribute source, which allows us to upload the same video in a different format.
According to the above code, we can play our video in practically any browser. However, if the browser definitely does not support any of the formats we use for the video, then a text will be displayed that says: Your browser does not support this video format.
Embed videos with HTML from external platforms
Another way to insert videos is to do so directly from external platforms, such as YouTube or Vimeo. In these cases, we use the tag
And this would be the video incorporated with that code:
Know more…
Finally, know how Inserting videos with HTML into a web page is a necessary knowledge for every web developer. However, this is just one of the many essential knowledge to create a complete website. If you want to become an expert in a short time, I recommend that you take the Full Stack Web Development Bootcamp. You can sign up now!