English 中文(简体)
HTML5 Tutorial

HTML5 Demo

HTML5 Tools

HTML5 Useful References

HTML5 Tag Reference

HTML5 Resources

Selected Reading

HTML5 - Audio & Video
  • 时间：2024-12-22

HTML5 - Audio & Video

Previous Page Next Page  

HTML5 features include native audio and video support without the need for Flash.

The HTML5 <audio> and <video> tags make it simple to add media to a website. You need to set src attribute to identify the media source and include a controls attribute so the user can play and pause the media.

Embedding Video

Here is the simplest form of embedding a video file in your webpage −

<video src = "foo.mp4"  width = "300" height = "200" controls>
   Your browser does not support the <video> element.   
</video>

The current HTML5 draft specification does not specify which video formats browsers should support in the video tag. But most commonly used video formats 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 <source> tag to specify media along with media type and many other attributes. A video element allows multiple source elements and browser will use the first recognized format −

<!DOCTYPE HTML>

<html>
   <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>

This will produce the following result −