1 / 18

Lecture 6: HTML5 Media

Lecture 6: HTML5 Media. Video, audio, embed, iframe , HTML Form. 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.

jania
Download Presentation

Lecture 6: HTML5 Media

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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 • <iframesrc=“http://ww2.cs.fsu.edu/~tian/webDevelopment.php” width=“500px” height=“500px”></iframe> • Use <iframe> as a target for a link • <iframesrc=“http://ww2.cs.fsu.edu/~tian/home.php” name=“home”</iframe> • <a href=“http://ww2.cs.fsu.edu/~tian/home.php” 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=“http://www.youtube.com” 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=“www.tian.com” 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.

More Related