HTML and CSS Reference
In-Depth Information
affect the size of the object downloaded. If the video is 5 megabytes at 640×480, it will
still be 5 megabytes when displayed at 180×120—just scaled to fit that size.
In
Example 6-3
(
CH6EX3.html
) we have scaled the same video to three different sizes
and displayed them on the same page.
Figure 6-3
shows what this looks like in HTML
(again, rendered in the Google Chrome browser).
Example 6-3. Basic HTML5 video in three sizes
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH6EX3: Basic HTML5 Video: 3 Sizes</title>
</head>
<body>
<div>
<video autoplay loop controls width="640" height="480" id="thevideo">
<source src="muirbeach.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
<source src="muirbeach.webm"type='video/webm; codecs="vp8, vorbis"' >
<source src="muirbeach.ogg" type='video/ogg; codecs="theora, vorbis"'>
<source src="muirbeach.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
</video>
</div>
<div>
(640×480)
<div>
<video autoplay loop controls width="320" height="240"id="thevideo">
<source src="muirbeach.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
<source src="muirbeach.webm"type='video/webm; codecs="vp8, vorbis"' >
<source src="muirbeach.ogg" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>
<div>
(320×240)
</div>
<div>
<video autoplay loop controls width="180" height="120"id="thevideo">
<source src="muirbeach.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
<source src="muirbeach.webm"type='video/webm; codecs="vp8, vorbis"' >
<source src="muirbeach.ogg" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>
<div>
(180×120)
</body>
</html>
