Tuesday, August 14, 2012

Playing Videos in HTML

Videos can be played in HTML by many different methods.

Playing Videos in HTML

Example

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Try it yourself »


Problems, Problems, and Solutions

Displaying videos in HTML is not easy!

You must add a lot of tricks to make sure your video will play in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac , iPad, iPhone).

In this chapter W3Schools summarizes the problems and the solutions.

The <embed> Tag

The purpose of the <embed> tag is to embed multimedia elements in HTML pages.
The following HTML fragment displays a Flash video embedded in a web page:

Example

<embed src="intro.swf" height="200" width="200"/>

Try it yourself »
Problems
  • The <embed> tag is unknown to HTML 4. Your page will not validate correctly.
  • If the browser does not support Flash, your video will not play.
  • iPad and iPhone cannot display Flash videos.
  • If you convert the video to another format, it will still not play in all browsers.

Using The <object> Tag

The purpose of the <object> tag is to embed multimedia elements in HTML pages.
The following HTML fragment displays a Flash video embedded in a web page:

Example

<object data="intro.swf" height="200" width="200"/>

Try it yourself »
Problems:
  • If the browser does not support Flash, your video will not play.
  • iPad and iPhone cannot display Flash videos.
  • If you convert the video to another format, it will still not play in all browsers.

Using the <video> Tag

The <video> element is new in HTML 5.
The purpose of the <video> tag is to embed video elements in HTML pages.
The following HTML fragment displays a video in ogg, mp4, or webm format embedded in a web page:

Example

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

Try it yourself »
Problems:
  • You must convert your videos to many different formats.
  • The <video> element does not work in older browsers.
  • The <video> element does not validate in HTML 4 and XHTML.

The Best HTML Solution

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Try it yourself »
The example above uses 4 different video formats. The HTML 5 <video> element tries to play the video either in mp4, ogg, or webm formats. If this fails, the code "falls back" to try the <object> element. If this also fails, it "falls back" to the <embed> element.
Problems:
  • You must convert your videos to many different formats.
  • The <video> element does not validate in HTML 4 and XHTML.
  • The <embed> element does not validate in HTML 4 and XHTML.
NOTE: Using <!DOCTYPE html> solves the validation problem.

The YouTube Solution

The easiest way to display videos in HTML is to use YouTube (see next chapter).

Using A Hyperlink

If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file.

The following code fragment displays a link to a Flash video. If a user clicks on the link, the browser will launch a helper application, like Windows Media Player to play the AVI file:

Example

<a href="intro.swf">Play a video file</a>

Try it yourself »


A Note About Inline Videos

When a video is included in a web page it is called inline video.

If you plan to use inline videos in your web applications, be aware that many people find inline videos annoying. Also note that some users might have turned off the inline video option in their browser.

Our best advice is to include inline videos only in web pages where the user expects to see a video. An example of this is a page which opens after the user has clicked on a link to see the video.

HTML 4.01 Multimedia Tags

TagDescription
<applet>Deprecated. Defines an embedded applet
<embed>Deprecated in HTML4 but not in HTML5. Defines an embedded object
<object>Defines an embedded object
<param>Defines a parameter for an object

Complete HTML 4.01 Reference.

Playing Sounds in HTML

Sounds can be played in HTML by many different methods.

Problems, Problems, and Solutions

Playing audio in HTML is not easy!
You must know a lot of tricks to make sure your audio files will play in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac , iPad, iPhone).
In this chapter W3Schools summarizes the problems and the solutions.

Using Plug-ins

A browser Plug-in is a small computer program that extends the standard functionality of the browser.
Plug-ins can be used for many purposes: play music, display maps, verify your bank id, control your input, and much more.
Plug-ins can be added to HTML pages using the <object> tag or the <embed> tag. 
These tags defines containers for resources (normally non-HTML resources), which, depending on the type, will either be displayed by the browsers, or by an external plug-in.

Using The <embed> Element

The <embed> tag defines a container for external (non-HTML) content. (It is an HTML5  tag, invalid in HTML 4, but works in all browsers).
The following code fragment can display an MP3 file embedded in a web page:

Example

<embed height="100" width="100" src="song.mp3" />

Try it yourself »

Problems:

  • The <embed> tag is invalid in HTML 4. Your page will not validate as HTML 4.
  • Different browsers have different audio format support.
  • If a browser does not support the file format, the audio will not play without a plug-in.
  • If the plug-in is not installed on the users' computer, the audio will not play.
  • If you convert the file to another formats, it will still not play in all browsers.
NOTE: Using <!DOCTYPE html> (HTML5) solves the validation problem.

Using The <object> Element

The <object tag> tag can also define a container for external (non-HTML) content.
The following code fragment can display an MP3 file embedded in a web page.

Example

<object height="100" width="100" data="song.mp3"></object>

Try it yourself »

Problems:

  • Different browsers have different audio format support.
  • If a browser does not support the file format, the audio will not play without a plug-in.
  • If the plug-in is not installed on the users' computer, the audio will not play.
  • If you convert the file to another formats, it will still not play in all browsers.

Using the HTML5 <audio> Element

The <audio> element is an HTML5 element, invalid in HTML 4, but it works in all browsers.

Example

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>

Try it yourself »
The example above uses an mp3 file, to make it work in Internet Explorer, Chrome, and Safari.
To make the audio work in Firefox and Opera, a file of the type ogg is added. If it fails it displays an error.

Problems:

  • The <audio> tag is invalid in HTML 4. Your page will not validate as HTML 4.
  • You must convert your audio files into different formats.
  • The <audio> element does not work in older browsers.
NOTE: Using <!DOCTYPE html> (HTML5) solves the validation problem.

The Best HTML Solution

Example

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

Try it yourself »
The example above uses two different audio formats. The HTML5 <audio> element tries to play the video either as mp3 or ogg. If this fails, the code "falls back" to try the <embed> element.

Problems:

  • You must convert your videos to different formats.
  • The <audio> element does not validate as HTML 4 and XHTML.
  • The <embed> element does not validate as HTML 4 and XHTML.
  • The <embed> element cannot "fall-back" to display an error.
NOTE: Using <!DOCTYPE html> (HTML5) solves the validation problem.

The Easiest Way to Add Audio to Your Site

The easiest way to add audio to your web pages?
The Yahoo Media Player is definitely a favorite.
Using the Yahoo Media Player is a different approach. You simply let Yahoo do the job of playing your songs.
It plays mp3 and a variety of other formats. You can add it to your page (or blog) with a single line of code, and easily turn your HTML page into a professional playlist.

The Yahoo Media Player

Example

<a href="song.mp3">Play Song</a>

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

Try it yourself »
Using the Yahoo player is free. To use it you insert this piece of JavaScript at the bottom of your web page:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
Then you simply link to your MP3 files in your HTML, and the JavaScript code automatically creates a play button for each song:

<a href="song1.mp3">Play Song 1</a>
<a href="song2.mp3">Play Song 2</a>
...
...
...
The Yahoo Media Player presents your readers with a small play button instead of a full player. However, when you click the button, a full player pops up.

Note that the player is always docked and ready at the bottom the window. Just click on it to slide it out.

Using A Hyperlink

If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file.
The following code fragment displays a link to an mp3 file. If a user clicks on the link, the browser will launch a helper application to play the file:

Example

<a href="song.mp3">Play the song</a>

Try it yourself »


Inline Sound

When sound is included in a web page, or as part of a web page, it is called inline sound.
If you plan to use inline sounds in your web applications, be aware that many people will find inline sound annoying. Also note that some users might have turned off the inline sound option in their browser.
Our best advice is to include inline sound only in web pages where the user expects to hear the sound. An example of this is a page which opens after the user has clicked on a link to hear a recording.

HTML 4.01 Multimedia Tags

TagDescription
<applet>Deprecated. Defines an embedded applet
<embed>Deprecated in HTML4 but not in HTML5. Defines an embedded object
<object>Defines an embedded object
<param>Defines a parameter for an object

Complete HTML 4.01 Reference.

HTML Object Element

The purpose of the <object> element is to support HTML helpers (Plug-Ins)

HTML Helpers (Plug-Ins)

Beatles    A helper application is a program that can be launched by the browser to "help". Helper applications are also called Plug-Ins.

Helper applications can be used to play audio and video (and much more). Helper applications are launched using the <object> tag.

One advantage of using a helper application to play video and audio, is that you can let some (or all) of the player settings be controlled by the user.

Most helper applications allow manual (or programmed) control over the volume settings and play functions like rewind, pause, stop and play.


The Best Way to Play Videos in HTML?

For the best general way to include videos in HTML, refer to the next chapter.

Playing Wave Audio Using QuickTime

Example

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="liar.wav" />
<param name="controller" value="true" />
</object>

Try it yourself »


Playing MP4 Video Using QuickTime

Example

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mp4" />
<param name="controller" value="true" />
</object>

Try it yourself »


Playing SWF Videos Using Flash

Example

<object width="400" height="40"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="bookmark.swf" width="400" height="40"></embed>
</object>

Try it yourself »

Playing WMV Movies Using Windows Media Player

The example below shows the suggested code used to display a Windows Media file.

Example

<object width="100%" height="100%"
type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="3d.wmv">
<param name="filename" value="3d.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full" />
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="3d.wmv" width="100%" height="100%" autostart="true" showcontrols="true" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>

Try it yourself »


Plug-Ins

Plug-Ins can be used in HTML for many purposes. They can be used to display maps, verify your bank id, control your input, and much more. The restrictions are few.

Multimedia Introduction

Multimedia on the web is sound, music, videos, and animations.
Modern web browsers have support for many multimedia formats.

What is Multimedia?

Multimedia comes in many different formats. It can be almost anything you can hear or see like text, pictures, music, sound, videos, records, films, animations, and more.
On the Internet you can often find multimedia elements embedded in web pages, and modern web browsers have support for a number of multimedia formats.
In this tutorial you will learn about different multimedia formats and how to use them in your web pages.

Browser Support

The first Internet browsers had support for text only, and even the text support was limited to a single font in a single color. Then came browsers with support for colors, fonts and text styles, and the support for pictures was added.
The support for sounds, animations and videos is handled in different ways by different browsers. Some elements can be handled inline, and some requires an extra helper program (a plug-in).
You will learn more about plug-ins in the next chapters.

Multimedia Formats

Multimedia elements (like sounds or videos) are stored in media files.
The most common way to discover the media type is to look at the file extension. When a browser sees the file extensions .htm or .html, it will assume that the file is an HTML page. The .xml extension indicates an XML file, and the .css extension indicates a style sheet. Picture formats are recognized by extensions like .gif and .jpg.
Multimedia elements also have their own file formats with different extensions like .swf, .wmv, .mp3, and .mp4.

Video Formats

Videoformats         The MP4 format is the new and upcoming format for internet video. It is supported by YouTube, Flash players and HTML5.
FormatFileDescription
AVI.aviThe AVI (Audio Video Interleave) format was developed by Microsoft. The AVI format is supported by all computers running Windows, and by all the most popular web browsers. It is a very common format on the Internet, but not always possible to play on non-Windows computers.
WMV.wmvThe Windows Media format is developed by Microsoft. Windows Media is a common format on the Internet, but Windows Media movies cannot be played on non-Windows computer without an extra (free) component installed. Some later Windows Media movies cannot play at all on non-Windows computers because no player is available
MPEG.mpg
.mpeg
The MPEG (Moving Pictures Expert Group) format is the most popular format on the Internet. It is cross-platform, and supported by all the most popular web browsers.
QuickTime.movThe QuickTime format is developed by Apple. QuickTime is a common format on the Internet, but QuickTime movies cannot be played on a Windows computer without an extra (free) component installed.
RealVideo.rm
.ram
The RealVideo format was developed for the Internet by Real Media. The format allows streaming of video (on-line video, Internet TV) with low bandwidths. Because of the low bandwidth priority, quality is often reduced.
Flash.swf
.flv
The Flash (Shockwave) format was developed by Macromedia. The Shockwave format requires an extra component to play. But this component comes preinstalled with web browsers like Firefox and Internet Explorer.
Mpeg-4.mp4Mpeg-4 (with H.264 video compression) is the new format for the internet. In fact, YouTube recommends using MP4. YouTube accepts multiple formats, and then converts them all to .flv or .mp4 for distribution. More and more online video publishers are moving to MP4 as the internet sharing format for both Flash players and HTML5.


Sound Formats

FormatFileDescription
MIDI.mid
.midi
The MIDI (Musical Instrument Digital Interface) is a format for electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital musical instructions (notes) that can be played by electronics (like your PC's sound card). Click here to play The Beatles.
Since MIDI format only contains instructions (notes), MIDI files are extremely small. The example above is only 23K in size but it plays for nearly 5 minutes. MIDI is supported by many software systems over a large range of platforms. MIDI is supported by all the most popular Internet browsers.
RealAudio.rm
.ram
The RealAudio format was developed for the Internet by Real Media. The format also supports video. The format allows streaming of audio (on-line music, Internet radio) with low bandwidths. Because of the low bandwidth priority, quality is often reduced.
Wave.wavThe Wave (waveform) format is developed by IBM and Microsoft. It is supported by all computers running Windows, and by all the most popular web browsers (except Google Chrome).
WMA.wmaThe WMA format (Windows Media Audio), compares in quality to MP3, and is compatible with most players, except the iPod. WMA files can be delivered as a continuous flow of data, which makes it practical for use in Internet radio or on-line music.
MP3.mp3
.mpga
MP3 files are actually the sound part of MPEG files. The MPEG format was originally developed for video by the Moving Pictures Experts Group. MP3 is one of the most popular sound formats for music. The encoding system combines good compression (small files) with high quality. Expect future software systems to support it.

What Format To Use?

The WAVE is the most popular uncompressed sound format on the Internet, and it is supported by all popular browsers. If you want uncompressed sound (music or speech) to be available to all your visitors, you should use the WAVE format.
The MP3 format is the newest format for compressed recorded music. The term MP3 has become synonymous with digital music. If your website is about recorded music, the MP3 format is the choice.