1. Video, audio, embed, iframe, HTML Form
Lecture 6: HTML5 Media
Video, audio, embed, iframe, HTML Form

2. Video
Before HTML5, there was no standard of showing videos or movies on web pages.
Before HTML5, videos could only be played with a plug-in such as flash.
HTML5 defines a new element which specifies a standard way to embed a video or movie on a web page.
<video> element

3. Video Example <video width=“400px” height=“240px” controls>
<source src=“gorrila.MPG” type=“video/mp4”>
</video>

4. Video Control attribute
Play button
Pause button
Volume control
Use the width and height attributes to reserve space for the video on your web page.
You should insert text content between the <video> and </video> tags for browsers that do not support the <video> element.

5. Video
The <video> element allows multiple <source> elements. <source> elements can link to different video files. The browser will use the first recognized format.
Note that you must check whether or not your browser supports <video> element and the formats of the video.
We can have more advanced control using Javascript and DOM. We will revisit this after we learn Javascript.

6. Audio
HTML5 defines a new element which specifies a standard way to embed an audio file on a web page.
<audio> element
<audio controls>
<source src=“song.mp3” type=“audio/mpeg”>
Your browser does not support the audio element.
</audio>

7. Easiest way to play video on web
Before HTML5, you can use <embed> element to display a video on web page.
<embed>: defines a container for external (non-HTML) content.
<embed src=“song.swf” height=“200px” width=“400px”>

8. Best solution to display video
The best solution is to use the HTML <video> element and the <embed> element.
Example:
<video width=“200px” height=“300px” controls>
<source src=“gorrila.mp4” type=“video/mp4”>
<embed src=“movie.swf” width=“200px” height=“300px”>
</video>

9. Final words on Video
Displaying video and audio is tricky in a browser.
You need to know whether or not your browser support the <video> and <audio> elements or support the format of your media files.
You may need to convert a media file from one format to another in order to display it on a given browser

10. Iframe
<iframe> element is used to display a web page within a web page.
Set height and width
<iframe src=“ width=“500px” height=“500px”></iframe>
Use <iframe> as a target for a link
<iframe src=“ name=“home”</iframe>
<a href=“ target=“home”>Go to my home</a>

11. HTML Form HTML forms are used to pass data to a server
An HTML form can contain input elements such as text fields, checkbox, radio-button, submit button, etc.
Let’s look at an example

12. HTML Form <form> has two required attributes: action and method.
<form action=“ method=“get”>
Action: specifies a URL to which the information collected should be sent when the user submits the form.
Method: specifies the HTTP method that will be used to make the request.
Only one of two values can be used: get and post.

13. HTTP Request Method Get: request data from a specific resource
Query string is sent in the URL of a HTTP request
Remain in the browser history
Should never be used when dealing with sensitive data
Have length restrictions
Should be used only to retrieve data
Post: submit data to be processed by a specific resource
Not remain in the browser history.
No restrictions on data length
Not appear in the RUL of a HTTP request.

14. HTTP Request Method
Question: What method to use if you want to view a video on youtube? Why?
Question: What method to use if you want to send your credit card information to a web server? Why?

15. HTTP Request Method
Question: What method to use if you want to view a video on youtube? Why?
Question: What method to use if you want to send your credit card information to a web server? Why?

16. Input Method The text boxes and buttons are called HTML controls.
Each control provides a particular type of input element on a web page.
Each input element has a name attribute which specifies the name of the element.
<form action=“ method=“post”>
<input type=“text” name=“username” >
<input type=“checkbox” name=“boxgroup” value=“basketball”/>
<input type=“checkbox” name=“boxgroup” value=“soccer”/>
<input type=“submit” name=“submit” value=“create”/>
</form>

17. HTML5 Controls Input type=text Input type=password Input type=checkbox
Input type=radio
Input type=button
Input type=submit
Input type=file
Input type=select

18. Submit a Form What will happen if a user clicks the submit button?
Answer: when a submit button is clicked, the values of the form such as text in text fields and data associated with value attribute of checked radio button and checkboxes are sent to the web server.
If HTTP GET method is used, you can see all the data in the URL of the request.