Home Lecture 2 Lecture 3 Lecture 4 Lecture 5

HTML Media & Symbols

First Principle: The Web is More Than Text and Images
A webpage should deliver any kind of content, not just static text and images. Earlier, video/audio required plugins like Flash or QuickTime, which was inefficient and insecure.
The Core Problem
How can we embed video/audio in a standardized, plugin-free way that works on all modern browsers?
Logical Solution: HTML5 <video> and <audio> tags
Dedicated HTML tags embed and control media natively.
Part 1: Basics - Getting a Video on the Page
```
<video src="my-awesome-video.mp4"></video>
```
Issue: Only shows the first frame. Solution: add controls attribute.
```
<video src="my-awesome-video.mp4" controls></video>
```

Part 2: Intermediate - Attributes

width & height

<video src="video.mp4" width="640" height="360" controls></video>

autoplay
```
<video src="video.mp4" autoplay muted controls></video>
```
Modern browsers block autoplay with sound, use muted for it to work.
loop - Automatically restarts video.

poster

<video src="video.mp4" poster="images/video-thumbnail.jpg" controls></video>

Part 3: The <audio> Tag

<p>Listen to our theme song:</p>
<audio src="audio/theme-song.mp3" controls></audio>

Part 4: Advanced & Professional

Problem 1: Multiple video formats for compatibility

<video controls poster="images/thumbnail.jpg">
  <source src="videos/my-video.webm" type="video/webm">
  <source src="videos/my-video.mp4" type="video/mp4">
  Sorry, your browser doesn't support embedded videos.
</video>

Problem 2: Accessibility

<video controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">

  <track src="captions_en.vtt" kind="captions" srclang="en" label="English">
  <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español">
</video>

Robust & Professional Method with <source>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Simple & Direct Method (src attribute)
```
<video src="a.mp4" controls></video>
```

Comparison Table

Feature	Example 1 (<source> Method)	Example 2 (src Method)
Browser Compatibility	Excellent. Multiple formats.	Good, relies on single format.
Flexibility	High. Multiple formats possible.	Low. Only one format.
Simplicity	More complex.	Very simple.
Fallback for Old Browsers	Yes, with text.	No fallback.
Best Use Case	Public-facing websites.	Quick tests, internal projects.

Conclusion
For public websites, prefer the <source> method. For internal or less critical projects, the direct src method is acceptable.

HTML Symbols & Entities

Entity Name:

<footer>
    <p>Copyright &copy; 2024 My Awesome Website. All Rights Reserved.</p>
</footer>

Entity Number:

<footer>
    <p>Copyright © 2024 My Awesome Website. All Rights Reserved.</p>
</footer>

Other Common Symbols

Symbol	Description	Entity Name	Entity Number
©	Copyright	©	©
®	Registered Trademark	®	®
™	Trademark	™	™
<	Less-than	<	<
>	Greater-than	>	>
&	Ampersand	&	&
"	Double Quote	"	"
€	Euro Sign	€	€

Note: Use entities for < and > to display HTML code literally.