66
CHAPTER 4 USING VIDEO
Here are three of my favourite encoders:
Miro Video Converter (http://www.mirovideoconverter.com). As well as 
converting between audio formats, this converter also supports conversion 
of video files to Theora Ogg, MP4, and WebM. It really is all you need and 
runs on both Windows and Mac.
Handbrake (http://handbrake.fr). This open source converter allows you to 
convert video files to MP4 and the Theora Ogg format. It runs on Windows, 
Mac, and Linux.
Media Converter (http://www.mediaconverter.org). This online conversion 
application allows you to upload a file for conversion or provide the URL 
of an existing file. It allows you to convert files to Theora Ogg, MP4, and 
Flash FLV, among others.
Although you can choose from many other encoders, these are three solid 
encoders that you can use to get started.
MP4 ENCODING AND DELAYED PLAYBACK
Sometimes the way an MP4 file is coded can cause problems with its play-
back. Namely, the file doesn’t start playing until it has downloaded com-
pletely. 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.
If you find this is happening to your MP4 files, you can fix the problem by 
running the files through the QTIndexSwapper (http://renaun.com/blog/
code/qtindexswapper) by Renaun Erickson of Adobe. QTIndexSwapper 
simply moves the index to the beginning of the file.
Now that you’ve converted your files, you’re ready to start using them within 
your documents!
Pdf edit hyperlink - 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
adding links to pdf; convert doc to pdf with hyperlinks
Pdf edit hyperlink - 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 hyperlink pdf document; add url pdf
USING THE VIDEO ELEMENTS
67
Let’s begin with some basic examples of embedding video files within a web docu-
ment. You’ll have previously encountered all the elements and attributes used in 
the examples in Chapter 2, so nothing should be new to you.
PLAYING A VIDEO FILE
The easiest example of them all is to play a simple video file of one format with 
default media controls for the user. 
To play a WebM file, you use:
<video src=”snowy-tree.webm” controls></video>
Thecontrol attribute informs the browser that it should display a set of basic 
video controls on top of the video player.
If you wanted the video to start playing as soon as the page loads, you could 
simply add the autoplay attribute:
<video src=”snowy-tree.webm” controls autoplay></video>
You might also want the video to start playing immediately and then keep play-
ing in a loop via the loop attribute:
<video src=”snowy-tree.webm” controls autoplay loop></video>
It is, however, strongly advised not to do this: Not only is it annoying, but it can 
be an accessibility nightmare because a looping video file might play over added 
audio that’s inserted for accessibility reasons.
You could also mute the video file on startup by using the muted attribute. Of 
course, if your video has no sound, this has no effect:
<video src=”snowy-tree.webm” controls autoplay muted></video>
NOTES:
None of the major browsers currently support the muted
attribute. However, you can set it via the Media JavaScript API,
which is discussed in Chapter 5.
All of the examples in this section and more can be found 
on the accompanying website at www.html5multimedia.com.
USING THE VIDEO ELEMENTS
How to C#: Basic SDK Concept of XDoc.PDF for .NET
XDoc.PDF for .NET allows C# developers to edit hyperlink of PDF document, including editing PDF url links and quick navigation link in bookmark/outline.
adding a link to a pdf in preview; adding links to pdf in preview
VB.NET PDF: Basic SDK Concept of XDoc.PDF
XDoc.PDF for .NET allows VB.NET developers to edit hyperlink of PDF document, including editing PDF url links and quick navigation link in bookmark/outline.
add links pdf document; add link to pdf acrobat
68
CHAPTER 4 USING VIDEO
By default, the browser will start loading the entire video file when the page 
loads. If you would prefer that the browser not do this (perhaps you think it’s 
unlikely that users will want to view the video and don’t want to waste bandwidth 
because they might be viewing your site over a mobile network), you can use the 
preload attribute and set it to none:
<video src=”snowy-tree.webm” controls preload=”none”></video>
You can also request that the browser load the video’s metadata (e.g., file length) 
by setting the preload attribute to metadata:
<video src=”snowy-tree.webm” controls preload=”metadata”></video>
Any setting of the preload attribute merely suggests to the browser what your 
intentions are, but ultimately, the browser will decide what to do. 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:
<video src=”snowy-tree.webm” controls width=”300” height=”210”> 
</video>
You can also remove the controls entirely by omitting the controls attribute:
<video src=”snowy-tree.webm”></video>
Note that the user can restore the default controls in most browsers by right-
clicking on the video and selecting the controls from the displayed drop-down 
menu Figure 4.1.
All of the preceding examples use just one video file format. But because you’ll 
need to serve up more than one video file format to cover all major browsers, let’s 
take a look at how to do that next.
FIGURE 4.1 Restoring the 
browser’s default media 
controls via the browser 
menu in Firefox 5.
TIP:
If you also specify autoplay, the preload setting will be 
overridden because the video must be downloaded for it to play!
VB.NET PDF Library SDK to view, edit, convert, process PDF file
processing images contained in PDF file. Please click to see details. PDF Hyperlink Edit. RasterEdge PDF SDK for .NET package offers
pdf links; add links to pdf online
C# PDF Library SDK to view, edit, convert, process PDF file for C#
processing images contained in PDF file. Please click to see details. C#.NET: Edit PDF Hyperlink. RasterEdge PDF SDK for .NET package
add a link to a pdf in preview; add hyperlink to pdf online
USING THE VIDEO ELEMENTS
69
PLAYING A VIDEO FILE WITH DIFFERENT SOURCES
Presenting different video file formats to the browser is quite easy using the source
element, which you also used in the audio examples in Chapter 3.
Here is the code you need to provide two different sources for the video to play:
<video controls>
<source src=”snowy-tree.mp4” type=”video/mp4”>
<source src=”snowy-tree.webm” type=”video/webm”>
</video>
But let’s also support Theora Ogg, just in case a Firefox 3.5 or Opera 10.5 user 
wants to view your video:
<video controls>
<source src=”snowy-tree.ogv” type=”video/ogg”>
<source src=”snowy-tree.mp4” type=”video/mp4”>
<source src=”snowy-tree.webm” type=”video/webm”>
</video>
The examples in the previous section, “Playing a Video File,” where different 
attributes were applied to show you how they work and what they do, also apply 
to any video element that contains multiple source elements.
NOTE:
You probably won’t need to add support for 
Theora Ogg, and you should only really bother if you know 
that you need to support specific older versions of Firefox.
VB.NET Create PDF from Excel Library to convert xlsx, xls to PDF
C#.NET edit PDF digital signatures, C#.NET edit PDF sticky note Merge all Excel sheets to one PDF file in VB Change Excel hyperlink to PDF hyperlink and bookmark.
add hyperlink to pdf; add links to pdf document
C# Create PDF from Word Library to convert docx, doc to PDF in C#.
Able to get word count in PDF pages. Change Word hyperlink to PDF hyperlink and bookmark. Free online Word to PDF converter without email.
check links in pdf; add a link to a pdf
70
CHAPTER 4 USING VIDEO
THE
type
ATTRIBUTE
When you use the source element within the video element, you’ll notice that the type attribute moves 
from the video element to the source element. The reason is that the whole idea of serving up dierent 
sources is because they use dierent formats, and each source element needs to specify the format the 
source is in via its own type attribute.
Thetype attribute can also contain the actual codec that the video file is encoded in. For example:
<source src=”snowy-tree.mp4” type=’video/ogg; codecs=”theora, vorbis”’>
<source src=”snowy-tree.mp4” type=’video/webm; codecs=”vp8, vorbis”’>
<source src=”snowy-tree.mp4” type=’video/mp4; codecs=”mp4a.40.2”’>
Including the codec in the type attribute can be beneficial because it helps the browser decide if it can play 
the file or not. It’s best to only include the codec if you know for certain which codec was used to encode 
your video content.
Should you decide to include the codec, be very careful and ensure that you format the string correctly, 
paying particular attention to the quotes used; otherwise, the browser won’t recognise the source.
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.
If you want to autoplay and loop your video, you would add the autoplay and 
loop attributes to the video element like this:
<video controls autoplay loop>
<source src=”snowy-tree.mp4” type=”video/mp4”>
<source src=”snowy-tree.webm” type=”video/webm”>
</video>
You can of course also autoplay and remove the controls like this:
<video autoplay>
<source src=”snowy-tree.mp4” type=”video/mp4”>
<source src=”snowy-tree.webm” type=”video/webm”>
</video>
VB.NET Create PDF from Word Library to convert docx, doc to PDF in
Set File Permissions. Password: Open Document. Edit Digital Signatures. Ability to get word count of PDF pages. Change Word hyperlink to PDF hyperlink and bookmark
clickable links in pdf files; active links in pdf
.NET PDF SDK - Description of All PDF Processing Control Feastures
signature; Add signature image to PDF file. PDF Hyperlink Edit. Support outline; More about PDF Hyperlink Edit ▶. PDF Metadata Edit. Support
add hyperlink to pdf acrobat; add links to pdf in acrobat
USING THE VIDEO ELEMENTS
71
Notice that when autoplay is off, the first still from the video is displayed in 
the browser as an image. You might want to use a different image if the first still 
from the video isn’t what you want to display; it might be blank or just not the still 
you want to show first.
If you want to use a different image, you can use the poster attribute to point 
at an image file to use instead:
<video controls poster=”snowy-tree-poster.gif” width=”300”  
height=”210”>
<source src=”snowy-tree.mp4” type=”video/mp4”>
<source src=”snowy-tree.webm” type=”video/webm”>
</video>
You can get an idea of how the poster attribute works in Figure 4.2.
Now that you know how to play video files, you might want to think about the 
legacy browser fallback. How do you show video in legacy browsers? Let’s take a look.
FIGURE 4.2 The image on the 
left displays the first still from 
the video that the browser 
shows by default; on the right, 
the same video is shown but 
with a defined poster image 
displayed instead.
72
CHAPTER 4 USING VIDEO
PLAYING A VIDEO FILE WITH DIFFERENT
SOURCES AND LEGACY FALLBACK
Throughout this chapter I’ve recommended providing a fallback for legacy browsers, 
such as Internet Explorer 6 to 8, that don’t support HTML5 and native multimedia. 
This of course means reverting to an old third-party plugin that these browsers 
understand, such as Flash.
Because browsers ignore what they don’t understand, legacy browsers will 
ignore the video and source elements, and act as if they don’t exist. This of course 
allows you to provide a simple link to the video file so it can be downloaded:
<video controls autoplay>
<source src=”snowy-tree.mp4” type=”video/mp4”>
<source src=”snowy-tree.webm” type=”video/webm”>
<a href=”snowy-tree.mp4”>Download the video: snowy-tree.mp4</a>
</video>
You might prefer to actually provide an image link rather than a simple text link:
<video controls autoplay>
<source src=”snowy-tree.mp4” type=”video/mp4”>
<source src=”snowy-tree.webm” type=”video/webm”>
<figure>
<a href=”snowy-tree.mp4”>
<img src=”snowy-tree.gif” alt=”Branches of a fern tree  
covered in snow” height=”210” width=”300” />
<figcaption>Download the video: snowy-tree.mp4 
</figcaption>
</a>
</figure>
</video>
USING THE VIDEO ELEMENTS
73
Figure 4.3 shows how this might look in Internet Explorer.
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.
You can also take advantage of the fact that Flash can play MP4 files, so there’s 
no need to create another file in a different format. The following code shows how 
a Flash fallback can be achieved:
<video controls autoplay>
<source src=”snowy-tree.mp4” type=”video/mp4”>
<source src=”snowy-tree.webm” type=”video/webm”>
<object type=”application/x-shockwave-flash”
data=”player.swf?videoUrl=snowy-tree.mp4&autoPlay=true” 
height=”210” width=”300”>
<param name=”movie”
value=”player.swf?videoUrl=snowy-tree.mp4&autoPlay=true”>
</object>
</video>
A non-HTML5 browser will ignore the two source elements because it doesn’t 
know what to do with them. It will then recognise the object element, and provided 
Flash is installed, will play the video through the Flash player.
FIGURE 4.3 This is how the 
image and link to download the 
MP4 file might be displayed in 
Internet Explorer 8.
74
CHAPTER 4 USING VIDEO
The same code using the embed element looks like this:
<video controls autoplay>
<source src=”snowy-tree.mp4” type=”video/mp4”>
<source src=”snowy-tree.webm” type=”video/webm”>
<embed type=”application/x-shockwave-flash” wmode=”transparent” 
src=”player.swf?videoUrl=snowy-tree.mp4&autoPlay=true” 
height=”210” width=”300”>
</video>
It’s better practice to use object instead of embed, because any content in the 
object start and end tags will be rendered even if the browser doesn’t support the 
plugin that the object element specifies in its type attribute. This allows you to 
specify yet another fallback should you need to. As you can see in the previous 
object example, the param element will be read by browsers that don’t understand 
the value specified by the type attribute in the object element.
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. Therefore, you 
can also add the image download link mentioned earlier as a final fallback, just in 
case Flash isn’t installed:
<video controls autoplay>
<source src=”snowy-tree.mp4” type=”video/mp4”>
<source src=”snowy-tree.webm” type=”video/webm”>
<object type=”application/x-shockwave-flash”
data=”player.swf?videoUrl=snowy-tree.mp4&autoPlay=true” 
height=”210” width=”300”>
<param name=”movie”
value=”player.swf?videoUrl=snowy-tree.mp4&autoPlay=true”>
</object>
<a href=”snowy-tree.mp4”>Download the video: snowy-tree.mp4</a>
</video>
USING THE VIDEOELEMENTS
75
The download link here isn’t a true fallback in the sense that if the browser falls 
back to Flash, the download link will also be displayed, but that’s not necessarily 
a bad thing because it just provides another way to access the file.
There’s plenty to think about when deciding which browsers you want to sup-
port and which fallbacks you want to provide to do so. Whatever you decide on, 
HTML5 multimedia should enable you to get the job done.
VIDEO FOR EVERYBODY!
You can read an excellent article by Kroc Camen of Camen Design (http://
camendesign.com) on how to make video available to all without using 
JavaScript or browser sning. Kroc’s site is definitely worth checking out for 
future reading because he keeps it up to date with any new developments or 
discoveries that he or others make.
You’ll find the article at http://camendesign.com/code/video_for_everybody.
Of course, these days it isn’t just modern and legacy desktop browsers that you 
need to worry about supporting. You also need to make your content available to 
users of modern mobiles, tablets, and other alternative browsing devices with 
video-playing capabilities. To optimise your web content for such devices, you also 
need to learn about media types and media queries, which is what you’ll look at next. 
TARGETING DEVICES WITH DIFFERENT VIDEO 
FILES USING MEDIA TYPES AND QUERIES
Let’s say you wanted to serve up a different video file depending on the browser’s 
capabilities and size. For example, you might want to play a smaller video, in both 
dimensions and file size, to a mobile phone that will have a small screen and pos-
sibly be retrieving data over a 3G connection. 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.w3.org/TR/CSS2/media.html) to 
enable you to target different devices with specific styling and/or style sheets. 
Table 4.2 (on the next page) lists the media types.
Documents you may be interested
Documents you may be interested