Lecture
Although web browsers have had built-in support for images from the very early days, embedding audio or video on a web page has always required additional plug-ins (separate software components that add extra capabilities to the browser but are not part of it — for example, Flash, QuickTime, RealPlayer, and others).
A plug-in also means that the application that plays the audio and video content is not part of the browser. The plug-in is sandboxed with its own program, isolated from the browser and from the rest of the page's content. In addition, plug-ins are optional, so there is no guarantee that a site's visitors have the software needed to view the content.
The HTML5 standard introduces the new <audio> and <video> elements, which let web developers embed sound and video on a web page without needing their own plug-ins. Of course, this means the browser itself must be able to play such files, and at the moment only the latest browser versions support these elements.
Media codecs and formats
Digital audio and video data is processed through a codec, a formula that converts and compresses sound or video into a bitstream for transmission over the Internet (the term "codec" is a shortened combination of the two words "coder" and "decoder"). When the data reaches the end user, they must have the same codec to decode the encoded signal and convert it back into sound or video.
Some media codecs are patented, meaning they belong to a single company and are not open standards, and, as a rule, patent holders typically charge licensing fees for using their algorithms. Browser developers such as Apple, Google, and Microsoft have significant capital and are willing to license patented codecs for their browsers. Other browser makers, such as Mozilla and Opera, instead choose open codec standards and do not use patented ones. Even though the latest versions of all browsers support embedded HTML5 media files, they still have not agreed on which codecs are best to use.
Once media data is encoded, it must be encapsulated and packaged for delivery in one of several formats. These formats are containers for media files that are transferred between the server and the client. To play embedded media files, the browser must first read the container format and then decode the encoded data inside it. Just as browsers support different codecs, they also support various container formats for embedded media files.
Embedded media files must be delivered with the appropriate content type for each format, so that both the client and the server can recognize how to handle these files. A web server handles media types automatically, at least for the most common formats. Some newer formats may require additional server configuration, usually involving adding a new content type to the configuration file.
Any Flash file with the *.swf extension can be inserted into a blog.
For example, we found a game called "bubble popper": http://link-to-file
Let's insert it into our blog. To do this, the link must be "direct" (end with the typical Flash file extension *.swf)
We simply copy the file's address and put it into the code instead of "link-to-file":
<object type=application/x-shockwave-flash data=http://link-to-file width=450 height=300><param name=movie value=link-to-file></object>
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 3.0+ | 10.50+ | 3.1+ | 3.5+ | 2.0+ | 2.0+ |
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Adds, plays, and controls the settings of a video clip on a web page. The path to the file is specified via the src attribute or a nested <source> tag. The list of audio and video codecs supported by browsers is limited and is given in Table 1.
| Browser | Internet Explorer | Chrome | Opera | Safari | Firefox |
| Audio codecs | |||||
|---|---|---|---|---|---|
| ogg/vorbis | |||||
| wav | |||||
| mp3 | |||||
| AAC | |||||
| Video codecs | |||||
| ogg/theora | |||||
| H.264 | |||||
| WebM |
For universal playback across the listed browsers, video is encoded with different codecs and the files are added at the same time (see the example).
<video>
<source src="URL">
</video>Required.
Example
HTML5IE 9CrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>video</title> </head> <body> <video width="400" height="300" controls="controls" poster="video/duel.jpg"> <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'> Your browser does not support the video tag. <a href="video/duel.mp4">Download the video</a>. </video> </body> </html>
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Adds, plays, and controls the settings of an audio recording on a web page. The path to the file is specified via the src attribute or a nested <source> tag. Inside the <audio> container you can write text that will be displayed in browsers that do not support this tag.
The list of codecs supported by browsers is limited and is given in Table 1.
| Codec | Internet Explorer | Chrome | Opera | Safari | Firefox |
| ogg/vorbis | |||||
| wav | |||||
| mp3 | |||||
| AAC |
For universal playback across the listed browsers, audio is encoded with different codecs and the files are added at the same time via the <source> tag.
<audio src="URL"></audio>
<audio>
<source src="URL">
</audio>Required.
Example
HTML5IE 8IE 9+CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>audio</title>
</head>
<body>
<p>Aleksandr Klimenkov - Fourteen</p>
<audio controls>
<source src="audio/music.ogg" type="audio/ogg; codecs=vorbis">
<source src="audio/music.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
<a href="audio/music.mp3">Download the music</a>.
</audio>
</body>
</html>
Comments