HTML - Video Codes

Video files, including YouTube videos, are embedded into an HTML document using the <embed> tag. The src attribute defines what video file to embed into the page. The <embed> tag does not require a closing tag. Here is a look at the <embed> tag with a global URL. Notice that its controls, including Play, Stop, Pause, and volume, are already included.

<embed src="http://www.tizag.com/files/html/htmlexample.mpeg"
 autostart="false" />

Mpeg Movie:

You may start and stop your movie files by either pressing the buttons at the bottom of the object or by single-clicking on the object itself. The movie can be restarted by double-clicking your mouse.

HTML - Video Media Types

Flash (.swf) and MOV (.mov) file types are also supported by the <embed> tag.

• .swf - Macromedia's Flash file types - very high compression, great for the web!.
• .wmv - Microsoft's Window's Media Video file types - good quality, variable compression.
• .mov - Apple's Quick Time Movie format - good quality, variable compression.
• .mpeg - the accepted standard for web movie files created by the Moving Pictures Expert Group - good quality, variable compression.

The list above outlines some of the most common "internet-ready" video files. Macromedia's .swf and .mpeg formats may be the best options for use with the web because the high compression rate of these file types reduces file size and expedites the download/buffering periods for your page visitors.

You may also simply place the URL of your media files into the href attribute of an anchor tag, much like the concept of "thumbnailing" images.

<a href="http://www.tizag.com/pics/flash/motiontween1easy.swf">
motiontween1easy.swf</a>

motiontween1easy.swf

HTML - YouTube Videos

YouTube videos can be included in HTML documents, and Google offers the code to do so right on the same page as the video itself!

The code offered by YouTube includes a small handful of parameters that help customize the embedded video object, and if you dive deep enough into the code, you will be able to identify the <embed> element and see the src attribute pointing to the URL of the media file.

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/opVb89Cmrtkamp;hl=enamp;fs=1">
  </param><param name="allowFullScreen" value="true">
  </param><param name="allowscriptaccess" value="always"></param>
  <embed src="http://www.youtube.com/v/opVb89Cmrtk&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344">
  </embed>
</object>

Embed YouTube Video:

HTML - Embed Attributes

To customize the functionality of the embedded media player, be sure to set any of the following attributes.

• autostart - Controls the media's ability to start without prompting (values are "true" or "false")
• hidden - Controls whether or not the play/stop/pause embedded object is hidden or not (values are "true" or "false"; hide your embeded media if you just want background noise)
• loop - Controls the ability of the media to continuously play (values are "true" and "false")
• playcount - Sets a playcount which means the media will repeat itself x number of times, instead of continuously as with the loop attribute above (a playcount of "2" will repeat the video twice)
• volumn - Sets a numeric value for the loudness of your media (values are "0" through "100")

• Go Back
• Continue

Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!