Video and Audio are showing as separate element on webpage

HTML/CSS
1

Hi all,

This is my first forum post in this community. I am currently studying Episode 7 on Video and Audio. I am facing a problem where, after I input the code for video and audio, two windows appear; one for video and one for audio. I am wondering what I did wrong here. Additionally, the video is not autoplaying even though I included the autoplay attribute. I am using the Chrome browser. Please kindly advise. Photos are attached here and in reply (I can only post one photo at the time).

Thank you so much!

Problem on webpage
Problem on webpage1920×1032 111 KB

2

This is what I’ve put.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First Web Page</title>
    <style>
      video {
        width: 400px;
      }
    </style>
  </head>
  <body>
    <video controls autoplay loop src="videos/ocean.mp4"></video>
    <audio controls autoplay loop src="videos/ocean.mp4"></audio>
  </body>
</html>

vscode - thitikorn
vscode - thitikorn1916×724 87.7 KB

3

Is anyone be able to advise?

4

Hi you did nothing wrong, audio and video are seperate elements so they showing seperatly on the page. Although did you know you are using ocean.mp4 as your audio file too? Im not sure that file contains any audio so try replacing it with an audio file and it should work.

The reason why autoplay might not work is some browsers restrict for better user experience, try giving your video element the attribute of muted so it looks like below and see if it works

<video controls autoplay loop muted src="videos/ocean.mp4"></video>