Click and drag to scroll left and right to view all 12 figures.
<!-- figure 7.1 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Video with subtitles</h3>
<video src="jumper.mp4">
<track kind="subtitles" srclang="en" label="English subtitles" src="jumper_en.vtt"
default>
<track kind="subtitles" srclang="de" label="Deutsch Untertitel" src="jumper_de.vtt"
default>
</video>
</body>
</html>
<!-- figure 7.3 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Embedded audio</h3>
<audio src="audio/sound.mp3" controls>
Your Web browser does not support HTML audio element.
</audio>
</body>
</html>
<!-- figure 7.5 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Embedded audio</h3>
<audio controls>
<source src="audio/sound.aac" type='audio/mp4; codecs="mp4a.40.2"'>
<source src="audio/sound.oga" type="audio/ogg">
<source src="audio/sound.mp3" type="audio/mpeg">
Your Web browser does not support HTML audio element.
</audio>
</body>
</html>
<!-- figure 7.6 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Audio with embed element</h3>
<embed src="audio/sound.mp3" type="audio/mpeg" width="250" height="30">
</body>
</html>
<!-- figure 7.8 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Audio with object element</h3>
<object data="audio/sound.mp3" type="audio/mpeg" width="220" height="50"></object>
</body>
</html>
<!-- figure 7.10 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Audio with object element</h3>
<object data="audio/sound.mp3" type="audio/mpeg" width="250" height="50">
<param name="autoplay" value="false">
</object>
</body>
</html>
<!-- figure 7.11 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Linked video</h3>
<a href="video/video.mp4">Watch the video with a helper application</a>
</body>
</html>
<!-- figure 7.13 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Embedded video</h3>
<video src="video/video.mp4" width="320" height="240" poster="images/garden.jpg"
controls>
Your Web browser does not support HTML video element.
</video>
</body>
</html>
<!-- figure 7.15 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Embedded video</h3>
<video width="320" height="240" poster="images/garden.jpg" controls>
<source src="video/video.mp4" type='video/ogv; codecs="theora, vorbis"'>
<source src="video/video.ogv" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video/video.webm" type='video/webm; codecs="vp8, vorbis"'>
Your Web browser does not support HTML video element.
</video>
</body>
</html>
<!-- figure 7.17 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Video with subtitles</h3>
<video src="jumper.mp4">
<track kind="subtitles" srclang="en" label="English subtitles" src="jumper_en.vtt"
default>
<track kind="subtitles" srclang="de" label="Deutsch Untertitel"
src="jumper_de.vtt">
</video>
</body>
</html>
<!-- figure 7.18 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>embed and object</h3>
<object data="video/video.mp4" type="video/mp4" width="320" height="240">
<param name="autoplay" value="false">
<!-- The embed element is used as fallback -->
<embed src="video/video.mp4" type="video/mp4" width="320" height="240">
</object>
</body>
</html>
<!-- figure 7.21 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<object data="video/walk_motion.mp4" type="video/mp4" width="320" height="240">
<param name="loop" value="true">
</object>
</body>
</html>