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
- Super nintendo. SNES celebrates 30 years of its launch in America Aug 23, 2021
- Prime Video, “Jolt”: plot, cast and characters Jul 4, 2021
- Twitch goes to court, this time for real Aug 24, 2021
- Nintendo Switch OLED, will the new Joy-Con continue to suffer from drift? Nintendo evades the question Jul 11, 2021
- The LGBT + video game characters that you might not know were | EarthGamer Jun 30, 2021
- Twitch goes to court, this time for real Aug 24, 2021
- Super Mario Bros: the Fire Mario figurine will delight Nintendo fans May 31, 2022
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.