save pdf file in c# : Copy pdf bookmarks to another pdf application control tool html web page winforms online DiveIntoHTML5-Video4-part1521

Video - Dive Into HTML5
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 
HandBrakeCLI --help
to 
read about them.) I
ll focus on just a few:
--preset "X"
, 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.
--width W
, where 
W
is the width of your encoded video. HandBrake will automatically 
adjust the height to maintain the original video
s proportions.
--vb Q
, where 
Q
is the average bitrate (measured in kilobits per second).
--two-pass
, which enables 2-pass encoding.
--turbo
, which enables turbo first pass during 2-pass encoding.
--input F
, where 
F
is the filename of your source video.
--output E
, 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.
you@localhost$ HandBrakeCLI --preset "iPhone & iPod Touch"
             --width 320
             --vb 600
             --two-pass
             --turbo
             --input pr6.dv
             --output pr6.mp4
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 
pr6.dv
, and encodes it as 
pr6.mp4
. Whew!
Encoding WebM Video with ffmpeg
WebM is fully supported in 
ffmpeg
0.6 and later. On the command line, run 
ffmpeg
with 
no parameters and verify that it was compiled with VP8 support:
you@localhost$ ffmpeg
FFmpeg version SVN-r23197, Copyright (c) 2000-2010 the FFmpeg developers
http://diveintohtml5.org/video.html (41 of 50) [6/8/2011 6:36:23 PM]
Copy pdf bookmarks to another pdf - add, remove, update PDF bookmarks in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your C# Project with Rapid PDF Internal Navigation Via Bookmark and Outline
bookmarks pdf reader; bookmark pdf documents
Copy pdf bookmarks to another pdf - VB.NET PDF bookmark library: add, remove, update PDF bookmarks in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your VB.NET Project with Rapid PDF Internal Navigation Via Bookmark and Outline
bookmark page in pdf; bookmarks pdf file
Video - Dive Into HTML5
built on May 19 2010 22:32:20 with gcc 4.4.3
configuration: --enable-gpl --enable-version3 --enable-nonfree --enable-postproc --
enable-pthreads --enable-libfaac --enable-libfaad --enable-libmp3lame --enable-
libopencore-amrnb --enable-libopencore-amrwb --enable-libtheora --enable-libx264 --
enable-libxvid --enable-x11grab --enable-libvorbis --enable-libvpx
If you don
t see the magic words 
--enable-libvorbis
and 
--enable-libvpx
,
you don
t have 
the right version of 
ffmpeg
. (If you compiled 
ffmpeg
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 
ffmpeg
.)
I
m going to do a two-pass encode. Pass 1 just scans through the input video file (
-i pr6.dv
and writes out some statistics to a log file (which will be auto-named 
pr6.dv-0.log
). I specify 
the video codec with the 
-vcodec
parameter:
you@localhost$ ffmpeg -pass 1 -passlogfile pr6.dv -threads 16  -keyint_min 0 -g 250 
-skip_threshold 0 -qmin 1 -qmax 51 -i pr6.dv -vcodec libvpx -b 614400 -s 320x240 -aspect 
4:3 -an -y NUL
Most of the 
ffmpeg
command line has nothing to do with VP8 or WebM. 
libvpx
does support 
a number of VP8-specific options that you can pass to 
ffmpeg
, 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, 
ffmpeg
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 
.webm
file.
you@localhost$ ffmpeg -pass 2 -passlogfile pr6.dv -threads 16  -keyint_min 0 -g 250 
-skip_threshold 0 -qmin 1 -qmax 51 -i pr6.dv -vcodec libvpx -b 614400 -s 320x240 -aspect 
4:3 -acodec libvorbis -y pr6.webm
There are five important parameters here:
-vcodec libvpx
specifies that we
re encoding with the VP8 video codec. WebM always uses 
VP8 video.
-b 614400
specifies the bitrate. Unlike other formats, 
libvpx
expects the bitrate in actual bits, 
not kilobits. If you want a 600 kbps video, multiply 600 by 1024 to get 614400.
-s 320x240
specifies the target size, width by height.
-aspect 4:3
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 
ffmpeg
to autodetect it.
-acodec libvorbis
specifies that we
re encoding with the Vorbis audio codec. WebM always 
uses Vorbis audio.
At Last, The Markup
http://diveintohtml5.org/video.html (42 of 50) [6/8/2011 6:36:23 PM]
C# PDF Page Replace Library: replace PDF pages in C#.net, ASP.NET
page from another PDF file. All information, data on the original page are removed, including text, images, interactive elements, such as links and bookmarks.
excel print to pdf with bookmarks; create bookmarks in pdf
VB.NET PDF Page Replace Library: replace PDF pages in C#.net, ASP.
edit, C#.NET PDF pages extract, copy, paste, C# page with another PDF page from another PDF file text, images, interactive elements, such as links and bookmarks.
bookmarks in pdf files; how to add bookmarks to pdf files
Video - Dive Into HTML5
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 
<video>
element. If you only have one video file, you can simply link to it in a 
src
attribute. This 
is remarkably similar to including an image with an 
<img src="...">
tag.
One video file 
<video src="pr6.webm"></video>
Technically, that
s all you need. But just like an 
<img>
tag, you should always include 
width
and 
height
attributes in your 
<video>
tags. The 
width
and 
height
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 
<video>
tag. It won
t ever be smooshed or stretched out of proportion.
<video src="pr6.webm" width="320" height="240"></video>
By default, the 
<video>
element will not expose any sort of player controls. You can create your 
own controls with plain old HTML, CSS, and JavaScript. The 
<video>
element has methods like 
play()
and 
pause()
and a read/write property called 
currentTime
. There are also read/write 
volume
and 
muted
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 
controls
attribute in your 
<video>
tag.
<video src="pr6.webm" width="320" height="240" controls></video>
There are two other optional attributes I want to mention before we go any further: 
preload
and 
autoplay
. Don
t shoot the messenger; let me explain why these are useful. The 
preload
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 
preload
to 
none
to tell the browser to minimize network traffic.
Here
s an example of a video that will start downloading (but not playing) as soon as the page loads:
<video src="pr6.webm" width="320" height="240" preload></video>
And here
s an example of a video that will not start downloading as soon as the page loads:
<video src="pr6.webm" width="320" height="240" preload="none"></video>
The 
autoplay
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 
http://diveintohtml5.org/video.html (43 of 50) [6/8/2011 6:36:23 PM]
XDoc.Excel for .NET, Comprehensive .NET Excel Imaging Features
page navigation, zooming & rotation; Outlines, bookmarks, & thumbnail Convert Excel to PDF; Convert Excel to HTML5; Extract, copy and pasty Excel pages to another
add bookmarks to pdf online; bookmark pdf acrobat
XDoc.PowerPoint for .NET, All Mature Features Introductions
navigation, zooming & rotation; Outlines, bookmarks, & thumbnail Convert PowerPoint to PDF; Convert PowerPoint to Extract, copy and pasty PowerPoint pages to
pdf reader with bookmarks; delete bookmarks pdf
Video - Dive Into HTML5
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
play()
method during the window
load
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 
autoplay
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:
<video src="pr6.webm" width="320" height="240" autoplay></video>
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 
autoplay
DOM attribute defined 
by HTML5, which is the JavaScript equivalent of the 
autoplay
attribute in your HTML 
markup. [disable_video_autoplay.user.js]
// ==UserScript==
// @name           Disable video autoplay
// @namespace      http://diveintomark.org/projects/greasemonkey/
// @description    Ensures that HTML5 video elements do not autoplay
// @include        *
// ==/UserScript==
var arVideos = document.getElementsByTagName('video');
for (var i = arVideos.length - 1; i >= 0; i--) {
var elmVideo = arVideos[i];
elmVideo.autoplay = false;
}
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 
.ogv
file that you created with Firefogg or 
ffmpeg2theora. The second is an 
.mp4
file that you created with HandBrake. The third is a 
.webm
file that you created with ffmpeg . HTML5 provides a way to link to all three of them: the 
<source>
element. Each 
<video>
element can contain more than one 
<source>
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 
type
attribute on the 
<source>
element.
Here
s the whole thing:
Three (!) video files 
<video width="320" height="240" controls>
<source src="pr6.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="pr6.ogv"  type='video/ogg; codecs="theora, vorbis"'>
http://diveintohtml5.org/video.html (44 of 50) [6/8/2011 6:36:23 PM]
Video - Dive Into HTML5
</video>
Let
s break that down. The 
<video>
element specifies the width and height for the video, but 
it doesn
t actually link to a video file. Inside the 
<video>
element are three 
<source>
elements. 
Each 
<source>
element links to a single video file (with the 
src
attribute), and it also 
gives information about the video format (in the 
type
attribute).
The 
type
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 
.ogv
video file, the container format is Ogg, represented here as 
video/
ogg
. (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.
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
WebM is much the same, but with a different MIME type (
video/webm
instead of 
video/ogg
) and 
a different video codec (
vp8
instead of 
theora
) listed within the 
codecs
parameter.
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
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 
type
attribute.
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
The benefit of going to all this trouble is that the browser will check the 
type
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 
type
attribute values from this example. Otherwise, you
ll need to work out the 
type
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.
http://diveintohtml5.org/video.html (45 of 50) [6/8/2011 6:36:23 PM]
Video - Dive Into HTML5
MIME Types Rear Their Ugly Head
There are so many pieces to the video puzzle, I hesitate to even bring this up. But it
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 
type
attribute on 
<source>
element. But setting the 
type
attribute in your HTML markup is not sufficient. You 
also need to ensure that your web server includes the proper MIME type in the 
Content-Type
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 
httpd.conf
or in an 
.htaccess
file in the directory where 
you store your video files. (If you use some other web server, consult your server
documentation on how to set the 
Content-Type
HTTP header for specific file types.)
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
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 
type
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.)
http://diveintohtml5.org/video.html (46 of 50) [6/8/2011 6:36:23 PM]
Video - Dive Into HTML5
What About IE?
Internet Explorer 9 supports the HTML5 
<video>
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 
<video>
element. It won
magically transform a 
<video>
tag into a Flash object. But HTML5 is well-designed to handle 
this, because you can nest an 
<object>
element within a 
<video>
element. Browsers that 
don
t support HTML5 video will ignore the 
<video>
element and simply render the nested 
<object>
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 
<object>
element altogether.
That last bit is the key to the whole puzzle: HTML5 specifies that all elements (other than 
<source>
elements) that are children of a 
<video>
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 
poster
attribute. The 
poster
attribute of 
the 
<video>
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 
<source>
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.
http://diveintohtml5.org/video.html (47 of 50) [6/8/2011 6:36:23 PM]
Video - Dive Into HTML5
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 
type
attribute on 
<source>
elements confused Android greatly. The only way to get it 
to recognize a video source is, ironically, to omit the 
type
attribute altogether and ensure that 
your H.264+AAC+MP4 video file
s name ends with an 
.mp4
extension. You can still include the 
type
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 
controls
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:
## Theora/Vorbis/Ogg
you@localhost$ ffmpeg2theora --videobitrate 200 --max_size 320x240 --output pr6.ogv pr6.dv
## H.264/AAC/MP4
you@localhost$ HandBrakeCLI --preset "iPhone & iPod Touch" --vb 200 --width 320 --two-pass 
--turbo --optimize --input pr6.dv --output pr6.mp4
## VP8/Vorbis/WebM
you@localhost$ ffmpeg -pass 1 -passlogfile pr6.dv -threads 16  -keyint_min 0 -g 250 
-skip_threshold 0 -qmin 1 -qmax 51 -i pr6.dv -vcodec libvpx -b 204800 -s 320x240 -aspect 
4:3 -an -f webm -y NUL
you@localhost$ ffmpeg -pass 2 -passlogfile pr6.dv -threads 16  -keyint_min 0 -g 250 
-skip_threshold 0 -qmin 1 -qmax 51 -i pr6.dv -vcodec libvpx -b 204800 -s 320x240 -aspect 
4:3 -acodec libvorbis -ac 2 -y pr6.webm
The final markup uses a 
<video>
element for HTML5 video, a nested 
<object>
element for 
Flash fallback, and a small bit of script for the benefit of Android devices:
<video id="movie" width="320" height="240" preload controls>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
http://diveintohtml5.org/video.html (48 of 50) [6/8/2011 6:36:23 PM]
Video - Dive Into HTML5
<source src="pr6.mp4" />
<object width="320" height="240" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf"> 
<param name="movie" value="flowplayer-3.2.1.swf" /> 
<param name="allowfullscreen" value="true" /> 
<param name="flashvars" value='config={"clip": {"url": "http://wearehugh.com/dih5/
pr6.mp4", "autoPlay":false, "autoBuffering":true}}' /> 
<p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or 
<a href="pr6.ogv">Ogg</a>.</p> 
</object>
</video>
<script>
var v = document.getElementById("movie");
v.onclick = function() {
if (v.paused) {
v.play();
} else {
v.pause();
}
};
</script>
With the combination of HTML5 and Flash, you should be able to watch this video in almost 
any browser and device:
Download video as MP4WebM, or Ogg.
Further Reading
HTML5: The 
<video>
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
http://diveintohtml5.org/video.html (49 of 50) [6/8/2011 6:36:23 PM]
Video - Dive Into HTML5
Encoding with the 
x264
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
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
http://diveintohtml5.org/video.html (50 of 50) [6/8/2011 6:36:23 PM]
Search
Documents you may be interested
Documents you may be interested