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.