forked from gdisf/teaching-materials
-
Notifications
You must be signed in to change notification settings - Fork 5
/
exercise1.html
47 lines (44 loc) · 2.01 KB
/
exercise1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../common/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="../common/bootstrap.css">
<link type="text/javascript" href="../common/bootstrap.js">
<title>Exercise 1: Audio and Video Tags</title>
<meta charset="utf-8">
</head>
<body>
<div class="container">
<h1>Exercise 1: Audio and Video Tags</h1>
<ul>
<li>Start with this simple HTML5 webpage, save it as <code>multimedia.html</code><br>
<pre>
<!DOCTYPE html>
<html>
<strong><head>
<meta charset="utf-8">
<title>Multimedia Madness</title>
</head>
<body>
Moving pictures and talking webpages, oh my!
</body></strong>
</html>
</pre>
<li>Go to <a href="http://www.lunerouge.org/spip/rubrique.php3?id_rubrique=49">this site</a> and find an Ogg audio file. Download it to the folder where you saved the file.
<li>Use the <code>audio</code> tag to embed the file on your page. Make sure it plays.
<li>Use attributes on the <code>audio</code> tag to make the file autoplay and loop forever.
<li>Take them off when you realize how annoying it is. :-)
<li>Go to <a href="http://commons.wikimedia.org/wiki/Category:Videos">Wikimedia commons</a> and find an Ogg video file. Download it to the folder where you saved the file.
<li>Use the <code>video</code> tag to embed the file on your page. Make sure it plays.
<li>Make the video 600 pixels wide and remove the controls, using attributes of the tag.
<li>If you still have time, look up the video and audio tag on the Mozilla Developer Network, read up on what attributes they have, and try adding other attributes to see what happens.
</ul>
<script>
function showSolution(num) {
if (confirm('You surrrrre?')) {
document.getElementById('solution' + num).style.display = 'block';
}
}
</script>
</body>
</html>