1. INF 240 - Web Design Using Multimedia on the Web Video - Part 1

2. Advantages and disadvantages of using video Video adds visual impact to Web pages. Advantages - Captures interest. - Increases user’s memory retention. - Clarifies complex physical actions and relationships. Disadvantages - Is relatively expensive (in time and effort) to produce. - Requires extensive computer processing, memory and storage.

3. Adding Video to an HTML Document A Simple Link Like audio, downloadable video files ( e.g. avi, mpeg, Windows Media, and QuickTime) can be linked to HTML documents using the standard anchor ( a ) element. Check out the video When the user clicks on the link, the browser looks at the file type and launches an external player application in a new window, or uses a browser plugin to play the movie in the browser window.

4. Embedding Video in a Web Page The options are the same as for sound. Again, most Web authors recommend using the object element with a nested embed element to place video in the Web page.

5. Example <object data="seaweed.wmv" type="video/x-ms-wmv" width=“640" height=“360" classid="CLSID:22D6F312-B0F6-11D0- 94AB-0080C74C7E95"> <embed src=“seaweed.wmv" width=“640" height=“360" autostart=“false“> video1.htm

6. Example <object data="German Coast Guard.mpg " type="video/mpeg" width=“640" height=“640" classid="CLSID:22D6F312-B0F6-11D0- 94AB-0080C74C7E95"> <embed src="German Coast Guard.mpg" width=“640" height=“640" autostart=“false“ > video2.htm

7. Example – video from Internet – MySpace Copy and paste in HTML markup <param name="movie“ value="http://mediaservices.myspace.com/services/media/em bed.aspx/m=26811958,t=1,mt=video"/> video3.htm

8. New HTML multimedia elements for HTML 5 http://www.alistapart.com/articles/previewofhtml5/ http://www.crearedesign.co.uk/blog/web-designers/html5- examples-web-designers.html http://html5doctor.com/ The embed element The element may be used to embed video in a Web page, much the same as with audio. Syntax:

9. The video element Very similar to the audio HTML element, only delivering video rather than audio. One additional attribute for the video element is the ‘ poster ’, which allows you to specify a URL of an image you want to display while the video is being downloaded. The tag is supported by Internet Explorer 9+, Firefox, Opera, Chrome, and Safari. Using the element, one of HTML5’s many interesting features, is the ability to embed videos within a Web design without the need for additional plugins such as Adobe Flash.

10. Attributes

11. Currently, there are 3 supported video formats for the element: mp4, webm, and ogg

12. In conjunction with the element, the element may be used to specify multiple media resources. The tag allows you to specify alternative video files which the browser may choose from, based on its media type or codec support.

13. Example Your browser does not support the video tag.

14. Sites that gives information about browser compatibility with HTML5: http://camendesign.com/code/video_for_everybody/test.html http://camendesign.com/code/video_for_everybody/ http://www.findmebyip.com/litmus/

15. Questions?