Pages

Thursday, May 8, 2014

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



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

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


Example:1

<!DOCTYPE html>
<html>
<head>
<title> sound with hyperlink Anchor tag</title>
</head>
<body>
<p><a href="movie/nova.swf">Click me to play swf movie</a></p>
<p><a href="movie/nova.ogv">Click me to play ogg movie </a></p>
<p><a href="movie/nova.mp4">Click me to play mp4 movie</a></p>
<p><a href="movie/nova.webm">Click me to play webm movie</a></p>
<p><a href="movie/nova.mov">Click me to play QuickTime movie</a></p>
<p><a href="movie/nova.avi">Click me to play windows movie</a></p>
</body>
</html>

This will produce following result:




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:

Tag

Description

 

<embed>

Defines an embedded object

<object>

Defines an embedded object

<param>     

Defines a parameter for an object

<audio> New tags in HTML5         

New   Defines sound content

<video> New tags in HTML5         

Defines a video or movie

<source> New tags in HTML5

Defines multiple media resources for media elements (<video> and <audio>)

<track> New tags in HTML5

Defines text tracks for media elements (<video> and <audio>)

 




HTML <embed> Tag:

Example

An embedded flash animation:

<embed src="helloworld.swf">

 

Definition and Usage

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




HTML <object> Tag:

Example

How to use the <object> element to embed a Flash file:

<object width="400" height="400" data="helloworld.swf"></object>

 

Definition and Usage

The <object> tag defines an embedded object within an HTML document. Use this element to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages.
You can also use the <object> tag to embed another webpage into your HTML document.
You can use the <param> tag to pass parameters to plugins that have been embedded with the <object> tag.

 

Tips and Notes

Note: An <object> element must appear inside the <body> element. The text between the <object> and </object> is an alternate text, for browsers that do not support this tag.
Tip: For images use the <img> tag instead of the <object> tag.
Tip: At least one of the "data" or "type" attribute MUST be defined.






HTML <param> Tag:

Example

Set the "autoplay" parameter to "true", so the sound will start playing as soon as the page loads:

<object data="horse.wav">
<param name="autoplay" value="true">
</object>

 

Definition and Usage

The <param> tag is used to define parameters for plugins embedded with an <object> element.
Tip: HTML 5 also includes two new elements for playing audio or video: The <audio> and <video> tags.




HTML <audio> Tag:

Example

Play a sound:

<audio controls>

<source src="horse.ogg" type="audio/ogg">

<source src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio tag.

</audio>

 

Definition and Usage

The <audio> tag defines sound, such as music or other audio streams.
Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg:




HTML <video> Tag

Example

Play a video:

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

Definition and Usage

The <video> tag specifies video, such as a movie clip or other video streams.
Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:





HTML <source> Tag:

Example

An audio player with two source files. The browser should choose which file (if any) it has support for:

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Definition and Usage

The <source> tag is used to specify multiple media resources for media elements, such as <video> and <audio>.
The <source> tag allows you to specify alternative video/audio files which the browser may choose from, based on its media type or codec support.





HTML <track> Tag:

Example

A video with two subtitle tracks:

<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

 

Definition and Usage

The <track> tag specifies text tracks for media elements (<audio> and <video>).
This element is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing.
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)