Learn how to add audio and video in HTML5

These days, users spend a lot of time on the Internet throughout the day and night in order to do all their daily tasks through it, with the release of the latest version of HTML , users gained a better experience of using the Internet, and the reason for this positive user experience was the ability to add high quality videos, audio and images through this way, in order to be able to add them to a website , you need to enter code, which we are going to mention briefly below.

In general, these days, most owners of large and small sites use HTML5 , therefore they are able to attract different users to their websites, and eventually users recommend these sites to their friends, thus it causes an increase in the traffic and ranking of the website , which causes the site to appear in the first page of search engine results page which can have a huge impact on the success of a website.

How to embed audio files?
With the help of HTML5 you can do this task easily, but it should be noted that it is necessary to specify the source, and you also need to embed the control feature in it, so that the user who is using that audio can play or pause it, audio formats may be Ogg, mp3, wav, and so on, which are not specified in the HTML5 draft, but these three audio formats are supported in HTML.

The

There are various browsers such as Chrome, Firefox, Safari, Opera, etc., all of which support all three audio formats mentioned above, except for Safari, which does not support OGG format, but it supports two other audio formats.

These audio files have features such as autoplay, autobuffer, controls, loop, muted, preload, src, which we will briefly explain about each of them in the following.

Autoplay:
As you know, this feature detects that the sound should be played as soon as it is ready.

browser does not support the audio element

Controls:
This feature also allows the user to view control buttons such as play, pause, etc., and use them if needed.

Loop:
Through this way, whenever the audio ends, it starts playing again from the beginning and the file can be heard by users repeatedly, the use of this adjective is as follows:

browser does not support the audio element

Muted:
it indicates that it should be silent and no sound should be heard.

Preload:
When you refer to a site that has audio files, it is the site owner who determines whether the audio file is included in the content, should be downloaded at the same time as loading the page or not, in the following part we are going to show you the way it works.

browser does not support the audio element

Autobuffer:
If the file does not be played automatically, the autobuffer will be started automatically by installing this feature.

Src:
The most important feature of a Src tag is that it specifies the address of the audio file, so that the browser can use it.

browser does not support the audio element

In general, adding an audio file may be done as follows:

How to embed a video?
By adding videos to various contents, especially educational content, users can gain a positive user experience and ultimately make the best use of the web , and it should be noted that video has more features than audios, due to the fact that Video is visual unlike audio, which is the reason why it has more features such as poster, length and width in addition to audio file ones.

Users may try to visit the site through various devices and then view the video, so HTML5 can be considered as a great help to site owners, so that users with any device can get a positive user experience from using the site, we will briefly explain each of the features in the following.

Length and width:
The size of the videos is very important, and you can use CSS to control this size, a feature that all of them must maintain properly is the ratio between length and width which is called the aspect ratio, and this is very important.

Poster:
This feature shows an image before the video is played, which its attractiveness is of a great importance, due to the fact that different users may be attracted to the video and click on it after seeing the attractive poster, so it is necessary to choose a good image as the poster for your work.

Video files also come in a variety of formats, including mpeg4 and Ogg, the most important feature of image files like audio files, is the source, which is necessary to be properly specified in the tag, and browsers try to use the first format they identify, by seeing the source.

Adding an image file may be done as follows:

- HTML5 player libraries:
These players are implemented with JavaScript, in fact, they make more compatibility between different browsers, so that they can provide the user with video which contains more features and better quality, for example, one of the features that can be supported which may not be supported in some browsers is a subtitle that can cause the user to have a very positive user experience by watching the video, in addition to the points which have been mentioned above, JavaScript can provide many features that browsers may or may not support, all of which can significantly improve the quality of video.

Important note:
As mentioned before, all browsers may not support all audio and video formats, so you should use the following trick to give this opportunity to the users who visit your site with any browser and play the video or audio file, to be able to achieve their goal and meet their needs as well, for example, in the case of audio files that as you know they have two formats, you can use the following trick.

<"audio controls =" controls

Your browser does not support the audio element

In this example, we have provided the source tag twice in both available formats, so that the browser shows the file which is able to play, and when neither MPEG nor OGG can be supported by the browser, a text will be displayed to the user including the sentence that your browser does not support the audio element.

Last word:
In general, HTML5 made a huge change in the world of the Internet, it allows users to get a better user experience from various websites, especially the ones that have educational contents, all of which can be used with the help of adding this version of audio and video files to the content, in this article, we tried to explain to you the ways of embedding audio and video files, and we also explained the different features that each one has, so that you can use the given information in order to create different contents for your website and attract more users to it .