Build an HTML Media Player

#community #learning #programming #webdev

Over the course of the last couple of days I've completed another workshop and lab via freeCodeCamp. I undertook the Build an HTML Video Player workshop and then tackled the Build an HTML Audio and Video Player lab yesterday.

Build an HTML Video Player

This workshop tasks you with building an HTML video player in 13 steps. You're first given some HTML Boilerplate and then further instructions with each additional step to complete the exercise.

The single theory lesson you were given in the previous step is designed to help you complete this lesson and the following one.

Step 7 introduced the poster element - this allows the video to display a thumbnail prior to playing. I had no prior knowledge of this element, so this was a useful highlight for myself.

Later steps focused on the source and type elements. This all made sense, especially the use of type to ensure the browser knows the format being used.

By the end of the workshop, I was happy with all of the concepts and ready to tackle the lab - Build an HTML Audio and Video Player.

Build an HTML Audio and Video Player

This lab built on the previous workshop by adding an audio player into the mix - no pun intended! Not wanting to copy the example, I went with Lofi video and audio files. The hardest part was finding sources that I could link. Once that was resolved, completing the user stories went fairly smoothly. Below is the result:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>HTML Audio and Video Lab</title>
</head>
<body>
  <h1>Study with Lofi</h2>
  <section>
    <h2>Study Session</h2>
    <video controls width="640">
      <source src="https://cdn.pixabay.com/video/2025/08/17/297863_large.mp4" type="video/mp4">
    </video>
  </section>
  <section>
    <h2>Background Lofi Music</h2>
    <audio
    controls
    loop
    src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mp3">
    </audio>
</section>
</body>
</html>

In regard to the labs within the Responsive Web Design certification, I have been saving a copy of these and uploading them to GitHub. This means I can look back at these at a later date.

With both the workshop and lab completed, I had enough time for a series of three theory lessons surrounding Working with Images and SVGs. I learnt alot about SVG files in particular, which was handy as the next workshop has me building a Heart icon. More on that next time and thanks for reading!

DEV Community

Build an HTML Media Player

Top comments (0)