Skip to content

Audio & Video

HTML5 standard released in 2014 made adding audio and video into a website very easy alongside other good improvements. Formerly Adobe Flash was used to play video audio and create games on websites but HTML5 replaced this. Read more about HTML video from here and audio from here.

Challenge 1

  1. Create new page called audio_video.html
  2. Add title Audio Player to your new page
  3. Download file woosh.mp3 from Moodle and add it to folder audio under your project.
  4. Google html5 audio, use the w3schools article and try to get your audio working in your website.

Working Audio Script

Now, add this to the site:

Text Only
<audio controls>
  <source src="audio/woosh.mp3" type="audio/mp3" />
  Your browser does not support the audio element.
</audio>

Code Explained

You wrap all your audio code inside the <audio> element. Attribute controls adds controls for your audio. The <source /> tag is used to specify the audio file(s). You can add sources with different formats in there in case your browser does not support the first source element it sees. The text after your sources is only displayed if your audio cannot be played.

Challenge 2

  1. Add title Video Player to your page
  2. Download the file free_video.mp4 from Moodle and add it to folder video under your project.
  3. Google html5 video, use the w3schools article and try to get your video working in your website.

Working Video Script

Text Only
<video width="320" height="240" controls>
  <source src="video/free_video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Code Explained

You wrap all your video code inside the <video> element. Attribute controls adds controls for your video. The width and height can be used to set your video size in pixel dimensions. The <source /> tag is used to specify the video file(s). You can add sources with different formats in there in case your browser does not support the first source element it sees. The text after your sources is only displayed if your video cannot be played.

Additional Notes

  • Audio and video can also be controlled using Javascript, but we will not go there right now. Using javascript we can control the audio (like start, stop, pause, seek...)
  • We could even add our own set of controls to the page and add Javascript that triggers the play / pause / stop actions and such. We could position those controls on top of our video / audio or in separate place.
  • Youtube and popular video services use the same video tag that you see here and specify the video sources. Some of you might even have used video downloader service to download the actual source file from Youtube.