12Video1.ppt

Download Report

Transcript 12Video1.ppt 

INF 240 - Web Design
Using Multimedia on the Web
Video - Part 1
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.
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.
<a href="video.mov"> Check out the video </a>
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.
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.
Example
<object data="seaweed.wmv" type="video/x-ms-wmv"
width=“640" height=“360" classid="CLSID:22D6F312-B0F6-11D094AB-0080C74C7E95">
<param name=“filename" value=“seaweed.wmv“ />
<param name="autostart" value="false“ />
<embed src=“seaweed.wmv"
width=“640" height=“360" autostart=“false“>
video1.htm
</object>
Example
<object data="German Coast Guard.mpg "
type="video/mpeg"
width=“640" height=“640" classid="CLSID:22D6F312-B0F6-11D094AB-0080C74C7E95">
<param name=“src" value="German Coast Guard.mpg“ />
<param name="autostart" value="false“ />
<embed src="German Coast Guard.mpg"
width=“640" height=“640" autostart=“false“
>
</object>
video2.htm
Example – video from Internet – MySpace
Copy and paste in HTML markup
<object width="425" height="360" >
<param name="allowFullScreen" value="true"/>
<param name="wmode" value="transparent"/>
<param name="movie“
value="http://mediaservices.myspace.com/services/media/em
bed.aspx/m=26811958,t=1,mt=video"/>
<embed
src="http://mediaservices.myspace.com/services/media/embe
d.aspx/m=26811958,t=1,mt=video" width="425" height="360"
allowFullScreen="true" type="application/x-shockwave-flash"
wmode="transparent">
</embed>
video3.htm
</object>
New HTML multimedia elements for HTML 5
http://www.alistapart.com/articles/previewofhtml5/
http://www.crearedesign.co.uk/blog/web-designers/html5examples-web-designers.html
http://html5doctor.com/
The embed element
The <embed> element may be used to embed video in a
Web page, much the same as with audio.
Syntax:
<embed ... >
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 <video> tag is supported by Internet Explorer 9+,
Firefox, Opera, Chrome, and Safari.
Using the <video> 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.
Attributes
Currently, there are 3 supported video formats for
the <video> element:
mp4, webm, and ogg
In conjunction with the <video> element, the <source>
element may be used to specify multiple media
resources.
The <source> tag allows you to specify alternative
video files which the browser may choose from, based
on its media type or codec support.
Example
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
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/
Questions?