HTML5 Video (video)

Video is used by many sites. HTML5 provides a standard for displaying video.

Video on the web site

Until now, there is still no standard for displaying videos on web pages.

Today, most videos are displayed through plugins (such as Flash). However, not all browsers have the same plugin.

HTML5 specifies a standard way to include video through video elements.

Browser support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <video> element.

Note: The <video> element is not supported in Internet Explorer 8 or earlier versions of IE.

HTML5 (video) - how it works

To display a video in HTML5, all you need is:

Run and try it out

The <video> element provides play, pause, and volume controls to control the video.

The <video> element also provides the width and height properties to control the size of the video. If you set the height and width, the required video space is preserved when the page loads. . If these properties are not set, the browser does not know the size of the video, the browser can no longer retain a specific space when loading, the page will change according to the size of the original video.

The content inserted between the <video> and </video> tags is provided for browsers that do not support the video element.

The <video> element supports multiple <source> elements. The <source> element can link different video files. The browser will use the first identifiable format:

Video format and browser support

Currently, the <video> element supports three video formats: MP4, WebM, and Ogg:

MP4 = MPEG 4 file with H.264 video encoding and AAC audio encoding

WebM = WebM file with VP8 video encoding and Vorbis audio encoding

Ogg = Ogg file with Theora video encoding and Vorbis audio encoding 

   Browser   MP4   WebM   Ogg
Internet Explorer   YES   NO   NO
Chrome   YES   YES   YES
Firefox   YES   YES   YES
Safari   YES   NO   NO

Video format

    format    MIME-type
    MP4   Video/mp4
    WebM   Video/webm
    Ogg   Video/ogg

HTML5 <video> - Control using DOM

The HTML5 <video> and <audio> elements also have methods, properties, and events.

The methods, properties, and events of the <video> and <audio> elements can be controlled using JavaScript.

The methods are used for playback, pause, and loading. The properties (such as duration, volume, etc.) can be read or set. The DOM event can notify you, for example, that the <video> element starts playing, paused, stopped, and so on.

The simple method in the example shows us how to use the <video> element, read and set properties, and how to call methods.

Try running it

See the HTML5 Audio/Video DOM Reference Manual for more reference.

HTML5 Video tag

     label     description
   <video>Define a video
   <source>Define multiple media assets such as <video> and <audio>
   <track>Define text track in media player

Last Updated: 2018-07-06 12:32:44 By akshay


share_facebook share_twitter share_google_plus

Please Comment Here :