Adding Fast-Forward and Rewind Buttons with HTML5

Yes, it’s back to adding buttons I’m afraid. But you’re a dab hand at adding them by now, so I won’t need to tell you what to do until you get to the JavaScript stage.

Let’s define the buttons and throw in the function names for the onclick events because you now know what’s what:

<button id=”rewind” title=”reverse” onclick=”changePlaybackSp
eed(‘-’);” >&laquo;</button>
<button id=”ffwd” title=”fast forward” onclick=”changePlaybackSp
eed(‘+’);” >&raquo;</button>

You’ll use the HTML entities &laquo; and &raquo; to mimic the typical symbols you find on such buttons: « and » respectively.

Notice that the name of the function you’ll define is changePlaybackSpeed(). The attribute that you’ll change to make this work is the playbackRate attribute that you encountered in Table 5.1.

There is a caveat though: Currently, only the WebKit-based browsers, Safari and Chrome, support the playbackRate attribute. Therefore, the only way you can sort of mimic the intended functionality on other browsers is to alter the video’s currentTime attribute, moving it either forward or backwards:

function changePlaybackSpeed(direction) {
     if (video.playbackRate != undefined) {
          if (direction == “-”) video.playbackRate -= 1;
          else video.playbackRate += 1;
     }
     else {
          if (direction == “-”) video.currentTime -= 1;
          else video.currentTime += 1;
     }
}

If video.playbackRate is defined, you check the direction parameter passed in—again “-” for back and “+” for forward—and decrease or increase playbackRate accordingly. If the playbackRate is 0, the video is effectively paused and playback stops. Otherwise, you move the video’s currentTime backwards or forward by 1.

TIP: Although Safari and Chrome support the playbackRate attribute, they work in different ways. Both support the incrementing of the parameter to fast forward, but Chrome doesn’t support rewinding. Safari on the other hand actually starts to play the video backwards, right to the start.

Your simple but slightly more awesome than it was at the start of the chapter media player now has a full set of rather grey but functional buttons and a working progress bar (Figure 5.7).

With a bit of jiggery pokery with CSS, you can style the player to your taste and achieve what you see in Figure 5.8 or perhaps something better.

Just when you thought you were finished with this simple media player, you’ll make one final addition to increase its awesomeness—progress bar seek functionality.

NOTE: The code for this styled player and for the unstyled player is available on the website at www.html5multimedia.com.

Creating articles and sections with HTML5

If you write for a living, as I do, you learn to organize content into chunks, and sub-chunks, concepts and sub-concepts, ideas and more detailed ideas, and so on. The basic rule for organizing content in this way is that if you create a sub-section, you have to create two sub-sections. Otherwise, there is no point in creating a sub-section.

In line with our recurring theme of the unity between content and design in HTML5 layout, content in HTML5 pages (where it has to be broken down) is broken down into articles. Moreover, where there is a need for distinct sub-sections within an article, those sub-sections are sections.

As you create a CSS file to match your HTML layout elements, you might well assign specific formatting to articles, and to sections. For example, you might choose to indent section content, or place a unique background behind it. In the following example, article content is set off with a unique background and text color, and within articles, sections are indented.

The code for the <article> and <section> elements in the preceding illustration, including placeholder text and headings is:

<article>
   <h3>First article</h3>
   <p>First article content ....</p>
   <p>more content....</p>
   <section>
        <h3>1st section heading</h3>
        <p>1st section content</p>
   </section>
   <section>
        <h3>2nd section heading</h3>
        <p>2nd section content</p>
   </section>
</article>

Or… you might not apply specific CSS rules to articles and sections, and simply wrap content in the <article> and <section> elements for content organizing purposes, while relying on the <body> tag, the <p> (paragraph) tag, or custom class styles that you define in Dreamweaver for formatting article and section content.

Playing an audio file with different sources.

Let’s say you wanted to provide audio in both Ogg Vorbis and MP3 formats to support

Firefox, Chrome, Opera, Safari, and IE9. You can do this by using the source

element in conjunction with the audio element. The code would look like this:

<audio controls>
<source src=”sayHello.ogg” type=”audio/ogg”>
<source src=”sayHello.mp3” type=”audio/mp3”>
</audio>

It couldn’t be easier!
Naturally, you can add a WAV file format too (should you want to):

<audio controls>
<source src=”sayHello.ogg” type=”audio/ogg”>
<source src=”sayHello.mp3” type=”audio/mp3”>
<source src=”sayHello.wav” type=”audio/wav”>
</audio>

You can incorporate any of the attributes mentioned earlier here as well. So
making whichever source the browser chooses to play automatically would simply
require this code:

<audio controls autoplay>
<source src=”sayHello.ogg” type=”audio/ogg”>
<source src=”sayHello.mp3” type=”audio/mp3”>
<source src=”sayHello.wav” type=”audio/wav”>
</audio>

To support browsers that don’t support the HTML5 audio element, you’d follow
the same tactic, but the fallback is different.

WHAT IS HTML5?

HTML5 is the latest and greatest version of the core language of the World Wide
Web and is one of the most exciting developments to happen to the web and the web
community in a long time. HTML (HyperText Markup Language) is the language that
has been at the heart of all web documents since its conception in the early 1990s.

HTML5’s predecessor is HTML 4.01, and one of the major differences between
HTML 4.01 and HTML5 is the addition of many JavaScript APIs (Application Programming
Interfaces) to the specification. Of course, one of these specifications is
directly relevant to the subject of this book—the API that allows interactions with
multimedia elements within the browser. As well as these new APIs, HTML5 also
alters the meaning of some existing HTML elements, removes others, and more
important, adds new ones—some of which allow you to provide more semantic
meaning to your content.

It’s worthwhile noting that most of these new elements don’t actually add any
new functionality that you’ve not seen before.

But before you dive into the workings of HTML5, let’s first look at where HTML5
came from and how it evolved.

Dreamweaver's HTML5 Pack and design elements

Now that we have introduced the key design elements of HTML5, we are almost ready to generate pages that use those elements in Dreamweaver. Before we do, however, it will be helpful to preview briefly, conceptually, how Dreamweaver generates HTML5 layouts.

The first thing to emphasize is that HTML5 elements such as <header>, <footer>, <article>, <section>, <aside>, and <nav>, do not really do much if anything "on their own." Like their DIV tag evolutionary precursors, they are more or less empty vessels. HTML5 elements take shape, literally, when connected with CSS styles.

For example, a web page might have a <header> defined as stretching the entire width of the page, at the top of the page, with a set background color, and spacing that keeps it from bumping into other page elements. All of these attributes (size, location, background color, and spacing) are defined in a CSS style sheet that includes a specific CSS style associated with the <header> element. Moreover, this symbiotic relationship between HTML5 layout elements and CSS styles is required for each HTML5 layout element.

Therefore, when Dreamweaver generates page layouts using HTML5 elements, it also generates a CSS file that has already built-in style rules for all the HTML5 elements used in the page.

Of course, you can change how HTML5 elements appear. You can edit the generic content that Dreamweaver provides with the HTML5 layouts. Alternatively, you can change the appearance of the HTML5 elements by editing the CSS styles. We will do both of these things in the next chapter of this book. Here and now, we will focus on setting up Dreamweaver so that it can generate HTML5 pages and then we will actually create those pages.

With the basic understanding of HTML5 layout elements and the way they interact with CSS under our belts, the time has come to launch into Dreamweaver and begin to create HTML5 layouts.