Lecture 6: Deploy Your First Website

Why Media in HTML?

• Earlier: required plugins (Flash, QuickTime, Silverlight).
• Problem: insecure, inconsistent, not universal.
• Solution: Native <video> and <audio> tags introduced in HTML5.

The <video> Tag (Basics)

• video using:

                <video src="video.mp4"></video>
            

• By default → only static frame.
• controls → functional player.

            <video src="video.mp4" controls></video>
            

Video Attributes

• width & height → set player size.
• controls → show default browser controls.
• autoplay → start video automatically (requires muted).
• loop → restarts after finishing.
• poster → thumbnail before play.

The <audio> Tag

• Works same as <video> but audio-only.

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

• Supports autoplay, muted, loop.

Professional Embedding – <sources>

Problem: Different browsers support different formats.

• Solution: Provide multiple sources.

                <video controls>
                  <source src="video.webm" type="video/webm">
                  <source src="video.mp4" type="video/mp4">
                  Your browser does not support videos.
                </video>
                

• Browser picks the first format it supports.

Accessibility – <track>

• Add captions / subtitles with .vtt files.

            <track src="captions.vtt" kind="captions" srclang="en" label="English">
            

• kind: captions | subtitles | descriptions.

Comparison of Methods

Feature	<source> Method	src Method
Compatibilty	Excellent	Limited
Fallback	Yes	No
Flexible	Multiple formats	Single format
Best Use	Public websites	Quick tests

8. Special Characters (Entities)

Use entities for symbols that conflict with HTML.

Example:

<footer>
  <p>Copyright &copy; 2024 My Website.</p>
</footer>