HTML5 audio and video provide native playback of both audio and video by the web browsers themselves.
History
Audio and video playback was previously handled through proprietary plug-ins, originally Quicktime, RealPlayer and Microsoft’s Media player, but then Sorenson, who created the CODEC (from COmpression/DECompression) Apple was using for Quicktime, created a similar CODEC for MicroMedia’s Flash, propelling this ubiquitous plugin to become the preferred software for delivering video streaming.
Apple did not like that (it sued Sorenson to try and stop this from happening), as Flash killed Apple’s Quicktime and all the others video players (Real Player and Microsoft Media Player).
Flash became the default delivery system for video on the web. Adobe purchased MicroMedia for 3.5 billion in 2005, and inherited Apple’s wrath. This point should not be lost in the current debate between Flash and HTML5 video, which has been forced by the iPhone not playing Flash.
That battle appears to have been won by Apple. Flash is no longer considered ubiquitous. HTML5 video has taken over from Flash and its use in ads is no longer what it once was. Flash has been implemented on Android, but its performance is spotty, introduces vulnerabilities and eats up precious resources at the time of this writing. Flash is not dead, and its still good at what it does on the desktop, but its future of this ubiquitous proprietary standard has suffered a major hit.
The Quick and Easy Way to Embed Video
You can upload your video to Google’s YouTube or Vimeo, and embed it in your page. The tools to do that are provided by these video sharing sites, and the process is painless enough. Include the code to embed into your web page and these services will take care of displaying your video in the right format.
You can even tell both YouTube and Vimeo to display the video using HTML5 on your own browser, and it will do so seamlessly, and as you can see, you can style it on the fly. The media is my son Taiyo and some footage of the 2nd Ave Subway (under construction).
These sites generate the code that you put in your page, and from Youtube, it looks like this:
<iframe width="560" height="349" src="http://www.youtube.com/embed/LpOOh0fU4fk" frameborder="0" allowfullscreen> </iframe>
Responsive Video
Standard HTML5 video is responsive by setting width to 100% and placing it in a responsive container. It will automatically fill the right size while keeping the ratio (height and width) the same.
video {
width: 100% !important;
height: auto !important;
}
This does not work for Vimeo or YouTube viddoes, which use the iframe to deliver the content.
Instead, you place absolutely the iframe containing the YouTube and Vimeo video in a parent locked to the video’s ratio using the following HTML and CSS:
<!-- HTML -->
<figure class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe id="youtube_style" width="560" height="349" src="http://www.youtube.com/embed/LpOOh0fU4fk" frameborder="0" allowfullscreen>
</figure>
/*CSS*/
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Embedding your own Video and Audio
There are times when you need to display video and audio from your own server, and not rely on some other service. You can do that yourself, and it is almost as easy as displaying an image. I say almost as easy, because the issue as to what browsers can display which audio or video format requires that we need to create several version of each to satisfy all of the browsers.
Audio
HTML example of an audio with only a mp3 source file and an explanation that is supposed to show up if the browser does not recognize the audio tag:
<audio controls src="http://b.parsons.edu/~dejongo/12-fall/stuff/KillingACountry.mp3" type="audio/mpeg"> The browser you're using does not recognize the HTML5 audio tag. You can download the song here: <a href="http://b.parsons.edu/~dejongo/12-fall/stuff/KillingACountry.mp3"> link</a>.</audio>
What actually happens in Firefox is that the HTML 5 property is recognized, but the proprietary CODEC is not recognized. This means that you do not get the option to download the music, but see this instead:
Proprietary CODEC Problems
The mp3 audio file format is proprietary. For that reason, not all browsers support mp3 audio files. Only Safari and IE9 play this audio format. Opera or Firefox users are not able to play the mp3 format. Implementing this would require them to pay royalties. They do support the royalty free ogg format, so we need to approach this another way.
The Solution
I need to create an ogg file from the mp3 file, and serve up both files, and the browser will pick whatever one they can play. Since I have an mp3 file, I need to create the ogg or ogv file. Translating the audio file from mp3 to the ogg format can be done using Miro Video Converter, or if you want more control, Handbrake. With Miro Video Converser, drag the file to the conversion window, select Theora from the drop down menu and convert. It will create a theora.ogv file that works just fine in Firefox and Opera.
Putting both sources in the HTML5 tag allows the browser to choose the one that they can play, and the following code works in Firefox.
<audio controls> You are not able to hear this sound because the browser you are using is not standards compliant. You can download the song from this <a href="http://b.parsons.edu/~dejongo/12-fall/stuff/KillingACountry.mp3">link</a>. <source src="http://b.parsons.edu/~dejongo/12-fall/stuff/KillingACountry.mp3" type="audio/mpeg"> <source src="http://b.parsons.edu/~dejongo/12-fall/stuff/KillingACountry.ogg" type="audio/ogg"> </audio>
CSS Code View
The Video CODEC Problem
Video has the same problems as audio. Some browsers manufacturers pay royalties and can play the H.264 CODEC while others rely on a royalty free CODEC. Just like with audio, Safari and Internet Explorer can display the proprietary formats while Firefox, Opera and Chrome support royalty free formats.
There is movement toward a single open source standard. Google purchased On2 Technologies, the creators of the VP8 video codex, and combined it with Vorbis, an open source audio format, and has been giving it away, meaning that they released the code to the open source community. Google’s WebM Project is still new, and not yet supported by all browsers, but the intention is that WebM replace the proprietary H.264 format that Apple and Microsoft Endorse.
Google has even gotten religious, and stopped supporting the .H264 CODEC in Chrome, claiming it’s only supporting open source software. It hopes to accelerate the adoption of its WebM format.
The industry is entrenched, however, and to become ubiquitous the CODEC has to be supported by all kinds of playback devices, like phones and computer chips, so do not expect major changes any time soon, even if the future belongs to open source.
Microsoft makes a pug-in for Chrome users to play the proprietary CODEC. So there you have it, the messy world of building a brave new future.
Translating Video from H264 to Theora Ogg
What this all means is that you have to translate your video into several different formats if you want to serve it yourself, just like audio, and include source links to each of them. The browser will then play whichever one it is most attracted to.
There are plenty of ways to get the .h64 CODEC, but to translate to ogg requires
I need to create an ogg file from the mp3 file, and serve up both files, and the browser will pick whatever one they can play. Since I have an mp3 file, I need to create the ogg file. Translating the audio file from mp3 to the ogg format can be done using Miro Video Converter, or if you want more control, Handbrake.
Here is example code for inserting video into the browser, using both ogg and H264 CODECs:
<video width=480 height=270 controls> <source src="http://b.parsons.edu/~dejongo/12-fall/stuff/10_example.ogg" type=video/ogg> <source src="http://b.parsons.edu/~dejongo/12-fall/stuff/10_example.mp4" type=video/mp4> Download the example video in <a href="http://b.parsons.edu/~dejongo/12-fall/stuff/10_example.ogg">oog</a>, or <a href="http://b.parsons.edu/~dejongo/12-fall/stuff/10_example.MP4">mp4</a> format. </video>
CSS Code View
Download this video and transcode it, then upload it and get it to play in Firefox.
This is, of course, only the beginning. An example of what’s coming is the use of javascript to make a much more customized player and the ability to initiate actions that control web content from the movie itself, as in popcorn as demonstrated in this canvas sketch demonstration. The possibilities of HTML5 and open source video are endless and belong to the future.