Media Controls in HTML5

To make our lives easier HTML5 introduced better media support via. <audio> and <video> elements.

You can embed videos in your page using following codes

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
  Your browser does not support the <code>video</code> element.
</video>

You can embed several video sources, browser will choose the most suitable one. Below are some attribute you can use with video.

• autoplay - boolean attribute ; If specified it will automatically begin to play before loading fully.
• controls - If present, Gecko will offer controls
• src - URL of the video to embed. This is optional. You can instead use <source> element within video block to specify video to embed
• height and width is also available

HTML5 Player with Controls

 Like videos you can also add audio to your web page. 

<audio src="/test/audio.ogg">
<p>Your browser does not support the audio element.</p>
</audio>

The src attribute can be a URL or a path to the audio file on local system. 

• controls - Display standard HTML5 controls 
• autoplay - Make the audio play automatically
• loop - Make audio repeat (loop) automatically
• preload - for buffering large files
• "none" does not buffer the file
• "auto" buffer the file
• "metadata" buffer only the metadata for the file

In both video and audio multiple sources can be specified using <source> element to provide different formats

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.
</video>

You can also specify the codecs the media file requires. 

<video controls>
  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
  Your browser does not support the <code>video</code> element.
</video>

 
You can also control the media element from after getting it using a selector.

var v = document.getElementsByTagName("video")[0];
v.play();

source