April 12

HTML – YouTube Videos

LinkedInGoogle GmailFacebookShare

The easiest way to play videos (others or your own) in HTML is to use YouTube.


Playing a YouTube Video in HTML

If you want to play a video in a web page, you can upload the video to YouTube and insert the proper HTML code to display the video:

Example – YouTube iFrame

<iframe width=”420″ height=”345″
src=”http://www.youtube.com/embed/XGSy3_Czz8k”>
</iframe>

Example – YouTube Embedded

<embed
width=”420″ height=”345″
src=”http://www.youtube.com/v/XGSy3_Czz8k”
type=”application/x-shockwave-flash”>
</embed>

April 12

HTML Videos

Videos can be embedded in HTML pages with several methods.


Playing Videos in HTML

Example

<video width=”320″ height=”240″ 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>

Problems, Problems, and Solutions

Playing 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 Webw3Schools summarizes the problems and the solutions.


HTML Video – Using <embed>

The <embed> tag defines a container for external (non-HTML) content.

The following HTML fragment displays a Flash video embedded in a web page:

Example

<embed src=”intro.swf” height=”200″ width=”200″>

Problems

  • If the browser does not support Flash, the video will not play
  • iPad and iPhone do not support Flash videos

HTML Video – Using <object>

The <object> tag tag can also define a container for external (non-HTML) content.

The following HTML fragment displays a Flash video embedded in a web page:

Example

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

Problems:

  • If the browser does not support Flash, the video will not play
  • iPad and iPhone do not support Flash videos

The HTML5 <video> Element

The HTML5 <video> tag defines a video or movie.

The <video> element works in all modern browsers.

The following example uses the HTML5 <video> tag, which specifies one MP4 file (for Internet Explorer, Chrome, Firefox 21+, and Safari), and one OGG file (for older Firefox and Opera). If something fails, it will display a text:

Example

<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>

Problems:

  • You must convert your videos to many different formats
  • The <video> element does not work in older browsers

HTML Video – The Best Solution

The best solution is to use the HTML5 <video> element + the <embed> element.

The example below uses the <video> element and tries to play the video either as MP4 or OGG. If that fails, the code “falls back” to try the <embed> element:

HTML 5 + <object> + <embed>

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

Problems:

  • You must convert your videos to many different formats

HTML Video – YouTube Solution

However, maybe the easiest way to display videos in HTML pages, is to use YouTube (see next chapter)!


HTML Video – 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 to play the file:

Example

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

Tips About Inline Videos

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

If you plan to use inline videos, be aware that many people find it 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 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 Multimedia Tags

5= Tag added in HTML5.

Tag Description
<embed> Defines an embedded object
<object> Defines an embedded object
<param> Defines a parameter for an object
<audio> Defines sound content
<video> Defines a video or movie
<source> Defines multiple media resources for media elements (<video> and <audio>)
<track> Defines text tracks for media elements (<video> and <audio>)
Category: HTML Videos
April 12

HTML Sounds / Audio

Sounds can be embedded in HTML pages with several 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 Webw3Schools summarizes the problems and the solutions.


Using Plug-ins

A plug-in is a small computer program that extends the standard functionality of the browser.

Plug-ins can be added to HTML pages using the <object> tag or the <embed> tag.

These tags define 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.


HTML Audio – Using <embed>

The <embed> tag defines a container for external (non-HTML) content.

The following code fragment should play an MP3 file embedded in a web page:

Example

<embed height=”50″ width=”100″ src=”horse.mp3″>

Problems:

  • Different browsers support different audio formats
  • 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

HTML Audio – Using <object>

The <object> tag can also define a container for external (non-HTML) content.

The following code fragment should play an MP3 file embedded in a web page:

Example

<object height=”50″ width=”100″ data=”horse.mp3″></object>

Problems:

  • Different browsers support different audio formats
  • 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

The HTML5 <audio> Element

The HTML5 <audio> tag defines sound, such as music or other audio streams.

The <audio> element works in all modern browsers.

The following example uses the HTML5 <audio> tag, which specifies one MP3 file (for Internet Explorer, Chrome, Firefox 21+, and Safari), and one OGG file (for older Firefox and Opera). If something fails, it will display a text:

Example

<audio controls>
<source src=”horse.mp3″ type=”audio/mpeg”>
<source src=”horse.ogg” type=”audio/ogg”>
Your browser does not support this audio format.
</audio>

Problems:

  • You must convert the audio files into different formats
  • The <audio> element does not work in older browsers

HTML Audio – The Best Solution

The best solution is to use the HTML5 <audio> element + the <embed> element.

The example below uses the <audio> element and tries to play the audio either as MP3 or OGG. If that fails, the code “falls back” to try the <embed> element:

Example

<audio controls>
<source src=”horse.mp3″ type=”audio/mpeg”>
<source src=”horse.ogg” type=”audio/ogg”>
<embed height=”50″ width=”100″ src=”horse.mp3″>
</audio>

Problems:

  • You must convert the audio files into different formats
  • The <embed> element cannot “fall-back” to display an error message

HTML Audio – 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=”horse.mp3″>Play the sound</a>

Tips About Inline Sounds

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, be aware that many people will find it annoying. Also note that some users might have turned off the inline sound option in their browser.

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


HTML Multimedia Tags

5= Tag added in HTML5.

Tag Description
<embed> Defines an embedded object
<object> Defines an embedded object
<param> Defines a parameter for an object
<audio> Defines sound content
<video> Defines a video or movie
<source> Defines multiple media resources for media elements (<video> and <audio>)
<track> Defines text tracks for media elements (<video> and <audio>)
April 12

HTML – Plug-ins

The purpose of a plug-in, is to extend the functionality of the HTML browser.


HTML Helpers (Plug-ins)

A helper application is a small computer program that extends the standard functionality of the browser. Helper applications are also called plug-ins.

Examples of well-known plug-ins are Java applets and Adobe Flash Player.

Plug-ins can be added to web pages with the <object> tag or the <embed> tag.

Plug-ins can be used for many purposes: to display maps, scan for viruses, verify your bank id, and much more. The restrictions are few.


What is The Best Way to Play Audio or Video in HTML?

The best way to embed audio in a web page is to use the HTML5 <audio> element.

The best way to embed video in a web page is to use the HTML5 <video> element.


The <object> Element

The <object> element is supported in all major browsers.

The <object> element defines an embedded object within an HTML document.

It is used to to embed plug-ins (like Java applets, ActiveX, PDF, and Flash) in web pages.

It can also be used to embed another webpage, or web content like images, into HTML documents.

Note The text between <object> and </object> is displayed if the browser doesn’t support the tag.

The HTML <param> tag is used to pass parameters to the plug in.

 

Example

<object width=”400″ height=”50″ data=”bookmark.swf”></object>

 


The <embed> Element

The <embed> element is supported in all major browsers.

The <embed> element defines a container for an external application or interactive content (a plug-in).

Many web browsers have supported the <embed> element for a long time. However, it has not been a part of the HTML specification before HTML5.

The <embed> element will validate in an HTML5 page, but not in an HTML 4 page.

Example

<embed width=”400″ height=”50″ src=”bookmark.swf”>
Note Note that the <embed> element does not have a closing tag. It can not contain alternative text.
Category: HTML - Plug-ins
April 12

HTML Multimedia

Multimedia on the web is sound, music, videos, movies, and animations.


What is Multimedia?

Multimedia comes in many different formats. It can be almost anything you can hear or see.

Examples: Pictures, music, sound, videos, records, films, animations, and more.

Modern web pages often have embedded multimedia elements, and modern browsers have support for various multimedia formats.

In this tutorial you will learn about the different multimedia formats.


Internet 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 support for pictures was also added.

The support for sounds, animations, and videos is handled in different ways by various browsers. Some multimedia elements is supported, and some requires an extra helper program (a plug-in) to work.

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 type of a file, is to look at the file extension. When a browser sees the file extension .htm or .html, it will treat the file as an HTML file. The .xml extension indicates an XML file, and the .css extension indicates a style sheet file. Pictures are recognized by extensions like .gif, .png and .jpg.

Multimedia files also have their own formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.


Video Formats

Videoformats MP4 is the new and upcoming format for internet video.

MP4 is recommended by YouTube.

MP4 is supported by Flash players and HTML5.

Format File Description
AVI .avi AVI (Audio Video Interleave) was developed by Microsoft, and is therefore playable on all Windows computers. It is commonly used in video cameras and TV hardware, but is difficult to play on non-Windows computers.
WMV .wmv WMV (Windows Media Video) was developed by Microsoft, and is therefore playable on all Windows computers. It is commonly used in video cameras and by TV hardware, but is difficult to play on non-Windows computers.
QuickTime .mov QuickTime was developed by Apple, and is therefore playable on all Apple computers. It is commonly used in video cameras and by TV hardware, but is difficult to play on non-Apple computers.
RealVideo .rm
.ram
RealVideo was developed by Real Media to allow video streaming with low bandwidths. It is still used for online video and Internet TV, but because of the low bandwidth priority, the quality is also low.
Flash .swf
.flv
Flash was developed by Macromedia. Flash requires an extra component to play in a browser.
Ogg .ogg Theora Ogg was developed by the Xiph.Org Foundation.
WebM .webm WebM is a project (www.webmproject.org) by the web giants, Mozilla, Opera, Adobe, and Google.
MPEG .mpg
.mpeg
MPEG, developed by the Moving Pictures Expert Group, used to be the most popular video format on the Internet. It used to be supported by all major browsers, but it is not supported by HTML5.
MPEG-4
or MP4
.mp4 MP4 is the upcoming format on the internet. It is supported by all major browsers in HTML5. YouTube recommends using MP4, and it is commonly used in newer video cameras and TV hardware.

 

Note Only MP4, WebM, and Ogg video is supported by the newest HTML5 standard.

 


Sound Formats

MP3 is the newest format for compressed recorded music. The term MP3 has become synonymous with digital music.

If your website is about recorded music, MP3 is the choice.

Format File Description
MIDI .mid
.midi
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). 

Since MIDI files only contains instructions; they 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/platforms. Because it is the main format for binary music, it is supported by most software, including Internet browsers.

RealAudio .rm
.ram
RealAudio was developed Real Media to allow streaming of audio (online music, Internet radio) with low bandwidths.
WMA .wma WMA (Windows Media Audio), compares in quality to MP3, and is compatible with most music 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.
AAC .aac AAC (Advanced Audio Coding) was developed by Apple as the default format for iTunes.
WAV .wav WAVE (more known as WAV) was developed by IBM and Microsoft. WAV is compatible with Windows, Macintosh, and Linux operating systems.
Ogg .ogg  Ogg was developed by the Xiph.Org Foundation.
MP3 .mp3 MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. The encoding system combines good compression (small files) with high quality. It is supported by all major browsers.
MP4 .mp4 MP4 is a video format, but it can also be used with audio only. MP4 video is the upcoming video format on the internet. This can lead to an automatic support for MP4 audio by all major browsers.

 

Note Only MP3, WAV, and Ogg audio is supported by the newest HTML5 standard.
Category: HTML Multimedia