...

Web Technologies - HTML5

Back to Course

Lesson Description


Lession - #587 HTML5 Audio Vedio


HTML5 features include native audio and video support while not the need for Flash. The HTML5 and tags build it simple to add media to a website. you would like to line src attribute to identify the media supply and embrace a controls attribute so the user will play and pause the media.

Embedding Video
Here is that the simplest kind of embedding a video go in your webpage −

Your browser doesn't support the element.

The current HTML5 draft specification doesn't specify that video formats browsers should support within the video tag. however most commonly used video formats are are

  • Ogg − Ogg files with Thedora video codec and Vorbis audio codec.
  • mpeg4 − MPEG4 files with H.264 video codec and AAC audio codec.

    You can use tag to specify media along with media type and many different attributes.

    Embedding Audio
    HTML5 supports <audio> tag which is used to embed sound content in an HTML or XHTML document as follows.

    
    <audio src = "foo.wav" controls autoplay>
    Your browser does not support the <audio> element.
    </audio>
    
    


    Example vedio
    
    <html> 
       <head> 
          <meta charset = "UTF-8"> 
          <title> HTML5 Example< /title> 
    	  
       </head> 
    	
       </body> 
              <video  width = "300" height = "200" controls autoplay> 
             <source src = "/html5/foo.ogg" type ="video/ogg" /> 
             <source src = "/html5/foo.mp4" type = "video/mp4" /> 
             Your browser does not support the <video> element.
          </video> 
            
       </body> 
    </html> 
    
    


    Example Audio
    
    <html> 
       <head> 
          <meta charset = "UTF-8"> 
          <title> HTML5 Example< /title> 
    	  
       </head> 
    	
       </body> 
              <audio controls autoplay> 
             <source src = "/html5/audio.ogg" type = "audio/ogg" /> 
             <source src = "/html5/audio.wav" type = "audio/wav" /> 
             Your browser does not support the < audio>  element.
          </audio>  
            
       </body> 
    </html> 
    
    


    Try it here