Audio and Video

  1. Overview
    1. Introduced in HTML5
    2. Uses JavaScript to display 2D bitmapped graphics and animations in a rectangular region, something that traditionally has been done with Flash and Silverlight
    3. Currently supported by all modern browsers
  2. Playing audo
    1. HTML5 introduces the <audio> element
    2. Use controls attribute to render controls that user can use to play audio
      <audio controls>
        <source src="beep1.wav">
        <source src="beep1.ogg">
        <source src="beep1.mp3">
      Your browser does not support the audio element.
      </audio>
      
    3. Interfacing with JavaScript
      1. Use preload attribute to load sound immediately
        <audio id="mybeep">
          <source src="beep.wav" type="audio/wav" preload="auto">
        </audio>
        
      2. Play the sound
        var audio = document.getElementById('mybeep');
        audio.play();
        
      3. Start playing at 5 seconds
        audio.currentTime = 5;
        audio.play();
        
      4. Pause the sound
        audio.pause();
        
  3. Video
    1. <video> element - supply different formats since some browsers may not support all formats
      <video controls="controls">
        <source src="funny.ogg">
        <source src="funny.mp4">
      </video>
      

      Humorous Phases of Funny Faces (1906)