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:
- 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
- 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.
- Waveform audio File Format or WAVE commonly seen as .WAV. This supports both compressed and uncompressed audio formats.
- Ogg Theora This is just like Ogg for Audio. It’s royalty free and licensing fees.
- 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.
- 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:
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:
And in our browser:
Well that concludes our lesson for today!
If you have any questions please feel free to ask below!