76
CHAPTER 4 USING VIDEO
TABLE 4.2 Media Types
TYPE
DEFINITION
all
Suitable for all devices.
braille
Aimed at Braille tactile feedback devices.
embossed
Aimed at paged braille printers.
handheld
Intended for handheld devices, such as mobile phones.
print
Targets paged material and material for display in print preview mode.
projection
Suitable for projected presentations.
screen
Suitable for displaying on a colour computer screen.
speech
Intended for speech synthesisers.
tty
Aimed at devices with a fixed-pitch character grid, such as a terminal.
tv
Intended for a television-type device.
You may have come across some of the media types listed in Table 4.2 before, 
although most of them are probably alien to you. If you’ve ever created a style sheet 
for printing content, you’ll be familiar with the print media type; if you’ve ever 
attempted to target a mobile phone, the handheld type will also be familiar to you.
But it is the handheld type that has caused particular issues as technology has 
moved on. Initially, phones didn’t have browsers that were capable of rendering 
HTML sites, so developers largely ignored them. When phones became “smarter” 
and came with improved browsers, the handheld media type wasn’t being used 
in websites. Vendors then chose to ignore it and default to the screen media type 
instead. But something was needed to help combat this because website configu-
rations that were meant for full-screen browsers were now rendering on phones, 
causing many an annoying scroll bar. This is where media queries come in.
Media queries were created by the W3C and have a complete specification of 
their own (see www.w3.org/TR/css3-mediaqueries). They are an extension to CSS3 
media types that allow you to check for conditions of particular media features, 
such as width,height, and orientation, to deliver either different content or 
styling. You can check for a number of device features, the list of which appears 
in Table 4.3.
Pdf link to email - insert, remove PDF links in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Free C# example code is offered for users to edit PDF document hyperlink (url), like inserting and deleting
add link to pdf; pdf link open in new window
Pdf link to email - VB.NET PDF url edit library: insert, remove PDF links in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Help to Insert a Hyperlink to Specified PDF Document Page
add link to pdf file; add a link to a pdf file
USING THE VIDEO ELEMENTS
77
TABLE 4.3 Media Query Device Features
FEATURE
MIN/MAX PREFIXES
DEFINITION
width
Yes
The width of the target display area.
height
Yes
The height of the target display area.
device-width
Yes
The width of the device’s rendering area.
device-height
Yes
The height of the device’s rendering area.
orientation
Yes
Orientation of the rendering device: portait or landscape.
aspect-ratio
Yes
Ratio of target width to the height.
device-aspect-ratio
Yes
Ratio of device-width to the device-height.
resolution
Yes
Density of pixels in the device.
color
Yes
Number of bits per colour component.
color-index
Yes
Number of entries in colour lookup table.
grid
No
Tests if the device is grid-based or not.
monochrome
Yes
Number of bits per pixel in monochrome device.
scan
No
For TV browsing: progressive or scan.
The great thing is that you can combine media types and media queries to target 
certain devices using the and keyword:
screen and (min-device-width:300px)
You can also target all devices that don’t match particular settings by using the 
logical not operator keyword:
not screen and (max-width:800px)
The only keyword can also be used to hide the settings from older browsers:
only screen and (max-width:800px)
RasterEdge.com General FAQs for Products
copy and email the secure download link to the assistance, please contact us via email (support@rasteredge & profession imaging controls, PDF document, image to
add links to pdf acrobat; add hyperlinks to pdf online
RasterEdge Product Licensing Discount
s). After confirming the informations provided, we will send you an email that contains price(s) at a discount and the online order link for new licensing.
adding hyperlinks to pdf; add hyperlinks to pdf
78
CHAPTER 4 USING VIDEO
Of course, these settings don’t work on their own and need to be assigned to 
themedia attribute of the required source element within the video container:
<source src=”myVideo.webm” media=” screen and  
(min-device-width:300px)”>
The following code example serves a different video to all media types that 
have a maximum width of 600 pixels. Both WebM and MP4 formats are provided. 
Anything that doesn’t match these features will move on to the succeeding source 
definitions:
<video controls>
<source src=”snowy-tree-small.mp4” type=”video/mp4”  
media=”all and (max-width:600px)”>
<source src=”snowy-tree-small.webm” type=”video/webm”  
media=”all and (max-width:600px)”>
<source src=”snowy-tree-medium.webm” type=”video/webm”>
<source src=”snowy-tree-medium.mp4” type=”video/mp4”>
</video>
If you want to also provide a medium-sized video file based on a larger maxi-
mum display width of 800 pixels, you can do so like this:
<video controls>
<source src=”snowy-tree-small.mp4” type=”video/mp4”  
media=”screen and (max-width:600px)”>
<source src=”snowy-tree-small.webm” type=”video/webm”  
media=”screen and (max-width:600px)”>
<source src=”snowy-tree-medium.webm” type=”video/webm”  
media=”screen and (max-width:800px)”>
<source src=”snowy-tree-medium.mp4” type=”video/mp4”  
media=”screen and (max-width:800px)”>
<source src=”snowy-tree-large.webm” type=”video/webm”>
<source src=”snowy-tree-large.mp4” type=”video/mp4”>
</video>
RasterEdge Product Renewal and Update
4. Order email. Our support team will send you the purchase link. HTML5 Viewer for .NET; XDoc.Windows Viewer for .NET; XDoc.Converter for .NET; XDoc.PDF for .NET;
c# read pdf from url; add email link to pdf
VB.NET Create PDF from PowerPoint Library to convert pptx, ppt to
Link: Edit URL. Bookmark: Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Create PDF file from PowerPoint free online without email.
add url link to pdf; convert excel to pdf with hyperlinks
USING THE VIDEO ELEMENTS
79
TESTING WITH MEDIA TYPES AND QUERIES
You might be wondering how on earth you would 
test media types and queries if you don’t have 
specific devices available to you.
With the examples that I’ve provided, simply 
changing the size of the browser window and then 
refreshing the page will usually result in the desired 
outcome.
You can also use the ProtoFluid application 
(http://app.protouid.com), which allows you to 
load a website (even those running on your local 
server) and change the view to that of a handful of 
phones (such as Blackberry and iPhone) and moni-
tors of various sizes, among other devices.
You can see how the code in the section “Target-
ing Devices with Dierent Video Files Using Media 
Types and Queries” works in ProtoFluid in Figure 4.4
and Figure 4.5.
Of course, nothing beats testing your code on the 
real thing, but that isn’t always a viable option 
given the sheer number of devices on the market.
NOTE:
Firefox completely ignores media queries, so changing the browser window size 
will have no effect. I suggest using Opera, which does exactly what it’s supposed to.
FIGURE 4.5 Selecting the desktop 
800×600 size in ProtoFluid displays 
the medium video file.
FIGURE 4.4 Selecting the iPhone size in ProtoFluid displays the 
smaller video file.
VB.NET Create PDF from Word Library to convert docx, doc to PDF in
Link: Edit URL. Bookmark: Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Free online Word to PDF converter without email.
pdf link to attached file; adding a link to a pdf
VB.NET Create PDF from Excel Library to convert xlsx, xls to PDF
Link: Edit URL. Bookmark: Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Convert Excel to PDF document free online without email.
clickable links in pdf from word; add links to pdf file
80
CHAPTER 4 USING VIDEO
Again, any device that has a maximum display size that is larger than 600 pixels 
or 800 pixels will ignore the smaller sizes and play whichever one of the WebM or 
MP4 larger videos that it is capable of playing.
These are just some simple examples of what you might want to achieve when 
targeting different devices. By combining media types and queries, you can target 
any device to meet your specific requirements. Unfortunately, none of the previous 
examples discussed will work with Android.
ANDROID AND VIDEO
The implementation of HTML5 video in Android is nothing short of shockingly 
poor. For this reason, it deserves its own small section to prevent you from tear-
ing your hair out.
Android supports MP4 files from version 2.0 and WebM from version 2.3.
You shouldn’t use the type attribute with the video or source element when 
defining the video file you want Android to use. For some reason, this confuses 
Android and it ignores the source.
In addition, Android will completely ignore the controls attribute, and you’ll 
have to either implement your own controls via the JavaScript API (which is the 
subject of Chapter 5), or to achieve autoplay, play the video via the API on page load.
Android also won’t show the first frame of the video as an image; it instead dis-
plays a video icon. 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. I’ll defer 
the explanation of this JavaScript for now but will discuss it in detail in Chapter 5:
TIP: 
Peter Gasston, a web developer and author of many articles and 
a book on CSS3, provides an in-depth tutorial on how to make HTML5 
video work on Android phones. Be sure to check out what he has to say at 
www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones 
if you have problems working with HTML5 video on Android phones.
VB.NET PDF Convert to Word SDK: Convert PDF to Word library in vb.
Create editable Word file online without email. Supports transfer from password protected PDF. VB.NET class source code for .NET framework.
pdf hyperlink; add hyperlink to pdf in
C# PDF Convert to Word SDK: Convert PDF to Word library in C#.net
and .docx. Create editable Word file online without email. Password protected PDF file can be printed to Word for mail merge. C# source
add url to pdf; pdf hyperlinks
USING THE VIDEO ELEMENTS
81
<!DOCTYPE html>
<html>
<head>
<title>Playing a Video File: Media Query Android</title>
<script>
function play() {
var video = document.getElementById(‘video’);
video.addEventListener(‘click’,function(){
video.play();
},false);
}
</script>
</head>
<body onload=”play();”>
<video controls>
<source src=”snowy-tree-small.mp4” media=”screen and  
(max-width:800px)”>
<source src=”snowy-tree-large.mp4” type=”video/mp4”>
</video>
</body>
</html>
The preceding issues mentioned only affect the default browser that comes 
with Android. If the user uses another mobile browser, such as Opera Mobile, the 
preceding code isn’t necessary. It’s a good bet that Google will improve Android’s 
implementation of HTML5 video in a future release. And by the time you read this, 
it may have already been updated.
C# Create PDF from Excel Library to convert xlsx, xls to PDF in C#
Export PDF from Excel with cell border or no border. Free online Excel to PDF converter without email. Quick integrate online C# source code into .NET class.
chrome pdf from link; pdf edit hyperlink
C# Create PDF from PowerPoint Library to convert pptx, ppt to PDF
application. Free online PowerPoint to PDF converter without email. C# source code is provided for .NET WinForms class. Evaluation
clickable links in pdf; add hyperlinks pdf file
82
CHAPTER 4 USING VIDEO
You should now be aware of just how easy it is to add video to your website using 
HTML5 native multimedia. You are probably also aware that there are still a number 
of details you need to consider before doing so. For example:
Which browsers should you support?
Will you support legacy browsers?
Should you support mobile devices? If so, which ones?
These are just some of the questions you may need to ask before forging ahead.
Once you’ve made those decisions, however, harnessing the power of HTML5 
multimedia to deliver video to your users is relatively simple. With the standardised 
method of delivery the multimedia part of the HTML5 specification brings, you 
know which viewers you’ll reach and what kind of experience they will have.
So far you’ve been leaving it up to the browser to provide the video (and audio) 
controls. And these controls vary from one browser to the next.
In the next chapter you’ll learn how to use the HTML5 multimedia JavaScript 
APIs included as part of the HTML5 specification to create your own custom con-
trols for both audio and video. Let’s go!
WRAPPING UP
This page intentionally left blank 
260
INDEX
NUMBERS
2D API, 199–200. See alsocanvas element
2D drawing context, using, 199
2D Transforms. See also transforms
matrix() function, 153
rotating videos, 150
scaling videos, 148–150
skewing videos, 151
support for, 148
translating videos, 151–153
X and Y equivalents, 153
3D Transforms. See also transforms
perspective property, 154, 156
rotating elements, 154, 156–157
using, 154–157
W3C definition, 154
3D video cover, 169–170
SYMBOLS
& (ampersand) character, including in video 
cues, 183
< (left angle bracket), including in video 
cues, 183
> (right angle bracket), including in video 
cues, 183
A
AAC (Advanced Audio Coding) audio 
format,48
browser support for, 49
accessibility
audience for, 174
checkKey() function, 194
improving for custom controls, 192–194
progress bar, 194
SRT file format, 175
WebVTT (Web Video Text Tracks), 176
Adobe Flash media player, 25–26, 29
in Internet Explorer 8, 57–58
usingembed element, 56
all media type, 76
ampersand (&) character, including in video 
cues, 183
Android video support, 64–65, 80–81
animateMotion element, using with SVG 
video masks, 231
animating SVG video masks, 228–229
animation-fill-mode property, using, 
164–165
APIs. See also JavaScript API
Audio Data, 240–244
getUserMedia API, 247–248
PeerConnection, 249
Stream, 250–251
Web Audio, 245–246
WebSocket, 252–258
applet element, using with plugins, 28
application/ogg MIME type, 62
article element, 10, 13–16
aside element, 18
audio browser support, 49–51
audio codecs, defined, 46
audio controls, 34
Audio Data API
accessing data, 241
framebuffer data, 242–243
JavaScript code, 242
loadedmetadata event, 241
mozChannels attribute, 241
mozCurrentSampleOffset() method, 243
mozFrameBufferLength attribute, 241
mozSampleRate attribute, 241
mozSetup() method, 243
mozWriteAudio() method, 243
play function, 244
reading audio data, 240–243
writing audio data, 243
INDEX
INDEX
261
audio declaration, 34
audio element
autoplay attribute, 33
controls attribute, 33, 52–53
crossorigin attribute, 33
loop attribute, 33
mediagroup attribute, 33
muted attribute, 33
muting files, 53
playing audio files, 52
preload attribute, 32, 53
src attribute, 32
using in native multimedia, 32–34
using transitions with, 143–144
audio files
encoding, 50
playing, 52–58
audio formats
AAC (Advanced Audio Coding), 48–49
browser support for, 49–51
MP3, 47, 49
MP4, 48–49
MPEG, 47
Ogg Vorbis, 46, 49
WAV (Waveform Audio File Format), 
48–49
B
backwards compatibility, 5
Berners-Lee, Tim, 4
black and white filter, applying, 235–236
Blender Foundation, 162
blur, adding to video, 236
braille media type, 76
browser support
audio formats, 49–51
canvas element, 198
SVG (Scalable Vector Graphics), 217
video formats, 64–66, 114–115
browsers
compatibility, 20
encoding audio files, 50
legacy, 51
button CSS class name, 10
C
Camen, Kroc, 75
canvas element. See also 2D API
attributes, 198
browser support for, 198
clearing contents of, 203
defining, 198
drawing context, 199
fillRect() function, 199–201
getting handle to, 199
height attribute, 198
overriding default dimensions, 202
website, 212
width attribute, 198
X and Y axes, 198
Captionator JavaScript library, 188
captions, element for, 19
Cascading Style Sheets (CSS). See CSS 
(Cascading Style Sheets)
character encoding, providing, 9
charset element, 9
Chrome
enabling Web Audio API in, Web 
AudioAPI, 246
opacity consideration, 146
playbackRate attribute, 111
video support, 64
circle-animate-motion.svg file, 230
codec
defined, 62
including in type attribute, 70
colour saturation matrix filter, applying, 234
container, defined, 62
Documents you may be interested
Documents you may be interested