loading...

HTML5 – HTML5 Multimedia: Utilizing New Media Assets

Before getting into the remaining child tags of the parent <body> tag, let’s cover a few tags that allow you to implement new media content elements in your HTML5 designs. These elements are becoming more prolific in HTML5 documents and applications. This is happening due to the advent of different devices types, such as iTV Sets, smartwatches, smartphones, tablets, and e-book readers, just to name a few. And yes, there are HTML5 operating systems that drive popular products in each of these genres, challenging Android’s market domination across consumer electronics devices. If you are interested in producing new media content in HTML5, check out Appendix D of this book, as well as my new media content production fundamentals book series at
www.apress.com
.

In this chapter, I go over the key tags to implement new media elements, such as digital images using the <img> tag, digital video using the <video> tag, digital illustration using the <svg> tag, and digital audio using the <audio> tag. We also cover advanced areas of new media that utilize APIs or a combination of new media features. This allows developers to achieve almost anything in HTML5 that a more advanced OOP programming language, such as C++ or Java, is able to. In fact, Java or JavaFX work inside HTML5, so the future is bright for HTML5 in multimedia!

HTML5 New Media Support: Nine Genres

This chapter covers the new media capabilities of HTML5. It discusses all of the new media genres and shows how developers can create content within these genres using tags, which are covered first, and then JavaScript and APIs. Table 8-1 lists the new media genres supported in HTML5, along with the file formats, and in some cases, the API

that they utilize.

Table 8-1. Nine HTML5 New Media Genres and Data Format Support

New Media Asset

Supported Data Formats

Digital Imagery

JPEG, GIF, PNG8, PNG24, PNG32, WebP, BMP, PDF

Digital Audio

MP3, OGG Vorbis, WAVE, AIFF, MPEG-4, OPUS, FLAC

Digital Video

MPEG-4 AVC H.264, MPEG-H EVC H.265, WebM VP8/VP9

Digital Illustration

SVG (Scalable Vector Graphic)(also used via CSS)

Interactive 3D

WebGL or WebGL2 (<canvas> covered in Chapter 17)

Digital Painting

SVG, JPEG, GIF, PNG (8/24/32), WebP, WebM, MPEG

Visual FX (VFX)

Above Formats combined together using JavaScript

Speech Recognition

Recognizes Speech; Converts to Text (Web Speech)

Speech Synthesis

Synthesizes Speech, Using Text (Web Speech API)

The first section of Table 8-1 features new media assets that enjoy “native” or direct tag support

in HTML5, including the <img>, <audio>, <video>, <svg>, and <canvas> tags.

The second section of Table 8-1 contains new media genres that require JavaScript

and advanced APIs to create a more advanced new media asset, such as a digital painting, or a visual effects (VFX)

pipeline, or an interactive user experience. If you’re interested in new media for HTML5 I have a New Media Fundamentals series of books with Apress at
Apress.com
, just search for this Author’s name.

The third section of Table 8-1 contains a speech synthesis and speech recognition entries, because there is now the Web Speech API

for two of the popular browsers—Google Chrome and Apple Safari. It won’t be long before other HTML5 platforms adopt the Web Speech API, especially as iTVs and smartphones with HTML5 operating systems are increasing in number. This means that the Web Speech API should exist in all popular browsers before 2017 rolls around.

Let’s look at each of these new media areas in their own sections in the chapter, now that I have outlined the relevant file (data) formats that are supported. Next, let’s look at the core tags and their parameters and related APIs, which allow HTML5 developers to implement multimedia applications

that rival those created for Android, Windows, Linux, and iOS. This is an exciting chapter for HTML5 developers who wish to create never-before-seen (or heard) user experiences!

Digital Imagery: Using the <img> Tag

The most widely used new media element with HTML5 is the digital image, which uses the <img> tag. It was introduced in HTML 1.2 and standardized in HTML 2.0

. Parameters include src, the digital image asset file reference parameter, as well as the
width and height parameters

and useful SEO parameters. Table 8-2 shows parameter support in HTML5.

Table 8-2.
Parameters Supported

By <img> Tag

IMG Tag Parameter

IMG Tag Parameter Purpose

src

A digital image asset source file name reference

alt

Alternate text description of image used for SEO

crossorigin

Cross-origin access control for third-party site

height

Height (in pixels) to display the image

width

Width (in pixels) to display the image

longdesc

URL for a detailed description of image

usemap

Specify image as a client-side image map

ismap

Specify image as a server-side image map

align

Specify the alignment of image to other elements

border

Specify the border width around image

hspace

Specify the whitespace width left/right of image

vspace

Specify the whitespace width top/bottom of image

The <img> tag

has a dozen parameters, eight of which are supported in HTML5

, and four of which have been deprecated due to the use of CSS to provide these functions. The 12 parameters are seen in Table 8-2; common usage parameters are in the first section and the less commonly used parameters are in the second section. The third section contains parameters supported in previous HTML versions, which you use CSS

to implement in HTML5. You can use these parameters in legacy HTML4 or prior HTML versions such as HTML3.2, HTML 2.0, and XHTML 1.0 and 1.1.

If you want to master digital image compositing terms, principles, workflows, and fundamentals, check out Digital Image Compositing Fundamentals (Apress, 2015).

The following is an example of a
digital image asset

using the <img> tag with the src parameter:

<img src="imagename.jpg" />

To optimize a digital image asset for SEO purposes, you use the
alt parameter

, as shown in the following example HTML5 markup:

<img src="imagename.jpg" alt="Image Description Using Keywords for SEO" />

To scale a digital image asset, you use with the
width and height parameters

, as shown in following example:

<img src="imgname.jpg" width="400" height="300"/> <!-- Scale Down Image -->

Make sure to scale your image by a power of 2. Thus, your source image for the preceding markup should be 800 × 600, or 1600 × 1200 in physical pixel resolution. Always scale down not up!

To allow a digital image asset to be legally accessed from a third-party website, use the
crossorigin parameter

(as covered in Chapter 4), as shown in the following HTML5 markup:

<img src="imagename.jpg" crossorigin="use-credentials" />

To further optimize a digital image asset for SEO, using the
longdesc parameter

, you should utilize this following HTML5 markup, which provides the URL reference to a keyword-optimized description that you create using HTML5:

<img src="imgname.jpg" longdesc="http://www.serverlocation.com/desc.html"/>

To define a
client-side digital image map asset

with the USEMAP parameter, you would utilize the following HTML5 markup:

<img src="imagename.jpg" usemap="#mapname" width="640" height="480" />
     <map >
          <area shape="rect" coords="10,10,640,240" href="URL" alt="SEO" />
          <area shape="circle" coords="320,360,120" href="URL" alt="SEO" />
     </map>

This provides the id reference to your <map> element definition, which contains <area> element definitions that define areas within your client-side image map.

To specify a digital image asset using
server-side image mapping

, use an
ismap parameter

, as shown in the following HTML5 markup:

<img src="imagename.jpg" alt="Image Description: SEO Keywords" ismap />

Next, let’s look at digital audio assets and the HTML5 <audio> tag.

Digital Audio: Using the <audio> Tag

Your next most

widely used new media element in HTML5 is digital audio, which uses the <audio> tag. This is new to HTML5 and it is not in previous versions of HTML. Parameters include the src, which references a digital audio asset file name, and controls, which adds the audio transport user interface feature. Table 8-3 shows the <audio> tag parameters supported in HTML5, with the two most important parameters in the top section, the most commonly used options in a middle section, with seldom used options in the bottom section of the table.

Table 8-3. Parameters Supported By the <audio> Tag

Audio Tag Parameter

Audio Tag Parameter’s Purpose

src

Digital audio asset source file name reference

controls

Audio transport UI (user interface) controls

preload

Preloads the digital audio file asset

muted

Mutes the digital audio asset

loop

Loops the digital audio asset

autoplay

Automatically play audio on a page load event

autobuffer

Automatically buffer audio on page load event

This <audio> tag has seven

parameters. These can be seen in Table 8-3 in the first section (common usage parameters) and in the second section (three less frequently used parameters). The third section of the table contains parameters that are supported but are not recommended for use unless absolutely needed. The reason for this is that autoplay bothers many users, and an autobuffer takes up system resources that may not even be used if the user chooses not to hit the transport play button.

If you want to master digital audio editing terminology, principles, workflows, data footprint optimization, compositing and fundamentals, you check out my Digital Audio Editing Fundamentals (Apress, 2015).

To create a digital audio asset, use the <audio> tag with the controls parameter, <source> child tags, and noaudio message (like noscript), using this following HTML5 markup structure:

<audio controls>
     <source src="preferred_audio_codec.ogg"     type="audio/ogg" />
     <source src="second_choice_audio_codec.mp3" type="audio/mp3" />
     ALERT! Your Browser Does Not Support Audio or the HTML5 Audio Tag!
</audio>

Using more than one <source> tag provides “fallback” file format support choices for the HTML5 platform that you are using, in case the first audio codec choice is not supported by the HTML5 browser (or HTML5 operating system).

To autoplay a digital image asset using the autoplay parameter, you would utilize the following HTML5 markup:

<audio controls autoplay>
     <source src="preferred_audio_codec.ogg"     type="audio/ogg" />
     <source src="second_choice_audio_codec.mp3" type="audio/mp3" />
     ALERT! Your Browser Does Not Support Audio or the HTML5 Audio Tag!
</audio>

To loop the digital audio asset using the loop parameter, you should utilize the following HTML5 markup:

<audio controls loop>
     <source src="preferred_audio_codec.ogg"     type="audio/ogg" />
     <source src="second_choice_audio_codec.mp3" type="audio/mp3" />
     ALERT! Your Browser Does Not Support Audio or the HTML5 Audio Tag!
</audio>

To preload a digital audio asset, use a preload parameter with the auto setting, utilizing this following HTML5 markup:

<audio controls preload="auto">
     <source src="preferred_audio_codec.ogg"     type="audio/ogg" />
     <source src="second_choice_audio_codec.mp3" type="audio/mp3" />
     ALERT! Your Browser Does Not Support Audio or the HTML5 Audio Tag!
</audio>

To preload only digital audio metadata, use the preload parameter with a metadata setting, using this HTML5 markup:

<audio controls preload="metadata">
     <source src="preferred_audio_codec.ogg"     type="audio/ogg" />
     <source src="second_choice_audio_codec.mp3" type="audio/mp3" />
ALERT! Your Browser Does Not Support Audio or the HTML5 Audio Tag! </audio>

To prevent any pre-loading of your digital audio assets, use the preload parameter with the none setting, utilizing this following HTML5 markup:

<audio controls preload="none">
     <source src="preferred_audio_codec.ogg"     type="audio/ogg" />
     <source src="second_choice_audio_codec.mp3" type="audio/mp3" />
ALERT! Your Browser Does Not Support Audio or the HTML5 Audio Tag! </audio>                                                                      

Next, let’s take a look at the digital video <video> tag.

Digital Video: Using the <video> Tag

Your next most widely used new media element in HTML5 is digital video, which uses the <video> tag. This is new to HTML5 and is not in previous versions of HTML. Parameters include the src, which references a
digital audio asset file name, and controls

, which adds the
video transport user interface

feature, and width and height, in case you wish to “downsample” or scale down your digital video asset (using a factor of 2 or 4). Table 8-4 shows the <video> tag parameters supported in HTML5 with the four most important parameters in the top section, the four most commonly used options in the middle section, and two less frequently used options listed in the bottom section.

Table 8-4.
Parameters Supported

by the <video> Tag

Video Tag Parameter

Video Tag Parameter’s Purpose

src

Digital video asset source file name reference

width

Digital video asset width in pixels

height

Digital video asset height in pixels

controls

Video transport UI (user interface) controls

preload

Preload the digital video file asset

muted

Mutes the digital video asset

poster

Digital image to use as a poster while loading

loop

Loops the digital video asset

autoplay

Automatically plays a video on page load event

autobuffer

Automatically buffers video on page load event

The <video> tag has ten

parameters. These are seen in Table 8-4 in the first section (common usage parameters) and in the second section (four less frequently utilized parameters).

If you want to master digital video editing terminology, principles, workflows, data footprint optimization, compositing, and fundamentals, check out the Digital Video Editing Fundamentals (Apress, 2015).

To create a
digital video asset

, use the <video> tag with the controls parameter, width and height parameters, three <source> child tags, and a novideo message (like a noscript), as shown in the following HTML5 markup structure:

<video width="400" height="300" controls>
     <source src="my_preferred_video_codec.mp4"  type="video/mp4" />
     <source src="second_choice_video_codec.ogg" type="video/ogg" />
     <source src="third_choice_audio_codec.webm" type="audio/webm"/>
     ALERT! Your Browser Does Not Support Video or the HTML5 Video Tag!
</video>

Using more than one <source> tag provides “fallback” file format support choices for the HTML5 platform that you are using, in case the first video codec choice is not supported by that particular HTML5 browser (or operating system).

To autoplay a digital video asset, you use the
autoplay parameter

, as shown in the following HTML5 markup:

<video width="400" height="300" controls autoplay>
     <source src="my_preferred_video_codec.mp4"  type="video/mp4" />
     <source src="second_choice_video_codec.ogg" type="video/ogg" />
     <source src="third_choice_audio_codec.webm" type="audio/webm"/>
     ALERT! Your Browser Does Not Support Video or the HTML5 Video Tag!
</video>

To loop a digital video asset, you use the
loop parameter

, as shown in the following HTML5 markup:

<video width="400" height="300" controls loop>
     <source src="my_preferred_video_codec.mp4"  type="video/mp4" />
     <source src="second_choice_video_codec.ogg" type="video/ogg" />
     <source src="third_choice_audio_codec.webm" type="audio/webm"/>
     ALERT! Your Browser Does Not Support Video or the HTML5 Video Tag!
</video>

To preload a digital video asset, you use the
preload parameter

with the auto setting, as shown in the following HTML5 markup:

<video width="400" height="300" controls preload="auto">
     <source src="my_preferred_video_codec.mp4"  type="video/mp4" />
     <source src="second_choice_video_codec.ogg" type="video/ogg" />
     <source src="third_choice_audio_codec.webm" type="audio/webm"/>
     ALERT! Your Browser Does Not Support Video or the HTML5 Video Tag!
</video>

As with the <audio> tag preload parameter, you can set a preload value to none or to only load the metadata.

In case you are wondering what
metadata

is, it includes information about the audio or video asset, such as the title, the name of the artist, and information about the music (or video) content.

To display an image during video buffering, use a
poster parameter

set to reference your digital image asset’s file name, as shown in the following HTML5 markup:

<video width="400" height="300" controls poster="posterimagename.png">
     <source src="my_preferred_video_codec.mp4"  type="video/mp4" />
     <source src="second_choice_video_codec.ogg" type="video/ogg" />
     <source src="third_choice_audio_codec.webm" type="audio/webm"/>
     ALERT! Your Browser Does Not Support Video or the HTML5 Video Tag!
</video>

Next, let’s look at the digital illustration

<svg> tag and its child tags (which allow you to define illustration).

Digital Illustration: Using the <svg> Tag

Your next most widely used new media element in HTML5 is digital illustration, which uses the <svg> tag. It is also new in HTML5, meaning it was not included in previous versions of HTML. CSS is the most popular way to apply the power of svg, especially a plethora of special effects to apply to the vector element components of your HTML5 applications, including text, buttons, or vector illustrations. A number of new media software packages can generate SVG XML data

, including Inkscape, GIMP, CorelDRAW, OpenOffice Draw, and Adobe Illustrator, to name just a few.

SVG tag parameters include width and height for your SVG digital illustration definition, as well as child tags, used to define SVG elements, which add features to digital illustration assets. SVG is based on XML, and SVG uses XML tags, which as you now know is compatible with HTML5 now that SVG support has been added. This is exciting for HTML5 developers, as vector support allows digital illustrators to create impressive
interactive 2D artwork

as well as visually exciting special effects for users.

Table 8-5 shows some of the SVG tag’s child tag elements

that are supported in HTML5. They also have their own parameters, such as fill, stroke, and color, and so forth, as you will see in some of the markup examples in this section. I cannot discuss SVG in detail in this book, because it is a topic in and unto itself. That said, the W3C’s decision to add SVG support to HTML5 was easy due to shared SGML markup language origins.

Table 8-5. Child Tags Supported By the <svg> Tag

SVG Child Tag

Purpose of SVG Child Tag

circle

Draw a 2D circle element

rect

Draw a 2D circle element

ellipse

Draw a 2D circle element

polygon

Draw a polygon (n-sided shape element)

polyline

Draw a polyline

line

Draw a line

image

Digital image to use as a poster while loading

text

Loop video

font

Automatically play video on page load event

path

Loop video

filter

Automatically play video on page load event

animate

Automatically buffer video on page load event

The <svg> tag has

many child tags and parameters, all of which are supported in HTML5 and are typically accessed using CSS to implement the digital illustration functions.

Some of the more often used SVG elements are seen in Table 8-5. The first section contains the basic shapes and the second section contains other useful vector design elements.

If you wanted to master digital illustration (SVG) terms as well as core SVG XML principles, SVG XML markup workflow, and SVG fundamentals, check out my Digital Illustration Fundamentals (Apress, 2015) title. In this book, I show readers how to create (and optimize) SVG assets using GIMP and Inkscape, so the book bridges digital imaging and digital illustration software with HTML5. The book also has chapters covering Android, Java and JavaFX code, HTML5 markup, XML, CSS, and cross-platform (cross-device) publishing.

To create a digital illustration asset, use the <svg> tag with the
width and height parameters

and with a child tag that defines an SVG circle shape, as shown in the following HTML5 markup:

<svg width="640" height="480">
   <circle cx="0" cy="0" r="25" fill="blue" stroke="red" stroke-width="4">
</svg>

To create an SVG
rounded rectangle

, utilize the following HTML5 markup, which includes parameters for rx (radius x) and ry (radius y):

<svg width="640" height="480">
   <rect x="20" y="20" rx="10" ry="10" width="200" height="200"
         style="fill:yellow; stroke:purple; stroke-width:6; opacity:0.5" />
</svg>

Notice the
style parameter

, which contains in-line CSS3 style information

, which is more common for styling SVG illustrations.

Next, let’s look at the other new media areas that can be simulated using features in HTML5.

Interactive 3D: Using a <canvas> Tag and WebGL

We are going to

spend an entire chapter on advanced drawing for HTML5 using the <canvas> tag, which is how you implement interactive 3D, or i3D. This advanced new media area requires a special API called WebGL, which uses OpenGL. WebGL2 is due out in 2016. It brings the visual impact of OpenGL to HTML5. We’ll go over all of this in Chapter 17. (I just wanted to put it in context in this chapter with the other new media genres.)

Digital Painting

: Digital Painting using JavaScript

Digital painting is a combination of digital imaging, vector illustration, particle systems, and digital video. SVG is moving towards adding digital painting features, but you can use JavaScript and CSS3 with HTML5 to simulate digital painting now. This is an advanced area beyond the tag markup focus of this book, but if you want to learn more about digital painting, you should check out Digital Painting Techniques (Apress, 2016). In this book, I show readers how to create (and optimize) digital painting assets using Corel Painter 2016, GIMP, and Inkscape, which bridges digital imaging and digital illustration software with HTML5. This book has chapters covering data footprint optimization, Android, JavaScript, Java 8 and JavaFX coding, HTML5 markup, as well as cross-platform and cross-device new media content publishing.

Visual Effects

: Creating VFX using JavaScript

Other advanced new media genres, such as visual effects, or VFX, can also be simulated using advanced JavaScript programming in conjunction with CSS3, WebGL2, and HTML5 tags. This is an advanced area beyond the tag markup focus of this book, but if you want to learn more about visual effects, you should check out Visual Effects Fundamentals (Apress, 2016). In this book, I show the readers how to create (and optimize) visual effects assets using BlackMagic Fusion and GIMP, so it bridges digital imaging, digital video, digital audio, and digital illustration software with HTML5. The book goes over data footprint optimization, Android, Java 8 and JavaFX coding, HTML5 markup, and cross-platform and cross-device publishing.

Web Speech

: Speech Synthesis and Recognition

Finally, let’s take a quick look at speech recognition and speech synthesis, which were recently added to HTML5 browsers Google Chrome and Apple Safari using the Web Speech API. Expect Firefox to add it as well since it is moving to support iTVs and smartphones. Opera is also doing the same. The future of new media is looking bright for HTML5-based platforms and browsers, which is especially exciting for multimedia producers. For an example of how speech recognition and speech synthesis work in Google Chrome, visit
https://www.google.com/intl/en/chrome/demos/speech.html
.

Summary

This chapter discussed new media support for HTML5 using the <img>, <audio>, <video>, and <svg> tags; their related child tags and parameter options; and other new media genre support in HTML5. In the next chapter, you learn about <header> tags, which support the organization of content into levels within your HTML5 document.

Comments are closed.

loading...