CodeCom | HTML | Audio and Video tags

Basics Of Web Development

1, HTML

1.1 Tags

1.2 Getting Started

1.3 How to write "Hello World"

1.4 The header tag

1.5 Inserting images

1.6 Inserting audio and video

1.7 Buttons

1.8 Links

1.9 Inputs

IDEs

2, CSS

2.1 Width and height

2.2 Font Properties

2.3 More Background Properties

2.4 The Hover Effect

2.5 Transitions

2.6 Selectors

2.7 Borders

2.8 Border Radius

2.9 Box Shadow

2.10 Overwriting

2.11 Positions

2.12 Flex and Grid

2.13 Z-index

2.14 :nth-child()

2.15 Outline

2.16 Transform

2.17 Animations

2.18 Before and After

2.19, Linking CSS files

Farewell

1.6, Inserting audio and video on your webpage

⭐ To Insert a video or an audio into your webpage, you should know the tags audio and video.

1.6.1 Inserting Audio to your Webpage

Follow the steps below to insert your audio
1. Create a folder on your PC and name it as you like.
2. Put an audio inside the folder you created.
3. Open up note pad.
4.Write the basic html code.

<html>
    <head>
        <title>My First Audio</title>
    </head>
    <body>
    </body>
</html>

5. Code up the code below inside the body tag.

Brief Explanation
✴️ Src refers to the source of your audio. You can go to the properties of your audio file then to the security to find the source.
✴️ Type refers to the type of extension your audio has. It can be mp3, ogg, mpeg etc….
🥥 Remember before writing the type of the audio you should write "audio/".
🥥 Controls makes your audio controllable. It makes you to control the audio by on your webpage by giving it different features like volume, pause and play and more.
6. Save your file and open it.
You should see a bar of audio with controls that looks like this one.

✴️ If you want your audio to play just as you open your html file add autoplay to your audio code.

🥥 If autoplay doesn't work, its fine. It just doesn't work on some browsers. Actually, many of the browsers don't support it.
🥥 And if you don't want controls, you can remove controls too.
✴️ If you want it to never stop play it, you use loop

1.6.1 Inserting Video to your Webpage

Inserting a video to your webpage is so similar to inserting an audio to your webpage. The only difference is the tag you use and the type of video.
🥥 The tag you use to insert a video to your webpage is the video tag.
Follow the steps below to insert your video
1. Open up notepad.
2. Write the basic html code.

<html>
    <head>
        <title>My First Video</title>
    </head>
    <body>
    </body>
</html>

5. Code like this inside the body tag. But don't forget to change it to your video's src. You can copy it by going to properties ➡️ securtiy.