site_logo

HTML5 Examples For Beginners : Inserting Audio And Video

b. Inserting Audio

  • Internet Explorer require .mp3 format
  • Chrome can understand .mp3, .wav and .ogg formats
  • Firefox can understand .wav and .ogg formats
  • Safari can understand .mp3 and .wav formats.

For audio to work in all browsers you need to include all three formats. And if audio controls are not supported by browser you can use fall back mechanism by including flash file too.

Below is an example which include .mp3 and .ogg format.

<!DOCTYPE html>
<html>
<head>
   <title>HTML5 Audio Control Example</title>
 </head>
<body>
   <h1> HTML5 Audio Control</h1>
   <audio controls autoplay="autoplay">
     <source src="Sleep.ogg" type="audio/ogg">
     <source src="Sleep.mp3" type="audio/mpeg">
     Your browser does not support the audio element.
   </audio>
</body>
</html>

Working example can be viewed here

c. Inserting Video

  • Internet Explorer support .mp4 format
  • Chrome can understand .mp4, .WebM and .ogg formats
  • Firefox can understand .WebM and .ogg formats
  • Safari can understand .mp4 format.

There are methods for playing, pausing, and loading, for example and there are properties (like duration and volume). There are also DOM events that can notify you when the <video> element begins to play, is paused, is ended, etc.

Below is an example which include .mp4, .webm and .ogv formats.

<!DOCTYPE html>
<html>
  <head>
   <title>HTML5 Video Control Example</title>
   </head>
  <body>
   <h1> HTML5 Video Control</h1>
   <video width="320" height="240" controls autoplay="autoplay">
     <source src="Sample.mp4" type="video/mp4">
     <source src="Sample.webm" type="video/webm">
     <source src="Sample.ogv" type="video/ogg">
     </video>
   </body>
</html>

Working example can be viewed here




simulationexams.com ad

certexams.com ad