This section looks at the ways video files can be linked to or embedded within an HTML document.
A Simple Link
Like audio, downloadable video files (AVI, MPEG, and QuickTime) can be linked to HTML documents using the standard <a> tag:
When the user clicks on the link, the browser looks at the file type (as defined in the filename suffix) and launches an external player application or uses a plug-in to play the movie right in the browser window. Which player it uses depends on how that user has the browser configured, so it is out of the control of the web page designer.
As in audio, streaming media in the RealMedia (.rm) and streaming Windows Media (.asf) formats are added to web pages via linked or embedded reference files (also called metafiles).
In brief, to link to a RealMedia movie, create a link to a RealMedia metafile (.ram) as shown in this example:
The metafile is a small text-only file that contains only the URL for the RealMedia file (suffix .rm). When the user clicks the link, the browser accesses the metafile, which launches the player and passes it the URL of the actual media file:pnm://domainname.com/song.rm
To embed a RealMedia movie on a web page, use the following code:<OBJECT ID="spacestress" CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" HEIGHT="160" WIDTH="320" BORDER="0"><PARAM NAME="SRC" VALUE="realmedia/spacestress.rpm"><PARAM NAME="CONTROLS" VALUE="all"><EMBED SRC="realmedia/oakshoes.rpm" HEIGHT="150" WIDTH="250" AUTOSTART="false" CONTROLS="all" BORDER="0"></OBJECT>
The value of the classid should be copied exactly as it is shown here as this points to the RealMedia player. Note that when embedding, the metafile suffix is .rpm (rather than .ram).
To link to a Windows Media Video file for download and playback, create a link directly to the video file:
To link to a streaming Windows Media file for unicasting (a single stream triggered by a user request), make a link to an active stream redirector file (.asx), that works like a RealMedia metafile:<A HREF="streamingmovie.asx">See a streaming movie</A>
The content of the .asx file looks like this:<ASX version="3"><Entry><ref href="path/streamingmovie.asf" /></Entry></ASX>
For multicasting (a publisher-controlled broadcast of a single stream that is viewed by many users simultaneously), it is recommended that you generate code using the tools and wizards provided by the Windows Media Administrator program.
Embedded QuickTime Movies
In addition to simply linking to a QuickTime movie, you can also place the player right in the web page like an image using the <embed> tag. The QuickTime plug-in is required to play .mov files inline, but it is bundled with the two major browsers, making it a relatively safe way to put a video right on a page. The method listed here is supported by Internet Explorer 3+ and Navigator 3+.
A simple <embed> tag looks like this:<EMBED SRC="cool.mov" AUTOPLAY=false WIDTH=160 HEIGHT=136 CONTROLLER="true">
In this example, the actual height of the movie is 120 pixels, but I've added 16 pixels (for a total of 136) so the QuickTime control strip can display below the movie.
Browser <embed> attributes
The <embed> tag has a number of standard attributes that control various aspects of playback and display. These attributes are recognized by every browser that supports the <embed> tag and are supported by the QuickTime plug-in as well.
Required. This attribute points to the video file you want to play.
Required. These attributes set the width and height in number of pixels for the video frame. It is important that the values of width and height be at least 2, even when the player is set to be hidden. A value of less than 2 results in crashes in some browsers. Add 16 pixels to the height of your movie if you have also set the controller tag to true, so that the QuickTime controller strip has room to display.
When set to true, the plug-in player is not displayed. Be sure that the height and width are set to at least 2 even if the player is hidden to prevent crashes. This attribute is listed here for thoroughness' sake, but it is more appropriate for QuickTime audio (used as a background sound) than for video.
true causes the video to loop continuously. false (the default) causes the video to play through once. palindrome makes the video play through, then play in reverse, then play through, continuously.
This attribute makes your movie a link to another page.
Sets the alignment of the movie on the page (similar to an image).
Sets the width of the border around the plug-in.
Holds space to the left and right (hspace) and above and below (vspace) the plug-in when positioned with the align attribute.
Assigns a name to the embedded object for use with a scripting language.
Specifies the MIME type of the file (such as video/quicktime or image/xquicktime) if you aren't sure the web server will provide it (it usually does).
Special QuickTime <embed> attributes
There are dozens of specialized attributes that are recognized by the QuickTime plug-in. The list below includes only a few of the most common.
The video will start playing automatically if this attribute is set to true. The default depends on the user's settings, but it is generally false (meaning the user will have to start the video with the Play button).
A control bar for the video will be visible when this is set to true (or by default). Although it is possible to turn off the controls, it is usually advisable to leave them visible and available for use.
By default, audio is played at full volume (100%). You can set it lower to compensate for an especially loud audio track. Setting it higher than 100% is discouraged because it causes distortion and lessens audio quality.
When set to false (the default), you allow the video to skip frames in order to ensure smooth playback. Do not set this attribute to true if you have audio with your movie as it will be muted during playback.
The dynsrc Attribute
Internet Explorer allows you to embed a video on a page using the nonstandard dynsrc attribute in the <img> tag. Note: This tag does not work with any version of Netscape Navigator, so using it may alienate a portion of your audience.
An <img> tag with a dynsrc attribute is placed in the document like an ordinary <img> tag. The dynsrc attribute replaces the traditional src attribute, but otherwise you can use all the same <img> attributes such as alignment, horizontal and vertical gutter space, etc., as follows:<IMG DYNSRC="waycool.mov" ALIGN=right HSPACE=12>
The <img dynsrc> tag can also take a number of specialized attributes for controlling video display:
Adds playback controls for the video.
Provides the URL for the video file to be displayed on the page.
Sets the number of times to play the video. It can be a number value or set to infinite.
Specifies when to play the video. By default, it begins playing as soon as it's downloaded (fileopen). You can set it to start when the mouse pointer is over the movie area (mouseover). If you combine them (separated by a comma), the movie plays once when it's downloaded, then again every time the user mouses over it.
Web Designing Related Interview Questions
|HTML Interview Questions||HTML 5 Interview Questions|
|Flash Interview Questions||Graphic Design Interview Questions|
|Illustrator Interview Questions||Dreamweaver Interview Questions|
|UI Developer Interview Questions||Dreamweaver CS3 Interview Questions|
|CSS Advanced Interview Questions||Web Developer Guide Interview Questions|
|Log Shipping Interview Questions||Spring Boot Interview Questions|
|UI Designer Interview Questions||Bootstrap 4 Interview Questions|
Web Designing Related Practice Tests
|HTML Practice Tests||HTML 5 Practice Tests|
|Flash Practice Tests||Graphic Design Practice Tests|
|Illustrator Practice Tests||Dreamweaver Practice Tests|
|UI Developer Practice Tests||Dreamweaver CS3 Practice Tests|
|Web Developer Guide Practice Tests||Advanced jQuery Practice Tests|
Web Designing Tutorial
Designing For A Variety Of Browsers
Designing For A Variety Of Displays
Web Design Principles For Print Designers
A Beginners Guide To The Server
Printing From The Web
Structural Html Tags
Adding Images And Other Page Elements
Specifying Color In Html
Cascading Style Sheets
Server Side Includes
Designing Graphics With The Web Palette
Audio On The Web
Video On The Web
Flash And Shockwave
Introduction To Smil
Introduction To Dhtml
Introduction To Xml
Wap And Wml
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.