HTML5 for web designers. Part 3: Multimedia

HTML5 for web designers

1. A Brief History of Markup Language
2. HTML5 Model
3. Multimedia
4. Form 2.0
5. Semantics
6. HTML5 and current conditions

In the history of the world wide network, every next round of transition to a new level of development began with a technological innovation. When the img element was added to HTML , this radically changed the face of the network. Then introducing JavaScript made it more dynamic and interactive. Ajax appeared a little later, which opened up opportunities for creating full-fledged applications on the network.

Modern web standards are so advanced that now you can create almost anything using only the capabilities of HTML, CSS and JavaScript. Almost anything.

There are still gaps in the specifications of these standards. So, if you want to pile a page with text and pictures, you will completely manage HTML and CSS. But if you need to publish audio or video, then you will inevitably have to turn to third-party technologies - Flash or Silverlight.

These technologies are “plugins”, such “plugs” that fill “holes” in the network. They make it relatively easy to publish games, movies and music online, but they are not open and are owned and controlled by private companies. Yes, the same Flash is a powerful tool, but its application is to some extent similar to a deal with evil forces: we get new opportunities that are not available in another way, but in return we lose some of our independence.

HTML5 is intended to fill this shortcoming. At the moment, he is in direct competition with proprietary technologies such as Flash and Silverlight, and his main advantage in this fight is that he doesn’t need plugins, as his multimedia capabilities are embedded into browsers.

Canvas

When the opportunity appeared in the Mosaic browser to insert pictures on pages, this gave the network a powerful push forward. But until now, the pictures remain static. Yes, you can make animated gifs, update styles of pictures on the fly using JS, generate them on the server side. But in any case - as soon as the picture is open in the browser, its contents cannot be changed.

And here comes the canvas element , designed to create dynamically resizable images.

It is very simple in itself. All you specify in the tag parameters is the canvas dimensions:

As you can see, this tag is paired. But what you put inside it is intended only for browsers that do not support this element:

No canvas support? Have an old-fashioned image instead:

Users of browsers without
canvas support will see a picture of a cute puppy.

All the rendering work is in JavaScript. First things first, you must specify which element we are working with and in what context. “Context” in this case is an API, and today it is only one - two-dimensional (as you can see, there is room to grow):

var canvas = document.getElementById('my-first-canvas');
var context = canvas.getContext('2d');

Now we can start drawing on this two-dimensional canvas element of the canvas , using APIb documented in the HTML5 specification . The set of tools here is similar to what you will find in any graphics editor like Illustrator: lines, fills, gradients, shadows, shapes, Bezier curves. The only difference is that instead of drawing with the mouse, you need to use the commands in JavaScript.

Code drawing

So the color of the lines turns red:

context.strokeStyle = '#990000';

Now everything you draw will have a red stroke. For example, the syntax for creating a rectangle looks like this:

strokeRect ( left, top, width, height )

If you want to make this rectangle 50 pixels high, 100 wide, and position it 20 pixels from the left edge of the canvas element and 30 from the top, write the following:

context.strokeRect(20,30,100,50);

The rectangle drawn by the JS commands in the canvas .

Of course, this is an elementary example. The two-dimensional API includes many different methods: fillStyle, fillRect, lineWidth, shadowColor and many more.

Theoretically, any image that can be created in the same Illustrator can be created in exactly the same way using the canvas element . In practice, however, this can be quite time-consuming and will yield a huge amount of code. On the other hand, this is not exactly what canvas was invented for.

And why then? What is the use of it?

It is great that using JavaScript and canvas , you can create vector images on the fly, but if they are made any more complex, this work will not justify itself.

The meaning and main feature of canvas is that its contents can be dynamically updated by rendering new elements in response to user actions. This ability to respond to events initiated by a page visitor makes it possible to create tools and games that previously would require the use of third-party technologies, such as Flash.

One of the first examples of canvas features was the Bespin project. from Mozilla Labs - an application that is a simple text editor for coding that works in a browser window.

Bespin web application created using the canvas element .

This is a very powerful thing. She is impressive. But also, she is a good example of what should not be done with the canvas .

Access is denied

A text editor, in essence, is designed to work with text. Bespin successfully works with text inside the canvas element , with one caveat - this is no longer text. This is just a set of vector shapes similar to it.

Each page on the network can be described using the DOM - Document Object Model, "Document Object Model." The DOM can include many different “nodes”, the most important of which are elements, attributes, and text objects. These three types of “bricks” are enough to build almost any page you can imagine. In turn, the canvas element does not have a DOM - its contents cannot be divided into separate parts and presented as a tree of nodes.

Screen readers and other technologies for similar tasks are based on the ability of DOM analysis to understand the structure and meaning of a document. No DOM - no access.

This "isolation" of canvas is a big problem for HTML5. Fortunately, some smart people are working on her decisions . Since this point is pretty serious, I don’t want to rush the process, but at the same time I don’t want it to slow down the development of the rest of the specification.

Smart canvas

Based on the foregoing, we can assume that at the moment there is no sense for web designers to apply canvas in their projects. This is not true.

When I use JavaScript on my site, it has the sole role of further improvement. Those visitors with whom it is disabled will not be denied access to information, except perhaps for certain secondary amenities. Such a multi-level approach called “Unobtrusive JavaScript” can also be applied to canvas . Instead of creating new content, it will be used to better present what is already available.

Let's say you have a table with some kind of data. You want to illustrate the tendency observed in them with the help of a graph. In case the data is static - you can simply generate a graph-picture using the Google Chart API, for example. But if the data can be changed along the way, then it would be great to create a graph that is rendered each time a new one taking into account the changes. Canvas is perfect here - you can use JavaScript to extract the contents of the table element and create a mathematically calculated illustration on its basis.

Smart guys from the Filament Group even developed a jQuery plugin for that , by the way.

Examples of graphs generated using canvas

There is another option. In fact, the canvas element is not the only API for generating dynamic images. SVG - Scalable Vector Graphics, Scalable Vector Graphics - An XML format that can be used to describe the same shapes as canvas . And based on the essence of XML as such, SVG content is theoretically “understood” for screen readers.

But in practice, SVG did not make an exceptional impression on developers, unlike canvas , which, although it appeared recently, is already widely supported by available browsers. Its capabilities are even implemented in IE, using an additional JavaScript library .

Given the WHATWG slogans about “bridging trodden paths” and “not reinventing the wheel”, it may seem strange that they chose to include canvas in HTML5 when similar SVG technology already exists. As this often happens, the HTML5 specification actually only documents a lot of what is already supported by browsers. Canvas was not invented for HTML5 - it first appeared in Safari and was created by Apple. When developers of other browsers saw this idea, they liked it and was copied.

It may seem a little unsystematic and disorganized, but the fact is that many of our standards are born. Take the XMLHttpRequest object underlying Ajax, which was first implemented at the end of the last century in Microsoft Internet Explorer 5.

In the world of browsers where the fittest survives, canvas is currently gaining strength and popularity. As soon as it becomes more “open” for access from outside, its positions will be firmly fixed.

Audio

My first site was the page of a musical group in which I participated, and I wanted its visitors to be able to listen to our songs directly from there. The decision to realize this opportunity led me to research the available formats and players. QuickTime, Windows Media Player, Real Audio - I spent too much time considering how popular and cross-platform each of them is.

In those transitional years, MP3 ultimately emerged as the winner for the title of the most common music format. But in order to enable visitors to simply listen to the sound file from the page, the use of third-party technologies is still required. Here the winner is clearly Flash.

And now HTML5 plans to strip him of this title.

Inserting an audio file into a page in HTML5 looks simple:

But it is too simple. You will probably need a bit more features.

Suppose there is such an evil bastard in the world who hates the worldwide network and all its users. Such a person does not care that it is very rude and just silly to insert an audio file on the page that starts playing automatically. The autoplay parameter will appeal to him.

If I see that you are using autoplay for such purposes, do not expect me to be merciful at the meeting.

Note that this parameter does not matter; in the sense - is used by itself. Pieces of this kind are called Boolean parameters , in honor of the greatest mathematician George Boole. All computer systems are based on the binary logic developed by him, where the basic values ​​of the variables are always either zero or one, true or false.

However, Boolean parameters should not be confused with Boolean values . It is excusable to think that a Boolean parameter must be true or false , but it is not. The very essence of its existence is already Boolean, that is, binary - it either exists (true ), or it does not exist at all ( false ). Even if you add a value to such an attribute, it will have no effect: autoplay = "false" or autoplay = "no thanks" is the same as just autoplay .

If you use exclusively XHTML syntax, then for you - autoplay = "autoplay" . Approved by the International Department of the Department of Redundancy.

When the auto-playback of the audio file does not seem mean enough, you can also add another Boolean parameter - loop , which will loop the sound and make the torture endless.

The combination of these options will further reduce your chances of staying alive when you meet me.

Everything's under control

But let's move on to how to use the audio element for good. It’s logical to add the ability to control playback, and this can easily be done using the boolean parameter controls .

It will enable the display of standard browser controls for the play-pause button and volume control.

controls displays the native browser-based playback control interface

If you do not like the style of controls defined by the browser, you can customize them to your liking. Using JavaScript, you can access the Audio API, which provides access to the play and pause methods and the volume property . Here is a rough example of such customization using button elements and unseemly event handlers inside tags:

    Play
    
    Pause
    
    Volume Up
    
    Volume Down
    

Custom controls made using button elements .

Buffering

For a while, the HTML5 specification included another boolean parameter - autobuffer . This one was much more polite and more useful than the vile autoplay - it told the browser that, although the audio file should not immediately start playing, it should be reloaded in the background, as sooner or later it will start anyway.

This would be a very useful option, but unfortunately Safari went further. This browser began to preload the audio file, ignoring autobuffer . And since - you remember - autobuffer is a Boolean parameter, you can’t use it to prohibit preloading: autobuffer = "false" is the same as autobuffer = "true" , like any value (bug description ).

So now autobuffer has been replaced with the preload parameter . It is not Boolean; it takes one of the following three values: none , auto, and metadata . Using preload = "none" , we explicitly tell the browser that this file does not need to be reloaded.

If you have only one audio element per page , preload = "auto" is justified and logical. But you should not do this if there are several of them, so as not to offend visitors with not the fastest and / or unlimited Internet.

I will sing “curb”, you will sing “curb”

It seems like the audio element is perfect in everything. There is clearly a catch somewhere. Unfortunately, this is so, but not with the specification of the element as such, but with audio formats.

Although MP3 is currently the most common, this format is not open. For the opportunity to work with him, it is required to pay a certain amount to patent holders. For large corporations like Apple or Adobe, this is clearly not a problem, unlike smaller companies and open source groups. That's why MP3 works great in Safari, but it doesn't play in Firefox.

There are, of course, other formats. For example, the Vorbis codec - which usually outputs .ogg files - is not burdened with any patents. This one works in Firefox, but in turn is not supported by Safari.

Fortunately, there is no need to make a cruel choice in favor of only one specific format. Instead of the src parameter in the tag , you can use several source elements enclosed in it for different files:

An Ogg Vorbis-enabled browser will pick up the first file and go no further. A browser that can play MP3s but does not understand Ogg will skip the first file and load the second.

You can help them in their choice by specifying a mime-type for each file:

The source element is a single, non-container element, so if you use the XHTML syntax, you need to close the tag with a slash:.

For not so gifted

The ability to specify multiple sources is great, but there are browsers that don't support the audio element at all. Well, you understand who I mean.

Internet Explorer and the like require that they feed audio files from a spoon through the good old Flash. The model of the audio element supports this: everything that is enclosed inside the tag and is not a source element will be served to browsers that do not support audio - as an object element in this case:

You can even go further. The object element itself also allows the insertion of alternative content - for those who have a completely bad browser experience, you can make a standard link:

Thus, the priorities are in the following order:

1. Ogg Vorbis audio through the audio element
2. MP3 audio via audio element
3. Sound via Flash
4. Link to download the file directly

Content Availability

The audio element model is very convenient for specifying alternative methods for representing its contents. But if, for example, you want to provide a text version of a song for those who cannot listen to it, do not do the following:

In this case, the contents

will be displayed only if the visitor’s browser does not support the audio element . It will not be useful for a deaf user with a modern browser. In addition, the lyrics can be useful to everyone else - why then hide it?

I am a lineman for the county...

Video

If the built-in audio support is impressive, then the prospects for playing videos in this way are wildly excited. With the widespread availability of broadband connections, video has become very popular on the Internet. In the data moment, Flash is mainly used for displaying it - HTML5 plans to change it.

The video element works in a similar way to audio : the same parameters autoplay , loop , preload ; the same system with the src attribute or several nested source elements ; in the same way, you can add a standard control interface using controls , or make your own.

The main difference between audio and video is that the latter usually takes up a bit more space on the page, so you probably want to specify the exact dimensions:

What else interesting can be done is to add a thumbnail in the form of a picture using the poster parameter :

A preview is displayed before the video starts playing.

Not the most pleasant news is that the struggle between formats in the video environment is even tougher than among the audio. The main players: MP4 (encumbered with a patent) and Theora Video (free and clean). But you already know how such problems are solved:

All that remains for us is to wait until the browser developers converge on one standard, so that everything starts working as intended by the developers of the specification - without unnecessary cloning of files in different formats.

Fashionable, stylish, native

The ability to embed video with standard markup language tools can be the most exciting innovation since creating the img element . Even major players like Google are not shy about being enthusiastic about this. Here, for example, is what he intended for the new YouTube: www.youtube.com/html5

The main problem in using plugins for working with multimedia has always been their isolation from the rest of the document. Now, when all these elements are part of a common system, they are easily accessible for scripts and styles.

The video element encounters CSS3. Try to do this with the plugin.

Support for audio and video as part of HTML5 has gained our approval and enthusiasm. But we know that the worldwide network is not so much a presentation environment, it is also interactive. And the oldest, but always powerful, tool for achieving interactivity on web pages has always been forms. In the next chapter, we will look at what new possibilities HTML5 offers them.