Html5 multimedia develop and design pdf download

Any number of source elements can be contained within an audio or video element declaration, and it is through this element that you can specify multiple media sources. The source element can contain the attributes listed in Table 2. As with the src attribute of the audio and video elements, this must contain a valid URL to the source in question. The value must be a valid MIME type, which tells the browser what format the source is in. This value must be a valid media query. You'll learn more about media queries and their uses in Chapter 4.

This element is mainly used to provide increased accessibility to a multimedia resource, because it allows captions, descriptions, transcripts, and subtitles to be provided.

These can then be displayed in the browser in conjunction with the media being played. In most cases, the information provided through the track element is more suited to a video media source. Like the other elements described earlier, the track element can take a number of attributes Table 2.

The track element can therefore be used to specify complete transcriptions of media resources, which, for example, can be useful in making the source available to those with auditory impairments. The contents will be displayed as an overlay on the video. The contents are overlayed on the video and are labeled as useful for those with auditory impairments. If this attribute is omitted, the default value is subtitles. Both formats are discussed in Chapter 8. Must be unique across track elements of the same kind attribute for the same resource.

For native multimedia to work in Safari and Internet Explorer 9, Apple has decided that you must have its QuickTime plugin installed, and Microsoft requires you to install its Media Player on your system.

These requirements somewhat detract from the idea of native multimedia. The track element was included because it provides you with a powerful method to make your media content accessible by allowing you to specify enhancements, such as subtitles and captions.

Whether you wanted to share sound snippets, voice recordings, or your own music with users on the Internet, the ability to do so was always available. But now you can share audio without having to rely on third-party plugins being installed. Chapter 2 introduced you to the HTML5 elements and attributes that allow you to add audio to your web document. This chapter explains, with the aid of examples, how you can use these elements and attributes. The objective of the codec is usually to maintain the high quality of the audio signal using the smallest number of bits possible to reduce the size of the file in question and hence the bandwidth required for transfer.

Org Foundation www. Because it is free of charge, it tends to be quite attractive as a format to use. According to the Vorbis website www. This of course is ideal for delivery across the web because it reduces bandwidth costs. The Ogg Vorbis format has proved quite popular among the gaming community with companies like Epic Games, Crystal Dynamics, and EA Games using it to deliver game music.

It has now extended much further than that. MIME types are used to identify the type of information that a particular file contains. Developed by the Moving Picture Expert Group www. It is for this reason that its use as a format for delivering audio over the internet has declined. It was designed to be the successor to the MP3 format and for this reason usually has a better sound quality than MP3. However, this utopia of a universally supported audio format changed when both Apple and Nokia objected to this requirement.

Table 3. TABLE 3. Most likely, it will be in one of the formats mentioned earlier, but it might not be. You could of course decide to support only one audio type. You might know, for example, that all your users will use Firefox, and therefore you only have to support Ogg Vorbis. How do you do this? Well, many encoders will do the job for you, and most of them are free.

It runs on both Windows and Mac. Many other encoders are of course available, but I prefer these two because one is a desktop application and one is online. However, you must face a particular issue if you want to support browsers that do not have HTML5 multimedia-playing capabilities.

Although only two have been mentioned here, you may find different encoders that you prefer. You use a method that the Internet Explorer versions do understand, which means Flash, QuickTime, or some other third-party plugin. This is achieved by using the audio and source elements. A complete example of how to use the audio and source elements to do this, along with how to provide Flash fallback is provided in the next section, as well as other examples on how to use the audio element.

All the elements and attributes that are used in the code in this section were introduced to you in Chapter 2. Just ensure that you can justify your decision should you decide to use autoplay or loop.

All the preceding examples use just one audio source. You can do this by using the source element in conjunction with the audio element. The code for using a downloaded player this particular player is the Google Flash Player already mentioned, which I have simply downloaded and the object element might look like this: TIP: You can download the excellent JW Player, a Flash player from Longtail Video, at www.

And the examples will all work in Internet Explorer 8 using a Flash player, as shown in Figure 3. Of course, users must have the Flash player installed on their system. Instead, a broken player might be displayed, or as in the case of Firefox, a rather ugly black box Figure 3.

Whatever you decide to do, there are enough fallback mechanisms available to help you support most browsers. In addition, legacy browsers, such as Internet Explorer 8 and earlier, can also be supported via third-party plugins such as Flash as they were before. Gradually, legacy browsers will fade out of use, and the requirement to support them will cease to exist. But you can still guarantee their users access to your audio.

The examples in this chapter cover a wide range of real-life scenarios that you may encounter when adding audio to your web documents. However, they are by no means exhaustive. Native audio is a major step forward in web technology and is matched at least by, and perhaps even surpassed by, video, which is the focus of the next chapter. Yet until recently the only way was by using thirdparty plugins such as Flash and QuickTime.

HTML5 provides that missing standard method for embedding videos in web documents. A container is a wrapper format whose specification describes how the different data elements within the container exist and interact together within a computer file. Like its audio counterpart, Theora Ogg is free and open, and has no licensing or royalty issues. As with audio, Ogg is the name of the container format, and in this case Theora refers to the video-compression format that it uses.

It was developed to deliver DVD-quality video and audio in a small package. Some are suitable for use with HTML5 video, whereas others are not. The aim of the project is to produce a high-quality, royalty-free, open video format.

The video content is compressed with the VP8 codec, which was developed by On2 Technologies the company was acquired by Google in February The codec tends to be used within the WebM container. Org Foundation claimed. So the requirement was removed. Table 4. TABLE 4. Internet Explorer 9 will support WebM as long as a third-party plugin that can play it is installed.

Android phones also support MP4 and WebM from version 2. It really is all you need and runs on both Windows and Mac. It runs on Windows, Mac, and Linux. Although you can choose from many other encoders, these are three solid encoders that you can use to get started. This is due to the encoding process placing the file index—with all the metadata on file length and so on—at the end of the file rather than the beginning.

QTIndexSwapper simply moves the index to the beginning of the file. All of the examples in this section and more can be found on the accompanying website at www.

The browser may, for example, ignore your suggestion due to a user setting in the browser. If you want to hardcode the width and height of the video rather than letting the browser automatically decide for you, you can do so via the width and height attributes: p You can also remove the controls entirely by omitting the controls attribute: Note that the user can restore the default controls in most browsers by rightclicking on the video and selecting the controls from the displayed drop-down menu Figure 4.

TIP: If you also specify autoplay, the preload setting will be overridden because the video must be downloaded for it to play! The reason is that the whole idea of serving up different sources is because they use different formats, and each source element needs to specify the format the source is in via its own type attribute.

The type attribute can also contain the actual codec that the video file is encoded in. For example: Including the codec in the type attribute can be beneficial because it helps the browser decide if it can play the file or not. In the preceding example, note how the entire string is enclosed within single quotes, the type and codecs attributes are separated by a semicolon, and the codecs values are contained within a double quote.

You can get an idea of how the poster attribute works in Figure 4. How do you show video in legacy browsers? This of course means reverting to an old third-party plugin that these browsers understand, such as Flash. Figure 4.

If you decide to support Flash and allow non-HTML5 browsers to play your video via Flash, you can of course do so using either the embed or object elements. You can then play the video using a downloaded Flash player which you have uploaded to your server and the object element. It will then recognise the object element, and provided Flash is installed, will play the video through the Flash player.

This allows you to specify yet another fallback should you need to. Of course, you still need to rely on the fact that users have the Flash player installed on their computers, but this may not always be the case. Whatever you decide on, HTML5 multimedia should enable you to get the job done. You also need to make your content available to users of modern mobiles, tablets, and other alternative browsing devices with video-playing capabilities.

Is this even possible? It is if you use a combination of media types and media queries, and the media attribute in the source element. Media types were introduced in CSS2 www. You may have come across some of the media types listed in Table 4. But it is the handheld type that has caused particular issues as technology has moved on. Vendors then chose to ignore it and default to the screen media type instead. This is where media queries come in. You can check for a number of device features, the list of which appears in Table 4.

Both WebM and MP4 formats are provided. NOTE: Firefox completely ignores media queries, so changing the browser window size will have no effect. Unfortunately, none of the previous examples discussed will work with Android. For this reason, it deserves its own small section to prevent you from tearing your hair out.

For some reason, this confuses Android and it ignores the source. It does however recognise and understand the poster attribute, so if you specify an image with that attribute, it will display that image correctly. The code for specifying a video for Android follows, along with the JavaScript required to play the video on Android when the user presses the video icon. Be sure to check out what he has to say at www. And by the time you read this, it may have already been updated.

You are probably also aware that there are still a number of details you need to consider before doing so. If so, which ones? These are just some of the questions you may need to ask before forging ahead. And these controls vary from one browser to the next. This chapter describes the attributes, methods, and events of the JavaScript API and then shows you how to put together your own control set and connect it to make it functional.

JavaScript is a commonly used client-side scripting language that you can use to provide extra functionality to a website. It will give you a good introduction to the JavaScript language, which will aid you with your understanding of the contents of this chapter.

Each attribute along with its description is listed in Table 5. For those attributes that raise an event when their value is changed, the event name is given for easy reference. TABLE 5. This is a read-only attribute and may only be available if the video has been preloaded.

When this value becomes available for reading, the durationchange event is raised. When this value is changed, the volumechanged event is raised. When this value changes to true, a pause event is raised.

When this value changes to false, a play event is raised. A negative value plays the resource backwards faster; a positive value plays it forward faster.

A value of 0 stops playback. When this value changes, a ratechange event is raised. See defaultPlaybackRate later in this table and playbackRate earlier. When this value is set, the emptied event is raised. The abort and error events can also be raised when this value is set. When this value is set, the suspend event is raised. The abort and error events can also be raised.

When this value is set, the following events are raised: loadstart, progress, and stalled. This returns a TimeRange object.

When this value is set, the loadedmetadata event is raised. When this value is set, the loadeddata event is raised. Playing the resource now, however, might mean that playback may attempt to overtake the amount of the resource retrieved. When this value is set, the canplay event is raised.

When this value is set, the canplaythrough event is raised. For example, the user may have dragged the default controls forward to play at a later point in the resource. When this value changes, the timeupdate event is raised. When this value equals the end of the media resource, the ended event is raised. Valid values range from Normal play rate is 0.

The number of ranges actually in the object. The timestamp of the start time of the range for the given index. The timestamp of the end time of the range for the given index. Altering this value will not affect the value of videoWidth.

Altering this value will not affect the value of videoHeight. These are just two brief examples of how you can use the attributes. Tables 5. Also, you might have noticed that changing some of these attributes raises events that you can catch, allowing you to act on them. This is the role of events. A number of events in the Media JavaScript API can be raised based on value changes, method calls, and browser actions.

Listening to certain events and responding to them can be key when rolling out your own control set for audio and video resources.

A full list of the events that can be raised is provided in Table 5. It does, however, expect the required data to become available shortly. When it is raised, it updates the time div with the current video played time. Although nearly all the attributes, events, and methods apply to both audio and video, a video example helps to visualise them better. Simply reacting to the timeupdate event can facilitate that task, because you can easily read the currentTime attribute and work out the percentage of the video played.

But before you start looking at code and how you actually use the API, you need to know about methods. You just need to know that it exists, can be called, what it does, and the expected outcome. If you wanted to play the video when a certain button is clicked which you will of course when implementing your own media controls! TIP: You may have noticed that there is no stop method. Well, stopping the playback is pretty much the same as pausing it.

Well, as interesting and useful as they may be, so am I. This method causes the loadstart event to be raised. You'll read more about text tracks in Chapter 8. On some occasions there might be better or quicker ways to write the JavaScript functions.

When you click Play, it becomes a Pause button. Therefore, the attribute is no problem. Your video player now looks like the one in Figure 5. As it is now, the video player changes the Play button to Pause when you click it and vice versa Figure 5. But what if users managed to play or pause the video without using your controls?

How can they do that, you ask? Well, some browsers e. This where events come in. So all your code needs to do is listen for them and act accordingly. So to listen for the pause and play events, you need to add this: video. Do so like this: video. This same logic applies for all the default controls that you will see on the browser, because your code will need to listen for all of them as well and act accordingly.

Next, you need to control volume and mute. However, not all browsers currently support this element; Opera, Chrome, and Safari are the only ones that do. Hence, buttons are used in the example. Otherwise, you decrease the volume by 0.

Almost the opposite occurs for an increase in volume; 1 is the highest value. If you did want to react to changes in volume, you could add a listener for the volumechange event, which is raised when either the volume or mute values are changed. Your player now has three more working buttons Figure 5. Enough with the buttons for the moment. For that you need a progress bar. With this code, you now have a crude progress bar Figure 5.

Of course, to make the progress bar work, you need to listen for an event that tells you when currentTime has changed so you can call the updateProgress function and actually update the progress bar—in this case, the timeupdate event: video.

Your slightly better-than-average video player now has a working progress bar Figure 5. To make this simple video player even more useful, why not add fast-forward and rewind buttons?

There is a caveat though: Currently, only the WebKit-based browsers, Safari and Chrome, support the playbackRate attribute. If video. 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.

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

NOTE: The code for this styled player and for the unstyled player is available on the website at www. You just need to add one event listener and two functions. You can read more about the code behind it at www. You calculate this variable by taking the full duration of the video and dividing it by the width of the progress bar.

The resulting calculation roughly equates to the pixel position per video unit of time, which you then multiply by value. All the results are obtained to two decimal places. So how can you make it compatible with such browsers? Then perform a check to see if the browser supports HTML5 video. If so, you can carry on with all that fancy JavaScript that adds the controls, events, and functions. You learned how to use them to build a simple HTML5 video player with custom controls that also reacts to changes in the video playback from other sources via events.

You could take it further and add a playlist that loads videos in the player based on user selection from a list.

But that feature is outside the scope of your simple media player. The next chapter shows how you can use CSS to style the actual media elements. This, of course, means that the audio and video elements can be styled via CSS. Now you can don your CSS hat and use your skills to make these elements look the way you want them to. CSS basically separates the document content from the document style, which includes colours, background images, fonts, and positioning.

A complete and thorough study of CSS, its syntax, and its properties is outside the scope of this book. If you are new to CSS, check out the many books and online resources available to you to familiarise yourself with the concept.

The video element has a thick white border of 20 pixels and is placed pixels from the top of the page. This improves the overall look of the video. In Detail How do I create fast and responsive mobile websites that work across a range of platforms? For developers dealing with the proliferation of mobile devices each with unique screen sizes and performance limitations, it is an important question.

This cookbook provides the answer. You will learn how to apply the latest HTML5 mobile web features effectively across a ran One of the most exciting and talked about aspects of the HTML5 specification is the introduction of in-browser multimedia. Websites no longer have to rely on a third-party tool such as Flash or Silverlight to play video and audio. This book is an easy, approachable guide to building native HTML5 multimedia into a website, from the simplest addition to more advanced features.

It's written in a simple, straightforward style that's not too techy, yet advanced enough for the more experienced coder who just needs to get up to speed on these powerful new capabilities.

The book's companion website provides all the examples in a working format for easy access and enhanced visualization for the reader. Download Free PDF. Jetse Helleman. Wynne Hays. Sania Harzt. Theresa Ware. A short summary of this paper. For these, book is must liberated to accessed and learned. You could prefer to learn it on line or download and read it through your own device offline.

So, book by Felke-Morris, Terry Paperback is now available right here in a number of format information including rar, word, zip, ppt, pdf, txt, and kindle. Do not overlook it, and be clever pupil in your course. After searching without success and almost giving up, apparently only found this blog and it worked!

Yes, I will read it today. I almost bought it and it cost me fortune with other manuals. It ends that here I can even download a few other manuals. Wow amazing. Just create an account! And that saves money. But after searching on google for a moment I this. With the publication I files uploaded to examine.