html videos

html5 language provide a new element to embed a video on a web page the element is <video> </video> you want show a video on your web page you must need a plug-ins software like flash player.different browser support different plug-ins.

how does the video element work:

   <html>    <head>   
 
                      <title>   the html5 video work</title> </head>  <body>
                      
             <video   controls="autoplay" src="video/preroll.mp4"
             
       width="200px"   height = "200px"  poster = "images/prerollimages.jpg" 
  
       id="video">
  
       </video>
  
      </body>
    
    </html>

in example : controls:– attribute causes the player to supply controls for controlling the video and audio playback.its a boolean type attribute.
the autoplay attribute causes the video to start playback upon page load.its a boolean attribute.
the src– location of the video.
thewidth– and height attribute indicate width and height of the video in the page.
poster– attribute value img show when the movie is not playing
loop– attribute automatically restart the vedio after is finishes playing.its a boolean attribute.


google chrome,mozilla firefox,opera,internet explorer 9,safari support <video>telement.

three different video formats in use across the major browser.

formatmime-type
oggvideo/ogg
webMvideo/webm
videovideo/mp4

video formats:-

mp4   container with H.264  video codec and   AAc   audio codec. H.264 is licensed by the mpeg-la group. webM   container with vp8 video codec   vorbis audio codec. webm was designed by google to work woth vp8 encoded videos.ogg container with theora video codec and vorbis audio codec


video formats support by browser.

browser:-mp4oggwebm
google chromeyesyesyes
operanoyesyes
firfoxnoyesyes
sfariyesnono
internet explorer (after9+)yesnono

we can set type information for all three type of video with source element.

                                 add the video with html5
                                 
    <html>
      
           <head>
           
              <body>
              
                <video poster="video/prerollposter.jpg"  controls width="230" height="360" >
                
 <source src="video/preroll.mp4" type='video/mp4; codecs=avc1.42e01e,mp4a.40.2" '>
 
 <source src="video/preroll.webm" type='video/webm;   codecs="vp8,vorbis"'>
 
 <source   src="video/preroll.ogv"   type='video/ogg';   codecs="theora,vorbis"'>
 
    your browser doesn't support the  video type formats.please check your browser version </body>
 
  </html>

html video attributes

attributevaluedescription
autoplayautoplaythe video will start automatically when page load
controlscontrlsthe all video controls displayed
heightpixelsheight of the video player
looploopthe video will start again when it finished
mutedmutedthe video sound mute
posterurl
preload
  1. auto
  2. metadata
  3. none
how the video loded when the page loads
srcurlurl of the video file
widthpixelthe width of the videos

html video global attributes

the <video> element support the global attributes

html video event attributes

the <video> element support the event attributes