Build a Multimedia Player - Build a Multimedia Player

HTML-CSS
1

Tell us what’s happening:

Just noticed that a new lab “Build a multimedia player” was available so I started working on it. However, one of the steps involve using the <source> tag and I don’t remember it being covered in any lecture videos previously. I tried to go back and rewatch the audio and video related videos but did not find any mention of the source tag.

Also, what should I put in the src attribute? An absolute url from the internet?

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multimedia Player</title>
</head>

<body>
  <h1>Multimedia Player</h1>
  <section>
    <h2>Now Playing: Sailing Away</h2>
    <audio controls aria-label="Sailing Away">
      <source src="abc.mp3" type="audio/mpeg">
    </audio>
  </section>
  <section>
    <h2>Some video</h2>
    <video controls width="500" aria-label="some video">
      <source src="abc.mp4" type="video/mp4">
      <track src="subtitles.vtt" kind="captions" srclang="en" label="English">
    </video>
  </section>
  <section>
    <h2>Transcript</h2>
    <p>Hello guys, welcome to my vlog</p>
  </section>
</body>

</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36 Edg/136.0.0.0

Challenge Information:

Build a Multimedia Player - Build a Multimedia Player

2

Thank you for helping make FCC better. Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.

3

Hi @jaisanghvi !

The source element is mentioned here

It happens at the end of the lecture. There is also a code example showing you how to use it in the transcript

You can use the same audio from the demo project which is this

https://cdn.freecodecamp.org/curriculum/js-music-player/sailing-away.mp3

Or if you have your own audio files, on something like your personal soundcloud, then you can include the download link for the src attribute

https://help.soundcloud.com/hc/en-us/articles/115003448787-Downloading-tracks

4

I commented on your PR for a fix.

It looks like the source element was actually taught earlier in this lecture

But I can see how beginners might forget since time will have passed between that lecture and this lab.

So we will go with the temporary solution laid out in the issue and add a workshop before it so beginners will feel more comfortable working with it.

5

I am sorry, when I read I thought I read you were saying the track element was missing from the lectures, and I did not find that one while looking

7

I just completed this, to answer your question about a src its asking for a file which could be local so I just made up something project.html for example.