best way to convert pdf to image in c# : Create a fillable pdf form from a pdf application control utility html web page .net visual studio Video_-_Dive_Into_HTML52-part1460

In the “Video” tab, you can set four important options.
Video Codec. Make sure this is “H.264 (x264)”
2-Pass Encoding. If this is checked, HandBrake will run the video encoder twice. The
first time, it just analyzes the video, looking for things like color composition, motion,
and scene breaks. The second time, it actually encodes the video using the information it
learned during the first pass. As you might expect, this takes about twice as long as
single-pass encoding, but it results in better video without increasing file size. I always
enable two-pass encoding for H.264 video. Unless you’re building the next YouTube and
encoding videos 24 hours a day, you should probably use two-pass encoding too.
Turbo First Pass. Once you enable 2-pass encoding, you can get a little bit of time back
by enabling “turbo first pass.” This reduces the amount of work done in the first pass
(analyzing the video), while only slightly degrading quality. I usually enable this option,
but if quality is of the utmost importance to you, you should leave it disabled.
Quality. There are different ways to specify the “quality” of your encoded video. You can
set a target file size, and HandBrake will do its best to ensure that your encoded video is
not larger than that. You can set an average “bitrate,” which is the quite literally the
number of bits required to store one second worth of encoded video. (It’s called an
“average” bitrate because some seconds will require more bits than others.) Or you can
specify a constant quality, on a scale of 0 to 100%. Higher numbers will result in better
quality but larger files. There is no single right answer for what quality setting you
should use.
ASK PROFESSOR MARKUP
Q: Can I use two-pass encoding on Ogg video
too?
A: Yes, but due to fundamental differences in
how the encoder works, 
you probably don’t need
to. Two-pass H.264 encoding almost always
results in higher quality video. Two-pass Ogg
encoding of Ogg video is only useful if you’re
trying to get your encoded video to be a specific
file size. (Maybe that is something you’re
interested in, but it’s not what these examples
show, and it’s probably not worth the extra time
for encoding web video.) For best Ogg video
quality, 
use the video quality settings, and don’t
worry about two-pass encoding.
In this example, I’ve chosen an average bitrate of 600 kbps, which is quite high for a 320×240
encoded video. (Later in this chapter, I’ll show you a sample video encoded at 200 kbps.) I’ve
also chosen 2-pass encoding with a “turbo” first pass.
Create a fillable pdf form from a pdf - C# PDF Form Data fill-in Library: auto fill-in PDF form data in C#.net, ASP.NET, MVC, WinForms, WPF
Online C# Tutorial to Automatically Fill in Field Data to PDF
create a fillable pdf form; pdf form fill
Create a fillable pdf form from a pdf - VB.NET PDF Form Data fill-in library: auto fill-in PDF form data in vb.net, ASP.NET, MVC, WinForms, WPF
VB.NET PDF Form Data fill-in library: auto fill-in PDF form data in vb.net, ASP.NET, MVC, WinForms, WPF
pdf fillable form creator; pdf create fillable form
"
Video quality options
In the “Audio” tab, you probably don’t need to change anything. If your source video has
multiple audio tracks, you might need to select which one you want in the encoded video. If
your video is mostly a person talking (as opposed to music or general ambient sounds), you
can probably reduce the audio bitrate to 96 kbps or so. Other than that, the defaults you
inherited from the “iPhone” preset should be fine.
Audio quality options 
!
Next, click the “Browse” button and choose a directory and filename to save your encoded
video.
"
Set destination filename
C# Create PDF Library SDK to convert PDF from other file formats
Create fillable PDF document with fields. Load PDF from existing documents and image in SQL server. Load PDF from stream programmatically.
convert pdf fillable form to word; asp.net fill pdf form
VB.NET Create PDF from OpenOffice to convert odt, odp files to PDF
Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Create PDF document from OpenOffice Text Document with ODT, ODS, ODP forms into fillable PDF formats
attach file to pdf form; convert word form to fillable pdf
Finally, click “Start” to start encoding.
Let’s make some video! 
!
HandBrake will display some progress statistics while it encodes your video.
"
Patience, Grasshopper
C# Create PDF from OpenOffice to convert odt, odp files to PDF in
Create PDF document from OpenOffice Presentation in both .NET WinForms and ASP.NET NET control to change ODT, ODS, ODP forms to fillable PDF formats in Visual
convert excel to fillable pdf form; create fill pdf form
VB.NET Create PDF Library SDK to convert PDF from other file
Create fillable PDF document with fields in Visual Basic .NET application. Load PDF from existing documents and image in SQL server.
convert an existing form into a fillable pdf; create a pdf with fields to fill in
BATCH ENCODING H.264 VIDEO
WITH HANDBRAKE
(Just as in the previous section, in this section I’m going to use “H.264 video” as a shorthand
for “H.264 baseline profile video and AAC low-complexity profile audio in an MPEG-4
container.” This is the combination of codecs+container that works natively in Safari, in
Adobe Flash, on the iPhone, and on Google Android devices.)
HandBrake also comes in a command-line edition. As with 
ffmpeg2theora, the command-line
edition of HandBrake offers a dizzying array of options. (Type 
O/A$Z=/[%487CDD<%-*
to read
about them.) I’ll focus on just a few:
DD*=%K%;C\]\
, where “X” is the name of a HandBrake preset. The preset you want for
H.264 web video is called “iPhone & iPod Touch”, and it’s important to put the entire
name in quotes.
DD9#$;<CN
, where “W” is the width of your encoded video. HandBrake will automatically
adjust the height to maintain the original video’s proportions.
DD":CH
, where “Q” is the average bitrate (measured in kilobits per second).
DD;9&D*/KK
, which enables 2-pass encoding.
DD;F=:&
, which enables turbo first pass during 2-pass encoding.
DD#A*F;C6
, where “F” is the filename of your source video.
DD&F;*F;C5
, where “E” is the destination filename for your encoded video.
Here is an example of calling HandBrake on the command line, with command line flags that
match the settings we chose 
with the graphical version of HandBrake.
G&FT-&U/-<&K;VCO/A$Z=/[%487CDD*=%K%;C\#^<&A%C_C#^&$C`&FU<\
CCCCCCCCCCCCCCCCCCCCCCCCCCCCDD9#$;<CQBR
CCCCCCCCCCCCCCCCCCCCCCCCCCCCDD":CXRR
CCCCCCCCCCCCCCCCCCCCCCCCCCCCDD;9&D*/KK
CCCCCCCCCCCCCCCCCCCCCCCCCCCCDD;F=:&
CCCCCCCCCCCCCCCCCCCCCCCCCCCCDD#A*F;C*=X($"
CCCCCCCCCCCCCCCCCCCCCCCCCCCCDD&F;*F;C*=X()*+
From top to bottom, this command runs HandBrake with the “iPhone & iPod Touch” preset,
resizes the video to 320×240, sets the average bitrate to 600 kbps, enables two-pass encoding
with a turbo first pass, reads the file 
*=X($"
, and encodes it as 
*=X()*+
. Whew!
ENCODING WEBM VIDEO WITH
FFMPEG
WebM is fully supported in 
,,)*%.
0.6 and later. On the command line, run 
,,)*%.
with no
parameters and verify that it was compiled with VP8 support:
G&FT-&U/-<&K;VC,,)*%.
66)*%.C"%=K#&AC0a>D=BQSbcdC4&*G=#.<;CeUfCBRRRDBRSRC;<%C66)*%.C$%"%-&*%=K
CC:F#-;C&AC@/GCSbCBRSRCBBgQBgBRC9#;<C.UUC+(+(Q
CCU&A,#.F=/;#&AgCDD%A/:-%D.*-CDD%A/:-%D"%=K#&AQCDD%A/:-%DA&A,=%%CDD
%A/:-%D*&K;*=&UCDD%A/:-%D*;<=%/$KCDD%A/:-%D-#:,//UCDD%A/:-%D-#:,//$CDD
%A/:-%D-#:)*Q-/)%CDD%A/:-%D-#:&*%AU&=%D/)=A:CDD%A/:-%D-#:&*%AU&=%D/)=9:CD
D%A/:-%D-#:;<%&=/CDD%A/:-%D-#:IBX+CDD%A/:-%D-#:I"#$CDD%A/:-%DISS.=/:C
DD%A/:-%D-#:"&=:#KC
DD%A/:-%D-#:"*I
If you don’t see the magic words “
DD%A/:-%D-#:"&=:#K
” and “
DD%A/:-%D-#:"*I
,” you don’t
have the right version of 
,,)*%.
. (If you compiled 
,,)*%.
yourself, check to see if you have
two versions installed. That’s fine, they won’t conflict with each other. You’ll just need to use
the full path of the VP8-enabled version of 
,,)*%.
.)
I’m going to do 
a two-pass encode. Pass 1 just scans through the input video file (
D#C*=X($"
)
and writes out some statistics to a log file (which will be auto-named 
*=X($"DR(-&.
). I specify
the video codec with the 
D"U&$%U
parameter:
G&FT-&U/-<&K;VC,,)*%.CD*/KKCSCD*/KK-&.,#-%C*=X($"CD;<=%/$KCSXCCD
[%G#A;J)#ACRCD.CBWRCDK[#*J;<=%K<&-$CRCDE)#ACSCDE)/ICWSCD#C*=X($"C
C# PDF Field Edit Library: insert, delete, update pdf form field
A professional PDF form creator supports to create fillable PDF form in C#.NET. An advanced PDF form maker allows users to create editable PDF form in C#.NET.
add signature field to pdf; change font size pdf fillable form
VB.NET Create PDF from PowerPoint Library to convert pptx, ppt to
Convert multiple pages PowerPoint to fillable and editable PDF documents. Easy to create searchable and scanned PDF files from PowerPoint.
convert pdf fillable form; create a pdf form that can be filled out
D"U&$%UC-#:"*ICD:CXS++RRCDKCQBRIB+RCD/K*%U;C+gQCD/ACDGC>28
Most of the 
,,)*%.
command line has nothing to do with VP8 or WebM. 
-#:"*I
does support
a number of VP8-specific options that you can pass to 
,,)*%.
, but I don’t yet know how any
of them work. Once I find a good explanation of them, I’ll link it here and incorporate them
into the narrative if it’s worthwhile to do so.
For the second pass, 
,,)*%.
will read the statistics it wrote during the first pass and actually
do the encoding of the video and the audio. It will write out a 
(9%:)
file.
G&FT-&U/-<&K;VC,,)*%.CD*/KKCBCD*/KK-&.,#-%C*=X($"CD;<=%/$KCSXCCD
[%G#A;J)#ACRCD.CBWRCDK[#*J;<=%K<&-$CRCDE)#ACSCDE)/ICWSCD#C*=X($"CD"U&$%UC
-#:"*ICD:CXS++RRCDKCQBRIB+RCD/K*%U;C+gQCD/U&$%UC-#:"&=:#KCDGC*=X(9%:)
There are five important parameters here:
D"U&$%UC-#:"*I
specifies that we’re encoding with the VP8 video codec. WebM always
uses VP8 video.
D:CXS++RR
specifies the bitrate. Unlike other formats, 
-#:"*I
expects the bitrate in
actual bits, not kilobits. If you want a 600 kbps video, multiply 600 by 1024 to get 614400.
DKCQBRIB+R
specifies the target size, width by height.
D/K*%U;C+gQ
specifies the aspect ratio of the video. Standard definition video is usually
4:3, but most high-definition video is 16:9 or 16:10. In my testing, I found that I had to
specify this explicitly on the command line, instead of relying on 
,,)*%.
to autodetect
it.
D/U&$%UC-#:"&=:#K
specifies that we’re encoding with the Vorbis audio codec. WebM
always uses Vorbis audio.
AT LAST, THE MARKUP
I’m pretty sure this was supposed to be an HTML book. So where’s the markup?
HTML5 gives you two ways to include video on your web page. Both of them involve the
!"#$%&'
element. If you only have one video file, you can simply link to it in a 
K=U
attribute.
This is remarkably similar to including an image with an 
!#).CK=UM\(((\'
tag.
One video file 
!
!"#$%&C
K=UM\*=X(9%:)\'!Y"#$%&'
Technically, that’s all you need. But just like an 
!#).'
tag, you should always include 
9#$;<
and 
<%#.<;
attributes in your 
!"#$%&'
tags. The 
9#$;<
and 
<%#.<;
attributes can be the same
as the maximum width and height you specified during the encoding process. Don’t worry if
one dimension of the video is a little smaller than that. Your browser will center the video
inside the box defined by the 
!"#$%&'
tag. It won’t ever be smooshed or stretched out of
proportion.
!"#$%&CK=UM\*=X(9%:)\C
9#$;<M\QBR\C<%#.<;M\B+R\'!Y"#$%&'
By default, the 
!"#$%&'
element will not expose any sort of player controls. You can create
your own controls with plain old HTML, CSS, and JavaScript. The 
!"#$%&'
element has
methods like 
*-/Gef
and 
*/FK%ef
and a read/write property called 
UF==%A;`#)%
. There are
also read/write 
"&-F)%
and 
)F;%$
properties. So you really have everything you need to build
your own interface.
If you don’t want to build your own interface, you can tell the browser to display a built-in
set of controls. To do this, just include the 
U&A;=&-K
attribute in your 
!"#$%&'
tag.
!"#$%&CK=UM\*=X(9%:)\C9#$;<M\QBR\C<%#.<;M\B+R\C
U&A;=&-K'!Y"#$%&'
There are two other optional attributes I want to mention before we go any further: 
*=%-&/$
and 
/F;&*-/G
. Don’t shoot the messenger; let me explain why these are useful. The 
*=%-&/$
attribute tells the browser that you would like it to start downloading the video file as soon as
the page loads. This makes sense if the entire point of the page is to view the video. On the
other hand, if it’s just supplementary material that only a few visitors will watch, then you
can set 
*=%-&/$
to 
A&A%
to tell the browser to minimize network traffic.
VB.NET Create PDF from Word Library to convert docx, doc to PDF in
formatting. Create PDF files from both DOC and DOCX formats. Convert multiple pages Word to fillable and editable PDF documents. Professional
auto fill pdf form from excel; change font size in pdf fillable form
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. Create fillable and editable PDF documents from Excel in Visual
pdf form fill; attach image to pdf form
Here’s an example of a video that will start downloading (but not playing) as soon as the page
loads:
!"#$%&CK=UM\*=X(9%:)\C9#$;<M\QBR\C<%#.<;M\B+R\C
*=%-&/$'!Y"#$%&'
And here’s an example of a video that will not start downloading as soon as the page loads:
!"#$%&CK=UM\*=X(9%:)\C9#$;<M\QBR\C<%#.<;M\B+R\C
*=%-&/$M\A&A%\'!Y"#$%&'
The 
/F;&*-/G
attribute does exactly what it sounds like: it tells the browser that you would
like it to start downloading the video file as soon as the page loads, and you would like it to
start playing the video automatically as soon as possible. Some people love this; some people
hate it. But let me explain why it’s important to have an attribute like this in HTML5. Some
people are going to want their videos to play automatically, even if it annoys their visitors. If
HTML5 didn’t define a standard way to auto-play videos, people would resort to JavaScript
hacks to do it anyway. (For example, by calling the video’s 
*-/Gef
method during the
window’s 
-&/$
event.) This would be much harder for visitors to counteract. On the other
hand, it’s a simple matter to add an extension to your browser (or write one, if necessary) to
say “ignore the 
/F;&*-/G
attribute, I don’t ever want videos to play automatically.”
Here’s an example of a video that will start downloading and playing as soon as possible after
the page loads:
!"#$%&CK=UM\*=X(9%:)\C9#$;<M\QBR\C<%#.<;M\B+R\C
/F;&*-/G'!Y"#$%&'
And here is a 
Greasemonkey script that you can install in your local copy of Firefox that
prevents HTML5 video from playing automatically. It uses the 
/F;&*-/G
DOM attribute
defined by HTML5, which is the JavaScript equivalent of the 
/F;&*-/G
attribute in your
HTML markup. [
disable_video_autoplay.user.js]
YYCMM2K%=0U=#*;MM
YYCTA/)%CCCCCCCCCCCh#K/:-%C"#$%&C/F;&*-/G
YYCTA/)%K*/U%CCCCCC<;;*gYY$#"%#A;&)/=[(&=.Y*=&i%U;KY.=%/K%)&A[%GY
YYCT$%KU=#*;#&ACCCC5AKF=%KC;</;CO`@8WC"#$%&C%-%)%A;KC$&CA&;C/F;&*-/G
YYCT#AU-F$%CCCCCCCCj
YYCMMY2K%=0U=#*;MM
"/=C/=a#$%&KCMC$&UF)%A;(.%;5-%)%A;KZG`/.>/)%ek"#$%&kfl
,&=Ce"/=C#CMC/=a#$%&K(-%A.;<CDCSlC#C'MCRlC#DDfCm
CCCC"/=C%-)a#$%&CMC/=a#$%&Kn#ol
CCCC
%-)a#$%&(/F;&*-/GCMC,/-K%l
p
But wait a second… If you’ve been following along this whole chapter, you don’t have just
one video file; you have three. One is an 
(&."
file that you created with 
Firefogg or
ffmpeg2theora. The second is an 
()*+
file that you created with 
HandBrake. The third is a
(9%:)
file that you created with 
ffmpegHTML5 provides a way to link to all three of them:
the 
!K&F=U%'
element. Each 
!"#$%&'
element can contain more than one 
!K&F=U%'
element.
Your browser will go down the list of video sources, in order, and play the first one it’s able
to play.
That raises another question: how does the browser know which video it can play? Well, in
the worst case scenario, it loads each of the videos and tries to play them. That’s a big waste
of bandwidth, though. You’ll save a lot of network traffic if you tell the browser up-front
about each video. You do this with the 
;G*%
attribute on the 
!K&F=U%'
element.
Here’s the whole thing:
Three (!) video files 
!
!"#$%&C9#$;<M\QBR\C<%#.<;M\B+R\CU&A;=&-K'
CC!
K&F=U%CK=UM\*=X()*+\CC;G*%Mk"#$%&Y)*+lCU&$%UKM\/"US(+B5RS5dC
)*+/(+R(B\k'
CC!
K&F=U%CK=UM\*=X(9%:)\C;G*%Mk"#$%&Y9%:)lCU&$%UKM\"*qdC"&=:#K\k'
CC!
K&F=U%CK=UM\*=X(&."\CC;G*%Mk"#$%&Y&..lCU&$%UKM\;<%&=/dC"&=:#K\k'
!Y"#$%&'
Let’s break that down. The 
!"#$%&'
element specifies the width and height for the video, but
it doesn’t actually link to a video file. Inside the 
!"#$%&'
element are three 
!K&F=U%'
elements. Each 
!K&F=U%'
element links to a single video file (with the 
K=U
attribute), and it
also gives information about the video format (in the 
;G*%
attribute).
C# Create PDF from Excel Library to convert xlsx, xls to PDF in C#
Create fillable and editable PDF documents from Excel in both .NET WinForms and ASP.NET. Create searchable and scanned PDF files from Excel.
create a pdf form to fill out; convert word to pdf fillable form online
C# Create PDF from PowerPoint Library to convert pptx, ppt to PDF
Convert multiple pages PowerPoint to fillable and editable PDF documents. Easy to create searchable and scanned PDF files from PowerPoint.
create a pdf form to fill out and save; adding signature to pdf form
The 
;G*%
attribute looks complicated — hell, it is complicated. It’s a combination of three
pieces of information: the 
container format, the 
video codec, and the 
audio codec. Let’s start
from the bottom. For the 
(&."
video file, the container format is Ogg, represented here as
"#$%&Y&..
. (Technically speaking, that’s the MIME type for Ogg video files.) The video codec
is Theora, and the audio codec is Vorbis. That’s simple enough, except the format of the
attribute value is a little screwy. The value itself has to include quotation marks, which means
you’ll need to use a different kind of quotation mark to surround the entire value.
CC!K&F=U%CK=UM\*=X(&."\C
;G*%Mk"#$%&Y&..lCU&$%UKM\;<%&=/dC"&=:#K\k'
WebM is much the same, but with a different MIME type (
"#$%&Y9%:)
instead of 
"#$%&Y&..
)
and a different video codec (
"*q
instead of 
;<%&=/
) listed within the 
U&$%UK
parameter.
CC!K&F=U%CK=UM\*=X(9%:)\C
;G*%Mk"#$%&Y9%:)lCU&$%UKM\"*qdC"&=:#K\k'
The H.264 video is even more complicated. Remember when I said that both 
H.264 video and
AAC audio can come in different “profiles”? We encoded with the H.264 “baseline” profile and
the AAC “low-complexity” profile, then wrapped it all in an MPEG-4 container. All of that
information is included in the 
;G*%
attribute.
CC!K&F=U%CK=UM\*=X()*+\C
;G*%Mk"#$%&Y)*+lCU&$%UKM\/"US(+B5RS5dC)*+/(+R(B\k
'
The benefit of going to all this trouble is that the browser will check the 
;G*%
attribute first
to see if it can play a particular video file. If a browser decides it can’t play a particular video,
it won’t download the file. Not even part of the file. You’ll save on bandwidth, and your
visitors will see the video they came for, faster.
If you follow the instructions in this chapter for encoding your videos, you can just copy and
paste the 
;G*%
attribute values from this example. Otherwise, you’ll need to 
work out the
;G*%
parameters for yourself.
PROFESSOR MARKUP SAYS
iPads running iOS 3.x had a bug that prevented them from
noticing anything but the first video source listed. iOS 4 (a
free upgrade for all iPads) fixes this bug. If you want to
deliver video to iPad owners who haven’t yet upgraded to
iOS 4, you will need to list your MP4 file first, followed by
the free video formats. Sigh.
MIME TYPES REAR THEIR UGLY HEAD
There are so many pieces to the video puzzle, I hesitate to even bring this up. But it’s
important, because a misconfigured web server can lead to endless amounts of frustration as
you try to debug why your videos play on your local computer but fail to play when you
deploy them to your production site. If you run into this problem, the root cause is probably
MIME types.
I mentioned MIME types 
in the history chapter, but you probably glazed over that and didn’t
appreciate the significance. So here it is in all-caps:
PROFESSOR MARKUP SHOUTS
VIDEO FILES MUST BE SERVED WITH THE PROPER MIME
TYPE!
What’s the proper MIME type? You’ve already seen it; it’s part of the value of the 
;G*%
attribute on a 
!K&F=U%'
element. But setting the 
;G*%
attribute in your HTML markup is not
sufficient. You also need to ensure that your web server includes the proper MIME type in the
4&A;%A;D`G*%
HTTP header.
If you’re using the Apache web server or some derivative of Apache, you can use an 
AddType
directive in your site-wide 
<;;*$(U&A,
or in an 
(<;/UU%KK
file in the directory where you
store your video files. (If you use some other web server, consult your server’s documentation
on how to set the 
4&A;%A;D`G*%
HTTP header for specific file types.)
?$$`G*%C"#$%&Y&..C(&."
?$$`G*%C"#$%&Y)*+C()*+
?$$`G*%C"#$%&Y9%:)C(9%:)
The first line is for videos in an Ogg container. The second line is for videos in an MPEG-4
container. The third is for WebM. Set it once and forget it. If you forget to set it, your videos
will fail to play in some browsers, even though you included the MIME type in the 
;G*%
attribute in your HTML markup.
For even more gory details about configuring your web server, I direct your attention to this
excellent article at the Mozilla Developer Center: 
Configuring servers for Ogg media. (The
advice in that article applies to MP4 and WebM video, too.)
WHAT ABOUT IE?
Internet Explorer 9 
supports the HTML5 
!"#$%&'
element, but 
Microsoft has publicly
promised that the final version of IE 9 will support H.264 video and AAC audio in an MPEG-4
container, just like Safari and the iPhone.
But what about older versions of Internet Explorer? Like, you know, all shipping versions up
to and including IE 8? Most people who use Internet Explorer also have the Adobe Flash
plugin installed. Modern versions of Adobe Flash (starting with 9.0.60.184) support H.264 video
and AAC audio in an MPEG-4 container, just like Safari and the iPhone. Once you’ve 
encoded
your H.264 video for Safari, you can play it in a Flash-based video player if you detect that
one of your visitors doesn’t have an HTML5-capable browser.
FlowPlayer is an open source, GPL-licensed, Flash-based video player. (
Commercial licenses
are also available.) FlowPlayer doesn’t know anything about the 
!"#$%&'
element. It won’t
magically transform a 
!"#$%&'
tag into a Flash object. But HTML5 is well-designed to handle
this, because you can nest an 
!&:i%U;'
element within a 
!"#$%&'
element. Browsers that
don’t support HTML5 video will ignore the 
!"#$%&'
element and simply render the nested
!&:i%U;'
instead, which will invoke the Flash plug-in and play the movie through
FlowPlayer. Browsers that support HTML5 video will find a video source they can play and
play it, and ignore the nested 
!&:i%U;'
element altogether.
That last bit is the key to the whole puzzle: HTML5 specifies that all elements (other than
!K&F=U%'
elements) that are children of a 
!"#$%&'
element must be ignored altogether. That
allows you to use HTML5 video in newer browsers and fall back to Flash gracefully in older
browsers, without requiring any fancy JavaScript hacks. You can read more about this
technique here: 
Video For Everybody.
ISSUES ON IPHONES AND IPADS
iOS is Apple’s operating system that powers iPhones, iPod Touches, and iPads. iOS 3.2 has a
number of issues with HTML5 video.
1.  iOS will not recognize the video if you include a 
*&K;%=
attribute. The 
*&K;%=
attribute
of the 
!"#$%&'
element allows you to display a custom image while the video is loading,
or until the user presses “play.” This bug is fixed in iOS 4.0, but it will be some time
before users upgrade.
2.  If you have multiple 
!K&F=U%'
elements, iOS will not recognize anything but the first
one. Since iOS devices only support H.264+AAC+MP4, this effectively means you must
always list your MP4 first. This bug is also fixed in iOS 4.0.
ISSUES ON ANDROID DEVICES
Android is Google’s operating system that powers a number of different phones and handheld
devices. Versions of Android before 2.3 had a number of issues with HTML5 video.
1.  The 
;G*%
attribute on 
!K&F=U%'
elements confused Android greatly. The only way to get
it to recognize a video source is, ironically, to omit the 
;G*%
attribute altogether and
ensure that your H.264+AAC+MP4 video file’s name ends with an 
()*+
extension. You
can still include the 
;G*%
attribute on your other video sources, since H.264 is the only
video format that Android 2.2 supports. (This bug is fixed in Android 2.3.)
2.  The 
U&A;=&-K
attribute was not supported. There are no ill effects to including it, but
Android will not display any user interface controls for a video. You will need to provide
your own user interface controls. At a minimum, you should provide a script that starts
playing the video when the user clicks the video. This bug is also fixed in Android 2.3.
A COMPLETE, LIVE EXAMPLE
Here is a live example of a video that uses these techniques. I extended the “Video For
Everybody” code to include a WebM-formatted video. I encoded the same source video into
three formats, with these commands:
rrC`<%&=/Ya&=:#KY1..
G&FT-&U/-<&K;VC,,)*%.B;<%&=/CDD"#$%&:#;=/;%CBRRCDD)/IJK#L%CQBRIB+RCDD
&F;*F;C*=X(&."C*=X($"
rrCO(BX+Y??4Y@^+
G&FT-&U/-<&K;VCO/A$Z=/[%487CDD*=%K%;C\#^<&A%C_C#^&$C`&FU<\CDD":CBRRCDD
9#$;<CQBRCDD;9&D*/KKCDD;F=:&CDD&*;#)#L%CDD#A*F;C*=X($"CDD&F;*F;C*=X()*+
rrCa^qYa&=:#KYN%:@
G&FT-&U/-<&K;VC,,)*%.CD*/KKCSCD*/KK-&.,#-%C*=X($"CD;<=%/$KCSXCCD
[%G#A;J)#ACRCD.CBWRCDK[#*J;<=%K<&-$CRCDE)#ACSCDE)/ICWSCD#C*=X($"CD"U&$%UC
-#:"*ICD:CBR+qRRCDKCQBRIB+RCD/K*%U;C+gQCD/ACD,C9%:)CDGC>28
G&FT-&U/-<&K;VC,,)*%.CD*/KKCBCD*/KK-&.,#-%C*=X($"CD;<=%/$KCSXCCD
[%G#A;J)#ACRCD.CBWRCDK[#*J;<=%K<&-$CRCDE)#ACSCDE)/ICWSCD#C*=X($"CD"U&$%UC
-#:"*ICD:CBR+qRRCDKCQBRIB+RCD/K*%U;C+gQCD/U&$%UC-#:"&=:#KCD/UCBCDGC
*=X(9%:)
The final markup uses a 
!"#$%&'
element for HTML5 video, a nested 
!&:i%U;'
element for
Flash fallback, and a small bit of script for the benefit of Android devices:
!"#$%&C#$M\)&"#%\C9#$;<M\QBR\C<%#.<;M\B+R\C*=%-&/$CU&A;=&-K'
CC!K&F=U%CK=UM\*=X(9%:)\C;G*%Mk"#$%&Y9%:)lCU&$%UKM\"*qdC"&=:#K\kCY'
CC!K&F=U%CK=UM\*=X(&."\C;G*%Mk"#$%&Y&..lCU&$%UKM\;<%&=/dC"&=:#K\kCY'
CC!K&F=U%CK=UM\*=X()*+\CY'
CC!&:i%U;C9#$;<M\QBR\C<%#.<;M\B+R\C;G*%M\/**-#U/;#&AYIDK<&U[9/"%D,-/K<\
CCCC$/;/M\,-&9*-/G%=DQ(B(S(K9,\'C
CCCC!*/=/)CA/)%M\)&"#%\C"/-F%M\,-&9*-/G%=DQ(B(S(K9,\CY'C
CCCC!*/=/)CA/)%M\/--&9,F--KU=%%A\C"/-F%M\;=F%\CY'C
CCCC!*/=/)CA/)%M\,-/K<"/=K\C"/-F%MkU&A,#.Mm\U-#*\gCm\F=-\gC
\<;;*gYY9%/=%<F.<(U&)Y$#<WY*=X()*+\dC\/F;&^-/G\g,/-K%dC
\/F;&ZF,,%=#A.\g;=F%ppkCY'C
CCCC!*'h&9A-&/$C"#$%&C/KC!/C<=%,M\*=X()*+\'@^+!Y/'dC!/C
<=%,M\*=X(9%:)\'N%:@!Y/'dC&=C!/C<=%,M\*=X(&."\'1..!Y/'(!Y*'C
CC!Y&:i%U;'
!Y"#$%&'
!KU=#*;'
CC"/=C"CMC$&UF)%A;(.%;5-%)%A;ZG7$e\)&"#%\fl
CC"(&AU-#U[CMC,FAU;#&AefCm
CCCC#,Ce"(*/FK%$fCm
CCCCCC"(*-/Gefl
CCCCpC%-K%Cm
CCCCCC"(*/FK%efl
CCCCp
CCpl
!YKU=#*;'
With the combination of HTML5 and Flash, you should be able to watch this video in almost
any browser and device:
FURTHER READING
HTML5: The 
!"#$%&'
element
Video for Everybody
A gentle introduction to video encoding
Theora 1.1 is released — what you need to know
Configuring servers for Ogg media
Encoding with the 
IBX+
codec
Video type parameters
Everything you need to know about HTML5 audio and video
Making HTML5 video work on Android phonesLe sigh.
Internet Explorer 9 Guide for Developers: HTML5 video and audio elements
00:00
-06:34
Pre-built custom controls for HTML5 video:
VideoJS
MediaElement.js
Kaltura HTML5 Video & Media JavaScript Library
This has been “Video on the Web.” The 
full table of contents has more if you’d like to keep
reading.
DID YOU KNOW?
In association with Google Press, O’Reilly is distributing
this book in a variety of formats, including paper, ePub,
Mobi, and DRM-free PDF. The paid edition is called
“HTML5: Up & Running,” and it is available now. This
chapter is included in the paid edition.
If you liked this chapter and want to show your
appreciation, you can 
buy “HTML5: Up & Running” with
this affiliate link or 
buy an electronic edition directly
from O’Reilly. You’ll get a book, and I’ll get a buck. I do
not currently accept direct donations.
Copyright MMIX–MMXI 
Mark Pilgrim
powered by Google™
Search
Documents you may be interested
Documents you may be interested