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

HTML-CSS
1

Tell us what’s happening:

please help
9. Inside the video element, you should have a source element.
10. The source element should have a src attribute pointing to a video file.
11. The source element should have a type 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>

</body>
</html>
<h1>Main tiltle</h1>
<section>
  <h2>Video playing</h2>
  <video
  controls
  width="640"
  <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>Song title</h2>
  <audio
  controls
  loop
  <source src="https://cdn.freecodecamp.org/curriculum/js-music-player/sailing-away.mp3" type="audio/mp3" ></audio>

Your browser information:

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

Challenge Information:

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

2

How are you stuck?

What specific lines of code do you think should meet those requirements?

3

I don’t understand where the source element is supposed to be. I thought it was correct but it keeps saying its wrong

4

Here you forgot to close angular brackets “>”. Then you have the source element as a child to the video element exactly as you did, and everything is fine. I hope it helps.

1 Like
5

The audio is not supposed to have a source code

code removed by moderator

This is the correct way in which to answer the question

6

hi @victorykankah

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.

1 Like