Html Tutorial For Beginners Part 9

Table of contents

👉Audio🎶🔊

👉Video📽🎬

👉Embedding📎📌

Audio 🔊🎶

YouTube is one of the largest and famous video sharing platform. Now you may wonder how to add video and audio in a website. It's super easy like adding images into a website. Look at the below Example:

<audio controls loop muted>
<source src="..." type="audio/mp3" type="audio/ogg">
</audio>

Audio has some attributes like👇

• controls
• loop
• muted

Controls attribute displays play button and speaker icon and audio duration. Loop attribute plays audio continuously. Muted attribute mutes the audio by default. Inside audio source element comes. Source element has some attributes like👇

• src
• type
• srcset

Video🎬📽

Video is like audio but video has two more attributes than video like👇

• autoplay
• poster

Autoplay attribute plays video when the web page is loaded. Poster is an overlay at the beginning of video. Look at the video Examples below 👇

<video controls muted loop autoplay poster="...">
<source src="..." type="video/mp4" type="video/ogg">
</video>

Nowadays there lots of video formats like

• mp4
• webm
• mp
• mp2
• avi
• mpeg
• mov
• qt

And many more. Modern browsers support variety types of videos. As well lots of audio formats available in today's world, modern browsers support them.

Embedding

Embedding means displaying external content or posts into our website. In HTML we use iframe and embed elements.

An example from YouTube

<iframe width="344" height="194" src="https://www.youtube.com/embed/R_dwUR2HbZM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Beside YouTube Tiktok, Twitter, Instagram allow us to embed their posts and contents.

Hope you enjoy the story. Please don't forget to like and share.