Playing video in browser:
It is very easy to play videos in browser. HTML5 provides video tag <video> which is one of the best feature in HTML5 for playing videos in browser.Most of the updated browsers are supported this video tag.
Syntax for video tag:
<video controls>
<source src="path of video">
</video>
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Video tag </TITLE>
</HEAD>
<BODY>
<video controls>
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" >
</video>
</BODY>
</HTML>
OUTPUT:
Video tag
List OF attributes for video tag:
poster
Specifies an image to use while the video is unavailable (i.e. it hasn't loaded yet). This is typically an image of one of the first frames of the video. If supplied, the value must be a valid URL of an image.
preload
Specifies whether the video should be preloaded or not, and if so, how it should be preloaded. This attribute allows the author to provide a hint to the browser/user agent about what the author thinks will lead to the best user experience. This attribute may be ignored in some instances. For example, if the user has disabled preloading or if there are network connectivity issues.
Possible values:
*none
*metadata
*auto
Note that the autoplay attribute can overrride the preload attribute (since if the media plays, it naturally has to buffer first, regardless of the hint given by the preload attribute). Despite this, you can still provide both attributes.
autoplay
Specifies whether or not to start playing the video as soon as it can do so without stopping.
This attribute is a boolean attribute. Therefore, the mere presence of this attribute equates to a true value. You can also specify a value that is a case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either autoplay or autoplay="autoplay").
Possible values:
*[Empty string]
*autoplay
mediagroup For synchronizing playback of videos (or media elements). Allows you to specify media elements to link together. The value is a string of text, for example: mediagroup=movie. Videos/media elements with the same value are automatically linked by the user agent/browser.
An example of where the mediagroup attribute could be used is where you need to overlay a sign-languge interpreter track from one movie file over the top of another.
loop
Specifies whether to keep re-playing the video once it has finished.
This attribute is a boolean attribute. Therefore, the mere presence of this attribute equates to a true value. You can also specify a value that is a case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either loop or loop="loop").
Possible values:
*[Empty string]
loop
muted
Controls the default state of the video's audio output. If present, this attribute results in the audio output being muted (i.e. there is no sound) upon loading. This attribute will override the users' preferences. The user can then choose to turn on the sound if he/she so wishes. This helps users from being annoyed by loud sounds coming from the video as soon as the page/video starts loading. Users often close their browser when this happens. The 'mute' attribute aims to overcome this issue by having the video start off silently instead of loudly.
This attribute is a boolean attribute. Therefore, the mere presence of this attribute equates to a true value. You can also specify a value that is a case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either muted or muted="muted").
Possible values:
*[Empty string]
*muted
controls
Specifies whether or not to display video controls (such as a play/pause button etc).
This attribute is a boolean attribute. Therefore, the mere presence of this attribute equates to a true value. You can also specify a value that is a case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either controls or controls="controls").
Possible values:
[Empty string]
*controls
*width
Specifies the width, in pixels, to display the video.
Possible values:
[Non-negative integer] (for example, 300)
*height
Specifies the height, in pixels, to display the video.
Possible values:
List OF attributes for video tag:
poster
Specifies an image to use while the video is unavailable (i.e. it hasn't loaded yet). This is typically an image of one of the first frames of the video. If supplied, the value must be a valid URL of an image.
preload
Specifies whether the video should be preloaded or not, and if so, how it should be preloaded. This attribute allows the author to provide a hint to the browser/user agent about what the author thinks will lead to the best user experience. This attribute may be ignored in some instances. For example, if the user has disabled preloading or if there are network connectivity issues.
Possible values:
*none
*metadata
*auto
Note that the autoplay attribute can overrride the preload attribute (since if the media plays, it naturally has to buffer first, regardless of the hint given by the preload attribute). Despite this, you can still provide both attributes.
autoplay
Specifies whether or not to start playing the video as soon as it can do so without stopping.
This attribute is a boolean attribute. Therefore, the mere presence of this attribute equates to a true value. You can also specify a value that is a case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either autoplay or autoplay="autoplay").
Possible values:
*[Empty string]
*autoplay
mediagroup For synchronizing playback of videos (or media elements). Allows you to specify media elements to link together. The value is a string of text, for example: mediagroup=movie. Videos/media elements with the same value are automatically linked by the user agent/browser.
An example of where the mediagroup attribute could be used is where you need to overlay a sign-languge interpreter track from one movie file over the top of another.
loop
Specifies whether to keep re-playing the video once it has finished.
This attribute is a boolean attribute. Therefore, the mere presence of this attribute equates to a true value. You can also specify a value that is a case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either loop or loop="loop").
Possible values:
*[Empty string]
loop
muted
Controls the default state of the video's audio output. If present, this attribute results in the audio output being muted (i.e. there is no sound) upon loading. This attribute will override the users' preferences. The user can then choose to turn on the sound if he/she so wishes. This helps users from being annoyed by loud sounds coming from the video as soon as the page/video starts loading. Users often close their browser when this happens. The 'mute' attribute aims to overcome this issue by having the video start off silently instead of loudly.
This attribute is a boolean attribute. Therefore, the mere presence of this attribute equates to a true value. You can also specify a value that is a case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either muted or muted="muted").
Possible values:
*[Empty string]
*muted
controls
Specifies whether or not to display video controls (such as a play/pause button etc).
This attribute is a boolean attribute. Therefore, the mere presence of this attribute equates to a true value. You can also specify a value that is a case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either controls or controls="controls").
Possible values:
[Empty string]
*controls
*width
Specifies the width, in pixels, to display the video.
Possible values:
[Non-negative integer] (for example, 300)
*height
Specifies the height, in pixels, to display the video.
Possible values:
Posts
No comments:
Post a Comment