-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlab9.html
116 lines (105 loc) · 6.79 KB
/
lab9.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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Jason Carman">
<meta name="description" content="CNET204 Lab 9">
<meta name="keywords" content="cnet204,centennial college,HTML5,CSS3">
<meta charset="utf-8">
<title>Lab 9</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Schedule</a></li>
<li><a href="lab1.html">Lab 1</a></li>
<li><a href="lab2.html">Lab 2</a></li>
<li><a href="lab3.html">Lab 3</a></li>
<li><a href="lab4.html">Lab 4</a></li>
<li><a href="lab5.html">Lab 5</a></li>
<li><a href="lab6.html">Lab 6</a></li>
<li><a href="lab7.html">Lab 7</a></li>
<li><a href="lab8.html">Lab 8</a></li>
<li><a href="assignment1.html">Assignment 1</a></li>
<li><a class="active" href="#">Lab 9</a></li>
<li><a href="lab10.html">Lab 10</a></li>
<li><a href="assignment2.html">Assignment 2</a></li>
<li><a href="good.html">Good Formatting</a></li>
<li><a href="bad.html">Bad Formatting</a></li>
</ul>
</nav>
<main>
<h1>Lab 9 - Audio & Video</h1>
<h2>Overview</h2>
<p>This week's lab will cover the following:</p>
<ul>
<li>Creating a new page, called media.html</li>
<li>Using HTML5 to embed audio and video natively.</li>
</ul>
<h2>Lecture Slides</h2>
<div class="container">
<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vTKYCbBKOh_Lb0HaFSG2nRRfRBnO2cBOz5CnMlVqVBrKF_nZaB19st0srjbd6gUbJoWC8yGG64xtSUS/embed?start=false&loop=false&delayms=5000" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" frameborder="0" class="responsive-iframe"></iframe>
</div>
<h2>Creating a new page</h2>
<p>Create a new page called media.html, that meets the following criteria. Refer to your previous lab instructions to do each of the following if needed.</p>
<ol>
<li>Use the HTML5 doctype declaration</li>
<li>Set the Title to "Media", without the quotes</li>
<li>Insert meta tags indicating the encoding (charset) of utf-8, viewport and the author to your name</li>
<li>Insert a comment indicating your name and student number</li>
<li>Link your style sheet to the page</li>
<li>Make use of the main tag, as you did in Lab 3</li>
<li>Copy your navigation bar from your index page and modify it to properly indicate your current page</li>
</ol>
<!-- Introducing audio and video -->
<h2>Introducing audio and video</h2>
<p>Prior to HTML5, plugins (like Flash) were required to play audio or video in the browser. With HTML5, audio and video playback are now natively available (without a plugin).</p>
<span class="tip">Note: GitHub has a recommended file size limit of 50 MB, and a hard limit of 100 MB. You will want to pick your audio and video files in accordance with this limit (ideally less than 50 MB in size, but no more than 100 MB in size).</span>
<!-- Audio tag -->
<h2>Insert the audio tag</h2>
<p>Add the opening audio tag and it's corresponding closing tag (at the top of your main section) by adding the following tag.</p>
<pre><audio controls>
</audio>
</pre>
<p>Notice the controls attribute. Without this, the element won't appear in the browser (as there's no way to interact with it).</p>
<!-- Adding audio -->
<h2>Adding some content</h2>
<p>Using this <a href="https://www.videvo.net/royalty-free-music/">free resource (provided by videvo)</a>, select an audio file of your choice and add it using the <a href="https://www.w3schools.com/html/html5_audio.asp">w3schools example</a>. For this to work you will have to first download the audio file. You can then upload the file to GitHub, just like you did the picture in Lab 8.</p>
<!-- Video tag -->
<h2>Insert the video tag</h2>
<p>Add the opening video tag and it's corresponding closing tag (at the top of your main section) by adding the following tag.</p>
<pre>
<video>
</video>
</pre>
<!-- Adding video -->
<p>Using this <a href="https://www.videvo.net/stock-video-footage/">free resource (provided by the videvo)</a>, select a video of your choice and add it using the <a href="https://www.w3schools.com/html/html5_video.asp">w3schools example</a>. Be sure to select a video labelled <strong>free</strong>. Again, for this to work you will have to first download the file. You can then upload the file to your server (if you are able to access it). Note the optional autoplay attribute, which isn't ideal - omit this.</p>
<p>You may wish to resize your video, using the width and height parameters (included in the w3schools example). Experiment with these until you achieve a result you're happy with. You may also wish to add a few line breaks in, to assist in spacing the audio and video elements.</p>
<!-- Adding a video from YouTube -->
<h2>Adding a video from YouTube</h2>
<p>Sometimes you may wish to embed a video from another platform (such as YouTube) instead of hosting your own. These take up less space, as they are being stored by YouTube, not you. You can do this using the iframe tag.</p>
<p>To add a video from <a href="https://youtube.com">YouTube</a>, first browse to a video you want. Once you have found your video:</p>
<ol>
<li>Click the share button.</li>
<li>Click Embed (the button labelled with < >).</li>
<li>Note the embed options you can select.</li>
<li>Copy the iframe code and paste it into your html document.</li>
</ol>
<h2>Completing the Lab</h2>
<p>Using the steps outlined at the end of <a href="lab7.html">Lab 7</a>, pull your changes into your AWS instance and take a screenshot. Your page should look similar to the following output. If it does not, go back and complete whatever you've missed.</p>
<p>Your page should validate using the <a href="https://validator.w3.org/">w3schools html validator</a> & <a href="https://jigsaw.w3.org/css-validator/">css validator</a>. To submit your lab you need to submit the code to your GitHub repo (which you did in already in the lab). Additionally, you need to submit a screenshot of it running your server to the assignment folder in eCentennial.</p>
<img src="images/lab9.png" alt="Lab 9 sample">
<h2>Exploration Questions</h2>
<ol>
<li>What tag did you use to insert an audio clip?</li>
<li>What tag did you use to insert an video clip?</li>
<li>What happens when you omit the controls attribute for video?</li>
<li>How do you make a video auto play?</li>
<li>What happens when you omit the controls attribute for audio?</li>
<li>Does video autoplay work on mobile devices?</li>
<li>What video formats are supported in HTML5?</li>
<li>What audio formats are supported in HTML5?</li>
</ol>
</main>
</html>