Using Media in HTML 5

Today we are going to discuss how to use various types of media within HTML 5.

Let’s first discuss the different types of media that you can use in HTML 5:

Audio

  1. Ogg Vorbis or Ogg: It’s a Lossy audio compression format distributed for free of royalty or licensing fees. It is commonly associated with .ogg file extension
  2. MP3 It’s one of the most widely used audio formats. It stands for MPEG-2 Layer 3. Simply put it’s the Motion Picture Experts Group use of digital audio for acceptable trade-offs between audio fidelity and file size.
  3. Waveform audio File Format or WAVE commonly seen as .WAV. This supports both compressed and uncompressed audio formats.

Video

  1. Ogg Theora This is just like Ogg for Audio. It’s royalty free and licensing fees.
  2. H.264 or commonly known as MPEG-4. It’s a proprietary codec standard developed jointly by ITU-T Video coding experts and the ISO/IEC JTCI Motion Picture Experts Group. This codec supports HD video and is commonly used with: Youtube, Vimeo, iTunes Store.
  3. VP8/9 is a free audio-video format designed for use with HTML5

Let’s look at the code you will be using to setup video or audio playback in your HTML5 document:

  • <audio> it plays back the audio file here are some controls to be aware of:
  • autoplay: tells the browser to auto play the file
  • controls: tells the browser to display controls such as play, pause, and stop
  • loop: tells the browser to go back to the beginning at the end of the file.
  • preload: tells the browser to preload the object and how to do so here are some controls for that:
  • none: doesn’t load any part of the file
  • metadata: gives some metadata for the file
  • auto: loads the whole file at page load
  • NOTE: preload is ignored if autoplay is present.

Let’s see how this code would look like inside our page:

<audio controls preload="none" loop>
  <source src="sound.ogg" type="audio/ogg">
  <source src="sound.wav" type="audio/x-wav">
  <source src="sound.mp3" type="audio/mpeg">
  <p> Browser does not support HTML5 audio; alternate playback provided.</p>
</audio>


Let’s see how it looks in our browser:

html42

html41

Now let’s look at some video controls:

  • <video> is the video tag used to insert video into HTML5
  • autoplay: tells browser to auto play video
  • controls: gives the browser controls for the video
  • height: tells the height of the video
  • loop: tells the browser to loop at the end of the file.
  • mediagroup: used for synchronizing playback of multiple videos or media elements.
  • muted: sets audio output state for playback
  • poster: specifies an image to display while the video file isn’t available
  • preload: tells the browser whether or not it should preload the video when the file loads.
  • width: sets the width of the video.

Let’s take a look at how video is handled:

<video controls poster="poster.png"
src="http://upload.wikimedia.org/wikipedia/commons/5/5c/Cat.ogg"
width="640" height="480">
  <source scr="cat.webm" type="video/webm">
  <source src="cat.mp4" type="video/mp4">
<p>Browser does not support HTML5 video; alternate playback provided.</p>
</video>


Let’s take a look and see how this in in our code and how it displays in our browser:

html43

And in our browser:

html44

Well that concludes our lesson for today!

If you have any questions please feel free to ask below!

Looking for quality phpBB Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , , , | Posted under Programming/Coding | RSS 2.0

Author Spotlight

Keith Pottratz

Keith Pottratz

Hello My Name is Keith Pottratz. I have been working with computers for over a decade. It's my personal hobby something that I love and enjoy doing. I went to school for Computer Science, and have spent many years self teaching my self various things. I have ton's of experience in HTML,CSS, PHPBB,CPanel,CMS software, blogging software and various other systems and enviroments. My favorite thing to do though is backend developing. I find it to be a growing and ever evolving beast and I love learning about it. I look forward to giving as much knowledge as I can and help.

Leave a Reply

Your email address will not be published. Required fields are marked *


8 + 2 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>