Tuesday, July 19, 2011

Playing video using html5

                    Prior to HTML 5 it was difficult to write code for playing video. Developer used to write code based on browser types and OS. In HTML 5 new tag has been introduced to support videos. Its very straight forward to use not much of coding involved in using it.


<video id="myVideo" poster="start.jpg" autoplay="autoplay" width="100px" height="150px"
    audio="muted" loop="loop" controls="controls" src="video.mp4" preload="auto">
</video>

Attribute                                   Description
autoplay=autoplay                     If present, then the video will start playing as soon as it is ready
poster=url                                 URL of image which should be shown when video is not playing.
preload=auto/metadata/none     Video should be loaded when the page loads. This value is ignored if                                                       autoplay is true. auto: loads complete video,
                                                  metadata: only metadata of video gets loaded, none: nothing will be loaded.
src=url                                      Location of video file. Additional Source tag also can be used to specfiy the                                                   video source file.
                                                         <source src="video.mp4" type="video/mp4"/>
width=pixels                             Specifies the width of video player window.
height=<NUM>pixels               Specifies the height of video player window.
controls=controls                      Displays the different controls, like play button, previous, next controls.
audio=muted                             If muted value given means video will start in mute mode.
loop=loop                                Video will start over again, every time it is finished

<source src="video.mp4" type="video/mp4" />

src=url                                      Location of video file.
type:MIME Type                      Specify the MIME type of the video file. e.g. video/mp4 etc
  
<video id="myVideo" poster="start.jpg" autoplay="autoplay" width="100px" height="150px"
    audio="muted" loop="loop" controls="controls" preload="auto">
<source src="video.mp4" type="video/mp4" />   
</video>

Limitations:
1. Can only be played in Latest Browsers which supports html 5.

Browser Support:

Internet Explorer Firefox Opera Google Chrome Safari

No comments:

Post a Comment

Components of Big Data - Hadoop System

In this blog i will explain important components which are part of Hadoop System. I will give very brief overview of these components. Be...