To render the media One key challenge has often been dependence on a third-party object integrated with the browser. Two new elements
<video src="samplevideo.mp4" autoplay> </video>
Attributes available on the
||This attribute specifies the video to play. It can be a local resource within your own website or something exposed through a public URL on the Internet||you can also use child
||To control the amount of space the video will occupy on the page||Absence of this causes the video to display in its native size.|
||Tells the browser to continuously play the video after it completes||If omitted, the video stops after it plays through completely.|
||This specifies an image to show in the place allocated to the video until the user starts to play the video. Use this when you’re not using autoplay. It’s very useful for providing a professional image or artwork to represent the video.||If not added, the poster appears in the first frame of the video.|
||Specifies if and how the author thinks the video should be loaded when the page loads|
||Specifies that the audio output of the video should be muted|
||This enumerated attribute indicates whether to use CORS to fetch the related image.|
||A Boolean attribute indicating that the video is to be played “inline”, that is within the element’s playback area.||Note that the absence of this attribute does not imply that the video will always be played in fullscreen.|
<video> element supports multiple <source> elements; so developer can include one for each video type. To show the information for the user’s browser that doesn’t support this video.
<video controls height="400" width="600" poster="picture.jpg"> <source src="samplevideo.ogv" type="video/ogg"/> <source src="samplevideo.mp4" type="audio/mp4"/> <object> <p>Video is not supported by this browser.</p> </object> </video>
This sample above removed the src attribute from the
<video> element and added child <source> elements instead. A browser goes through the <source> elements from top to bottom and plays the first one that it supports.
Notice that the example also has an <object> element to cover the possibility that the client browser has no support for the
<video> element at all.
If the browser supports the HTML5 video element, it doesn’t show the fallback. In this case, make sure that the valid <source> element has been specified for that browser. If not, then the video container shows an error in place of the control bar, saying that “An invalid link or file is specified”.
<video> element offers many methods. Methods and properties on the video object are
play() Plays the video from its current position.
pause() Pauses the video at its current position.
volume Allows the user to control the volume of the video.
currentTime Represents the current position of the video. Increase or decrease this value to move forward or backward in the video.
addTextTrack() Adds a new text track to the audio/video
canPlayType() Checks if the browser can play the specified audio/video type. Returns “probably”, “maybe” or empty “”