The video tag is used to place video files on the page. It accepts the MP4, WebM, and Ogg video formats. The video tag also supports multiple attributes:

Example

This is the code used for the video above. It uses a video tag where you can place different attributes according to how you want the video to be shown. The "controls" simply uses the browser's default buttons (play, pause, etc.) for videos. The source tag inside of the video tag is where you source the file path for the actual video.

If you are interested in styling the video player using CSS and JS, Mozilla Web Docs has a great resource to use.

Resources

Similar to the video tag, the audio tag is used to place audio files on the page. It accepts the MP3, OGG, and WAV audio formats. The audio tag also supports multiple attributes:

This is the code used for the audio above. It uses an audio tag where you can place different attributes according to how you want the audio to be played. The "controls" simply uses the browser's default buttons (play, pause, etc.) for audio. The source tag inside of the audio tag is where you source the file path for the actual audio.

There is currently no way to style the audio tag using CSS. However, you can create your own control buttons using JavaScript functions.

Resources

The Canvas tag creates an area, or a blank canvas space, where graphics can be drawn using JavaScript. The canvas is simply the container that holds the graphics created by JavaScript. There are many things that can be drawn including shapes, paths, text, images, and even games.

For this topic, I have decided to follow the tutorial called "2D breakout game using pure JavaScript" located on MDN web docs. I won't do much explaining on how it is done since it is all explained in the tutorial, but I will show the final code and the end result below.

The Code

The Game

Play the Game

Resources

w3schools MDN web docs

Week 4 Teaching Video

My teaching presentation starts at 0:00 and ends at 15:00.