Day-05 Media in HTML and Basic Deployment

Media in HTML

The fundamental truth is that a webpage should be able to deliver any kind of content, not just static text and pictures. For years, this was a major problem. To play a video or audio file, browsers had to rely on third-party plugins like Adobe Flash, QuickTime, or Silverlight. This was inefficient, insecure, and inconsistent across different computers.

<video> and <audio> Tag

  • <video>
    • Used to play videos in a webpage.
    • Needs a source file (src) and can have controls (play, pause, volume).
    • One way to use this tag is:
    • <video src="movie.mp4> </video>

    Proffessional Way to use video tag is :

                                    
                                    <video>
                                        <source src="movie.mp4" type="video/mp4">
                                        <source src="movie.webm" type="video/webm">
                                        Your browser does not support the video tag.
                                    </video>
  • <audio>
    • Used to play sound or music.
    • Works just like <video> but without visuals.

    Example:

                                    
                                    <audio src="song.mp3" controls></audio>

    Proffessional way to use audio tag is :

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

Common attributes used in audio and video tag

  • controls → shows play/pause/volume.
  • autoplay → starts playing automatically (not always allowed by browsers).
  • loop → repeats forever.
  • muted → starts muted.

Example of video and audio tag



How to embed youtube videos into our webpage?

We use < iframe > tag for this.

Code for this is:

                        
                            <iframe src="https://youtube.com/embed/NGYp1zCBthk?si=N9im2TH0PWvQ4zds"></iframe>

Basic Deployment of Website