Build an HTML Audio and Video Player - Build an HTML Audio and Video Player

HTML-CSS
1

Tell us what’s happening:

I have tried changing my code several times but it won’t work. I can’t pass steps ; 9,10,11,12

Inside the video element, you should have a source element.

  • 10. The source element should have a srcattribute pointing to a video file.

  • 11. The source element should have a typeattribute

  • 12. The type attribute should match the media type of the file extension of the src attribute

  • 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>HTML Audio and Video Lab</title>
</head>
<body>
  <h1>HTML Audio and Video Lab</h1>
  <section>
    <h2>
      What is the map method and how does it work?</h2>
<video 
width="640"
controls
source src="https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.mp4" type="video/mp4"/>
</video>
  </section>
  <section>
    <h2>Lovely
    </h2>
    <audio
    controls
    loop
    source src="https://cdn.freecodecamp.org/curriculum/js-music-player/sailing-away.mp3" type="audio/mp3">
    </audio>
  </section>
</body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0.1 Safari/605.1.15

Challenge Information:

Build an HTML Audio and Video Player - Build an HTML Audio and Video Player

2

source is an element, not an attribute, and be careful that you are asked to add it only in one case

3

Please help me

I do not understand please explain more.

4

This one is a little tricky because there are two syntax for audio.

Here src is an attribute of the audio element.

 <audio src="horse.ogg" controls>
Your browser does not support the audio element.
</audio>

Here source is a separate element with a src attribute.

 <audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

https://www.w3schools.com/TAGs/att_audio_src.asp

1 Like
5

Review your code to ensure that your type of the audio is the same as the extension the audio,also is that to the video.

6

The problem here (which drove me crazy for hours) is that the “source” element is separate from the “video” tag.

Your code says:

[quote="Millie7, post:1, topic:771283"
```
<video 
width="640"
controls
source src="https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.mp4" type="video/mp4"/>
</video>
```
[/quote]

and the correct code says:

removed
7

Please do not necropost

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.