Welcome back to “Learn HTML5 CSS3 JavaScript”, the new iCrewPlay Tech column to learn how to create our personal, business or leisure website from scratch.
Learn HTML5 CSS3 JavaScript: the video tag and the audio tag
To insert a video we need to use the
- autoplay: used to start the video automatically
- controls: used to show video controls (such as pause and progress bar)
- height: height of the video in pixels
- width: width of the video in pixels
- muted: does not play the audio of a video (however we recommend that you remove the audio from the original video)
- poster: contains the URL of any video cover image
- preload: indicates whether the video should be loaded on page load
Since video files – especially once – very complex, it is possible to add different sources, with different extensions or sizes. This will allow us in the future to create a video player with JavaScript that allows you to select the video quality.
The browser tries to load the videos in order: if the first one loads, it ignores the following ones.
Read Also
- Do you think “Call of Duty” is the best shooter of all time? Tell us why! Nov 16, 2022
- The Occultist video game will represent Spain at EuroPlay Video Games Contest 2021 Aug 18, 2021
- The VIP couple has revealed what color the baby’s bow will be: the video of the gender reveal party is really beautiful Sep 25, 2021
- Super Mario Bros: the Fire Mario figurine will delight Nintendo fans May 31, 2022
- The Medium between PlayStation Plus PS4 and PS5 games in September? Bloober Team’s answer Aug 23, 2021
- How to build a cheap gamer computer: everything you need, for less than 130 thousand pesos Aug 21, 2021
- Prime Video, “Maradona: Blessed Dream”: release date announced Aug 27, 2021
To insert the source of a video, we use the nested (source) tag which has the following attributes:
- src: source of the file (URL or path)
- type: type and extension of the file
To insert an audio file we need to use the (audio) tag which has the following attributes:
- autoplay: used to start the audio file automatically, for example as a background during navigation
- controls: used to show audio controls (such as pause and progress bar)
- loop: determines whether the audio file should be repeated endlessly
- muted: does not play audio (may come in handy later with JavaScript)
- preload: indicates whether the video should be loaded on page load
Since audio files – especially once – very complex, it is possible to add different sources, with different extensions or bit-rates.
The browser tries to load the audio files in order: if the first one loads, it ignores the following ones.
Let’s now create our web page with a video and an audio, remembering what we learned previously.
As in the previous episodes of this column, all the resources you find here can be downloaded and used for free, but remember to mention us and mention the author, Andrea Zanin in your project. Remember to use the same Creative Commons licenses as iCrewPlay Tech. You can download images.html at andrezan.com.