Presentation on theme: "Video, audio, embed, iframe, HTML Form"— Presentation transcript:
1 Video, audio, embed, iframe, HTML Form Lecture 6: HTML5 MediaVideo, audio, embed, iframe, HTML Form
2 VideoBefore 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 buttonPause buttonVolume controlUse 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.
6 AudioHTML5 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 VideoDisplaying 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 requestRemain in the browser historyShould never be used when dealing with sensitive dataHave length restrictionsShould be used only to retrieve dataPost: submit data to be processed by a specific resourceNot remain in the browser history.No restrictions on data lengthNot appear in the RUL of a HTTP request.
14 HTTP Request MethodQuestion: 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 MethodQuestion: 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>
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.