Video in HTML5

How to play a video in web page using HTML5?

In previous post, we learnt about playing audio in HTML5. In this post, we shall learn about <video> that has also been introduced new in HTML5.

To create a html5 media player in web page, we can use <video> tag.

<video src="video/VideoIntro.mp4" height="300" width="400" controls>
   Video is not supported, appears only when the video tag is not supported in the browser
</video>

HTML5 video tag attributes

Following are different attributes

autoplay – boolean - allows automatically play the video when page loads
autobuffer - boolean - if true, video will start buffering even if autoplay is set to false.
buffered - TimeRange - used to get the time range of the buffered media
controls – display video controls like play, pause, volume etc.
height – height of the video display area
loop – loop the playing of video when it finished playing
muted - boolean - if true, the audio of the video will be muted
played - TimeRange - used to get the time range of the played media
preload - can have following values

none - the video should not be preloaded
metadata - only the meta data (the length of the video) should be fetched from the server
auto - (is by default) decided by the browser, in this case the whole video file can be downloaded by the browser

poster – allow image to display in place of video while video loads
src - the url of the video to play
width – width of the video play area

In case we want to display a feedback text on the page when video is not supported, we can write the message in between <video> tag.

HTML5 video tag events

Events for <video> tags are same as explained in HTML5 multimedia section here.

Output of HTML5 Video with Controls

HTML5 video autoplay

To auto play html5 video, we can use autoplay attribute in <video> tag. Here is the example

<video src="/DemoSupportingFiles/Multimedia/VideoIntro.mp4" height="300" width="400"
     controls autoplay>
   Video tag is not supported
</video>

HTML5 video without control

To make a html5 video player without controls, we can remove the controls attribute.

<video src="/DemoSupportingFiles/Multimedia/VideoIntro.mp4" height="300" width="400" 
   autoplay>
   Video tag is not supported
</video>

HTML5 video streaming

Most modern browser of desktop and even on mobile supports HTML5 video streaming out of the box provided your media files are also hosted on compatiable server. The most important point to remember here is to specify multiple media source files to support different browsers.

HTML5 video with mutliple media source files

By using the <source> tag we can specify more than one source file to use by the html5 video tag. In this case, whichever file is supported by the browser, the browser starts using it to play the video.

   <video height="300" width="400" autoplay>
        <source src="myvideo.ogg" type="video/ogg">
        <source src="myvideo.mp4" type="video/mp4">
        <p>Video tag is not supported</p>
    </video>

To know the html5 video format support, click here.

HTML5 video fallback

In many cases, we might have scenario where <video> tag is not supported by browser. In this case we can use the fallback flash player option or any other player option.

<video height="300" width="400" autoplay>
        <source src="myvideo.ogg" type="video/ogg">
        <source src="myvideo.mp4" type="video/mp4">
        
        <object data="myplayer.swf" type="application/x-shockwave-flash">
              <param value="myplayer.swf" name="movie"/>
        </object>
    </video>

Notice the above code snippets, where we have specified the source and after than we have also used the <object> tag to use flash media to play. Flash media will only play when the <video> tag is not supported in the end user's browser.

Views: 6926 | Post Order: 105