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
- Polymega, an incredible console for retro fans, from the NES to the Sega Saturn Sep 4, 2021
- ” I want to talk to the press ”: Mou discusses with the delegate of Lega- Video Gazzetta.it Sep 26, 2021
- J.K. Rowling Is Shutting Down Readers Who Burned All Their Harry Potter Books Mar 28, 2021
- Epic Games Store: announced the free games of July 15, 2021 Jul 8, 2021
- YouTube: Who is MrBeast, the platform’s most followed videographer? Nov 18, 2022
- PS5 and Xbox Series X: inventory problems beyond 2022? Toshiba talks about it Sep 3, 2021
- DYING: 1983 is the new Japanese survival horror that will be on Xbox One Aug 29, 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.