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
- The awkward moment of Ibai Llanos that cost him another Twitch sanction: ‘It’s impressive how dumb I am’ Sep 28, 2021
- Indiana Jones: Bethesda announces a new game and good news May 29, 2022
- The best free video games for PC and consoles Sep 5, 2021
- Retro 2022: The breathtaking video of NASA’s exploits this year Dec 26, 2022
- Sainz against the F1 2021 videogame: “Good joke” | FormulaPassion.it Jul 9, 2021
- Prime Video, “Jolt”: plot, cast and characters Jul 4, 2021
- Twitch: this sinister moment of Amouranth that occurred on stream will send shivers down your spine Jun 3, 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.