Inserting Video and Audio - HTML

HTML 

HTML is like the skeleton of a human—without it, a website is just a pile of CSS flesh and JavaScript muscles flopping around shapelessly!

 

HTML allows embedding videos and audio files to enhance user experience. The key elements are:

• <video>: Embeds a video file.
• <audio>: Embeds an audio file.

Adding a Video

<video width="500" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Explanation

• controls adds play, pause, and volume buttons.
• <source> allows multiple formats for better compatibility.
• The fallback text appears if the browser doesn’t support <video>.

Adding an Audio File

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

Fun Fact

The <audio> tag was introduced in HTML5. Before that, people used Flash (and it was awful!).

Autoplay and Loop

<video width="500" autoplay loop muted>
  <source src="video.mp4" type="video/mp4">
</video>

• autoplay starts playback automatically.
• loop repeats the video.
• muted silences the video (required for autoplay in most browsers).

Embedding a YouTube Video

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

Run Code on FunProgramming

SEO Tip

Self-hosted videos should include transcripts to improve accessibility and search engine rankings.

Conclusion

Videos and audio enhance website engagement. Use them wisely for a better user experience!