HTML5 CSS3 JavaScript: Video and audio

HTML5 CSS3 JavaScript: Video and audio

Spread the love

HTML5 CSS3 JavaScript: Video and audio

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.

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.

HTML5 CSS3 JavaScript: Video and audio

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.