Graphical Content and Multimedia
This lesson will teach you how to insert images, embed video and audio via HTML. You should already have basic understanding of HTML.
- 1 Images
- 2 Audio
- 3 Video
This section will teach you how to display images.
Attributes and Values
To display images we use the
<img> tag. The
<img> tag has many attributes such as
height. We use these attributes to display and change the image display behaviors in people's browsers. Each attribute is assigned a value. The value for the
src attribute would be the URL of the image. The value of the
width attribute would be the number of pixels high or wide you want the image to be. Unlike other tags in HTML, the
<img> tag is not followed by its tag with a slash before the name. Once the stricter, cleaner version of HTML, XHTML, becomes the standard set by the W3C instead of HTML 4.1, a slash will be required after the value of the final attribute.
The following sub-sections will explain the multiple attributes and the values you can assign.
src attribute actually displays the image. You write the image's URL in quotation marks after the attribute name and an equal sign, as shown in the example below.
If you're taking this course, you've probably been surfing the Internet for sometime. I suppose you've seen an image that hasn't loaded correctly, and an X has been displayed in place of it. You may have seen text next to or under it. I'm also sure you've hovered your mouse over an image and seen text inside of a yellow box show up. This is the purpose of the
alt attribute. You use the
alt attribute in the manner displayed below.
<img src="image/background.gif" alt="This is an image"/>
If you were to hover over the image or if the image didn't load correctly in the case you say, misspelled the URL, then that text would be displayed.
height attribute is used to change the number of pixels on the y-axis of the image. This way you can adjust the size of the image to your needs. It is used in the manner displayed below.
<img src="image.gif" height="100"/>
length attributes are interchangeable. You may use either of them to change the number of pixels on the y-axis of the image.
width attribute is used to change the number of pixels on the x-axis of the image. You use it the same way the
height/length attribute is used, only change the name and it edits the x-axis, not the y-axis, like so.
<img src="image.gif" width="100"/>
This section will teach you how to include audio on your webpages.
Audio Attributes and Values
Audio has tags and attributes, the same as images do using
<audio> tag to define. This is a new feature in html5, modern Web Browser except Internet Explorer(below 9 series) support it, but in various codecs, the most common they all supported is theora with extension .oga/ogg.
'attributes': autoplay, controls, preload, src
- preload: means a video loading without asking user
- autoplay: as the page loading the video start, corporate with preload
- controls: enable control panel
- src: same like audio, a URL to the specific file
<audio autoplay controls preload src="audio/2-13 Fallen Ascent (Tower of Zot) [Children of the Monkey Machine].mp3"> your browser does not support this modern feature, you may consider a switch<audio/>
Before html5 standard, audio may use
<bgsound>, which is really an attribute of the
<body> tag rather than a tag itself. This is meant to support MIDI sound files, and is not a W3C standard, as only Internet Explorer supports it. People using any other browsers will be unable to hear anything for that.
The best Internet video format
Currently, Flash Video (FLV) is the video format which can be viewed on the most computers and mobile devices.
FLV is a media stream format used to deliver video over the Internet to Adobe Flash Player, which is available on more than 90% of internet-connected computers.
To add FLV to website, you need a web-based FLV player (which is a SWF file) that control the playback of the FLV movie, code for embedding (either HTML tags or SWFObject) and a web host server that host the FLV movie.
Mobile phones (such as the iPhone and Android) have limited support for Flash video
'attributes': autoplay, controls, preload, src
preload: means a video loading without asking user,
autoplay: as the page loading the video start, corporate with preload
controls: enable control panel
src: same like audio, a URL to the specific file
There are mainly two HTML tags for video embeddng, they are
embed. Below code is an example about how to embed a flv player(a SWF file) onto web page using these two tags:
<object classid="clasid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="432" height="330" id="myMovieName" > <param name="movie" value="myMovieName.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF"> <embed src="myMovieName.swf" quality="high" bgcolor="#FFFFFF" width="432" height="330" name="myMovieName" align="" type="application/x-shockwave-flash" pluginspace="http://www.macromedia.com/go/getflashplayer"> </embed> </object>
You can just regard SWFObject as a piece of code for embedding flash file to web page. It is more stable and supports more web browsers than using object / embed tags for embedding video.
Detail information of SWFObject
Web-based FLV player
An FLV file is just a video and it needs a web-based FLV player to be displayed on web pages. We can either create an FLV player by ourselves with Adobe Flash CS3, or use a pre-designed FLV player. Currently, FLV player created by playerdiy.com is good. Users have questions can check its tutorial here.
If video is not FLV (e.g. AVI, WMV..) and needs to be added to web page, FLV encoder sure come in handy at times like this. FLV encoder can convert video to FLV so that people can add the resulting FLV to their website, blog, etc. Free and good FLV encoder is available on the market, like Moyea Video4Web Converter. There are also a lot of other FLV encoders on the market which convert all kinds of video formats to FLV and offer different features.