HTML 5 Videos and Graphics
These two tags are the main elements for media. The video tag lets you embed video hosted by your own web servers or external APIs such as YouTube. The audio tag lets you embed sound and music that users can play, pause, fast-forward, rewind or stop. Both of these tags are quickly becoming a popular standard for media websites. This article reviews both tags and gives you some fallback options in case you choose that video and audio tags aren't for you.
Evolution of Web Video
In earlier versions of HTML, there were no standards for video. Video and audio were considered bandwidth hogs, and most people couldn't afford the increased bandwidth and Internet speeds needed to play media through a browser.
Some developers created streaming standards, which compressed video and streamed chunks of data across the Internet. Streaming was clunky and still required large amounts of storage space for providers, so content delivery networks were created to transmit data from a user's location instead of over miles of Internet broadband paths. One of the first streaming platforms was RealNetworks, and it was integrated into many video software packages.
Later, streaming was changed again when Netflix offered streaming content to its viewers. Instead of paying for cable, viewers could stream many of their favorite shows over the Internet. Netflix was one of the first popular movie and television show streaming applications that used faster delivery with content delivery networks.
For the average website owner, they did not have the option of expensive CDNs and large storage for customized videos. They were stuck using applications such as YouTube, which became the hub for video content without format requirements. Website owners first used third-party software such as Apple QuickTime or Adobe Macromedia. Macromedia was later transformed into Adobe Flash. These applications let website owners embed videos that they created themselves and deliver them to users. The pitfall of this type of streaming was that website owners and readers were forced to install the applications.
With HTML5, users are no longer required to install software, website owners don't need to buy expensive video editing software, and a standard format is used across all browsers. You can still embed your favorite YouTube video, but you can also embed videos from other providers or hosted on other platforms. You can implement much of the functionality as other platforms, but you don't need to introduce cumbersome third-party tools and software that isn't already a part of a user's browser.
HTML5 Audio and Video
Now that we explained the evolution of video, let's discuss the way audio and video can be integrated into your web design and HTML5 code.
Let's first take a look at the video tag. You'll probably use the video tag more often than the audio tag. You can even have videos that just have audio and no visual effects. The following is an example of an HTML5 page with a video embedded into its content. We'll take the code from Chapter 9 and apply it here.
<!DOCTYPE html>
<html>
<head>
<title>Your web page title</title>
<style>
body {
background-color: #000000;
}
div.divclass {
background: url(lightning.gif);
background-size: 100px 100px;
background-repeat: no-repeat;
}
img.imgclass {
border-style: solid;
border-width: medium;
position: fixed;
top: 30px;
}
</style>
</head>
<body>
<div class="divclass">
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Unsupported browser detected.
</video>
</div>
<a href="myotherpage.html" target="_blank">See my other page.</a>
<img class="imgclass" src="myimage.png" alt="My product image">
</body>
</html>
We've decided to replace the div text we've had in previous chapters and apply the video tag instead. As with all tags, the video tag starts with an opening <video> element and has a closing </video> element. There are several properties added to our code.
The first properties are the width and height attributes. These attributes are self explanatory. They set the dimensions for your video. The "autoplay" property is a boolean value. By default, video does not play automatically. When you specify the "autoplay" property, the video plays as soon as the web page loads in the viewer's browser. Be careful when loading sound automatically in a user's browser. Some believe autoplaying videos as intrusive. You should give your users the option to play video instead of using autoplay. The user could be at work or in a place where video isn't wanted.
The next part of our video code is the movie source. Notice that there are two sources and two formats specified. Each browser recognizes different formats. For instance, Safari might use a different video format than Firefox. This is why there are two files specified in the video tag. The browser will choose the first recognizable format. For instance, if the browser does not recognize how to parse and play the MP4 format in our code, the browser will then skip to the Ogg format and play that version instead. Of course, if the browser does not recognize any of the source files, your viewers won't be able to watch the video. When you create videos, you should integrate a widely used format to avoid any browser compatibility issues. The three media types used in the video tag are MP4, Ogg and WebM.
Finally, the text you see within the video tag is displayed only if the user's browser does not support the video tag. Most standard, current browsers support the video tag, so this won't be a common issue. However, many people still use older browsers and these browsers don't support HTML5 or video tags. Some people like to create customized browsers. If these browsers don't support HTML5, the "Unsupported browser detected" will show in the browser window instead of the video.
The audio tag works similarly to the video tag. The difference is that audio only plays sound with no visual content. Let's take a look at an example. We'll replace the video tags from the previous code with audio tags.
<!DOCTYPE html>
<html>
<head>
<title>Your web page title</title>
<style>
body {
background-color: #000000;
}
div.divclass {
background: url(lightning.gif);
background-size: 100px 100px;
background-repeat: no-repeat;
}
img.imgclass {
border-style: solid;
border-width: medium;
position: fixed;
&nbs
