WelcomeWelcome| 00:04 |
(MUSIC) Well, hello there.
I'm Tom Green, and welcome to up and
| | 00:07 |
running with HTML5 video.
In this course, we'll take a look at
| | 00:11 |
making sense of the confusion that
revolves around the subject of HTML5
| | 00:15 |
video, and then move into creating and
coding HTML5 video.
| | 00:21 |
I'll start by showing you how to create
MP4 and WebM videos by using the Adobe
| | 00:26 |
Media Encoder CC and Firefox, which is a
great tool for creating WebM video.
| | 00:33 |
Then I'm going to show you how to write
the code that adds those videos to an
| | 00:36 |
HTML5 page.
We'll see how to create poster frames,
| | 00:40 |
flash fallback videos, and even how to add
third party video players to a web page.
| | 00:46 |
We'll be covering all of these features
plus plenty of other tools and techniques.
| | 00:51 |
Now, let's get started with up and running
with HTML5 video.
| | 00:56 |
| | Collapse this transcript |
| Using the exercise files| 00:00 |
For this course, standard and premium
members of lynda.com have access to all of
| | 00:05 |
the exercise files.
All you have to do is download them to
| | 00:10 |
your desktop.
In some lessons, there are completed
| | 00:13 |
versions of the exercise in a folder named
Final.
| | 00:17 |
Where you can see a finished version of
what we did, and to compare your results
| | 00:21 |
to mine.
To do the exercises, you will need a video
| | 00:25 |
conversion tool.
Throughout this course, I use the Adobe
| | 00:28 |
media encoder CC.
Or you can use Quick Time Pro or any other
| | 00:33 |
tool that produces and MP four or a web m
file.
| | 00:38 |
You will also need a text or code editor.
To write the HTML five code.
| | 00:43 |
And for testing purposes the latest HTML
compliant versions of Firefox, Chrome,
| | 00:49 |
Opera, Safari, and Internet Explorer nine
if you use a PC.
| | 00:54 |
Also included are the source video files
such as the cable card.mov file shown here.
| | 01:00 |
If you don't have access to these files,
feel free to use your own videos in your
| | 01:05 |
own project.
| | 01:06 |
| | Collapse this transcript |
| Using the challenges| 00:00 |
This course includes several videos called
Challenges.
| | 00:04 |
Challenges are quick, self directed
activities that give you a hands on
| | 00:08 |
opportunity to practice and master what
you are learning, such as creating an .mp4 file.
| | 00:14 |
I'll start each challenge by describing
your core objectives for the activity.
| | 00:19 |
If the challenge involves using any sample
files, I'll tell you where to find them.
| | 00:24 |
I'll even give you a rough estimate of how
much time it took me to complete the challenge.
| | 00:30 |
When you've completed the challenge make
sure to click the matching solution video.
| | 00:35 |
In each solution, I'll show you how I
solve the challenge and give you some of
| | 00:39 |
my thinking along the way.
Again, this is an opportunity to master
| | 00:43 |
what you have been learning and to apply
what you have learned to your own work.
| | 00:48 |
I hope you have fun with them.
| | 00:49 |
| | Collapse this transcript |
|
|
1. How We Got into This MessA short history of web video| 00:00 |
The key to understanding where we are with
HTML5 video, starts with understanding how
| | 00:06 |
we got here.
And that in itself, is a very interesting tale.
| | 00:10 |
In 1995, when the World Wide Web was about
two years old, the first couple of pieces
| | 00:15 |
of media to be streamed were sound tracks
on the now defunct Word Magazine shown here.
| | 00:21 |
And Real Networks streamed a live audio
broadcast of a Yankee-Seattle Mariners
| | 00:27 |
game to the Internet.
With audio handled, next up was video, and
| | 00:32 |
between 1996 and 2000, video arrived.
And, as is so common on the Internet, a
| | 00:39 |
player war broke out.
In 1996, Microsoft released the
| | 00:43 |
ActiveMovie player, which contained
proprietary codecs, RLE and Video1, that
| | 00:49 |
allowed streaming media to be played on
the Internet Explorer 3 browser.
| | 00:53 |
Not to be outdone, Real Networks Released
its proprietary streaming application,
| | 00:59 |
RealPlayer, in 1997 and Apple responded in
1999 with Quicktime 4.
| | 01:06 |
For the next four years, chaos reigned.
Quicktime, Windows Media, and Real
| | 01:11 |
essentially lost the market when they got
blind sided with the growth of the Internet.
| | 01:15 |
Fast internet connections and in many
respects, the standards movement.
| | 01:19 |
At the same time practically everyone had
gotten an internet connection, bandwidth
| | 01:25 |
became cheaper.
The web standards movement started taking
| | 01:28 |
hold and web designers and developers
began looking at web pages as the space
| | 01:34 |
they controlled.
The upshot was that consumers, with more
| | 01:38 |
bandwidth than ever before, were unwilling
to wait for video to download before it played.
| | 01:43 |
And that the guys that designed the sites
realized if a video was to be content in a
| | 01:49 |
page with text running around it.
There was no way they were going to let
| | 01:53 |
Apple's QuickTime plug in tell their
viewers to upgrade to pro.
| | 01:57 |
Or let Microsoft's video player move the
video off the page onto another area of
| | 02:03 |
the screen or wait for their users to
install the real media plug-in.
| | 02:09 |
This was a profound shift in perception
for the design community.
| | 02:12 |
Up to that point, video was cool
technology and cool won out over control
| | 02:18 |
every time.
When developers and designers started
| | 02:20 |
looking at video, not as video but as
content; the move toward the Flash player
| | 02:25 |
and Flash video started.
It also didn't hurt that the Flash player
| | 02:30 |
was quietly being installed in millions of
browsers everyday.
| | 02:34 |
And it's key advantage not only was that
it was cool but that it worked, everywhere.
| | 02:39 |
It was ubiquitous, and soon Flash video
became the preferred video format on the
| | 02:45 |
Web for consumers and producers, including
YouTube.
| | 02:49 |
That was until April of 2010.
When Steve Jobs rocked the multimedia
| | 02:54 |
universe by banning the Flash player from
Apple's iOS devices.
| | 03:00 |
Though the Flash player was available on
Android and Blackberry platforms as well.
| | 03:05 |
With the rise of mobile and the
predominance of Apple in that market,
| | 03:09 |
there wasn't much Adobe or anyone else
could do but expressed righteous indignation.
| | 03:15 |
In November 2011, Adobe withdrew the Flash
player from the market and that included
| | 03:21 |
the Android and Blackberry Flash players.
Though many pendents claimed this
| | 03:26 |
vindicated Apple's stance, the truth of
the matter was the proliferation of
| | 03:30 |
devices from smart phones to tablets was
becoming a tower of Babel.
| | 03:35 |
One trip to Adobe's device central shown
here would give you an overview of the issue.
| | 03:40 |
Hundreds of devices and a myriad of Flash
players and features for the devices made
| | 03:46 |
it difficult at best to cover the mobile
market and to stream video if at all.
| | 03:52 |
With the move out of the Flash player for
mobile Adobe made a key strategic decision
| | 03:57 |
to go all in on HTML 5.
It also didn't hurt that HTML 5 didn't
| | 04:03 |
need a plug-in to play video, that job was
now relegated to the browser.
| | 04:08 |
As you can see video on the web has had a
rather chaotic adolescence.
| | 04:12 |
Competing players, standards, formats and
plug-ins made video a difficult
| | 04:16 |
proposition at best.
Flash levelled that playing field and had
| | 04:20 |
a great five year run.
Then Apple banned the Flash player, Adobe
| | 04:25 |
pulled its mobile version of the Flash
player and HTML 5 appeared.
| | 04:30 |
With its rather attractive no plugin value
proposition.
| | 04:34 |
As you are about to discover the no plugin
value proposition comes with a load of
| | 04:40 |
fine print.
| | 04:41 |
| | Collapse this transcript |
| An even shorter history of HTML5 video| 00:00 |
As you have learned, the growth of video
on the web was a chaotic, unstandardized
| | 00:05 |
mess of repeating codecs, plugins and
players.
| | 00:08 |
Flash calmed the waters until Apple
stirred it up again by banning the Flash
| | 00:13 |
player from iOS devices.
This meant the only place where Flash
| | 00:17 |
video could be expected to play was on
your desktop browser.
| | 00:21 |
Mobile was out of the question.
Which is why HTML5 and it's video tags
| | 00:26 |
suddenly got a lot of attention.
It's promise was that it could play across everything.
| | 00:30 |
Because the browser, not a plugin handled
the playback duties.
| | 00:34 |
Then a funny thing happened on the way to
web video Nirvanna.
| | 00:37 |
The HTML5 specification contains a video
element which offers a standard way of
| | 00:44 |
embedding a video into a web page.
In theory, all you really need to do to
| | 00:49 |
get into the video game is to add the
video source, it's controls, it's width,
| | 00:55 |
and height values along with a Poster
Frame.
| | 00:57 |
Put those together, and you're good to go.
By shifting the burden from plugins to the
| | 01:02 |
browser, the HTML5 working group left the
choice of video format support to the
| | 01:07 |
browser manufacturers.
As a result, the winds of chaos started to
| | 01:11 |
stir yet again.
Google, Firefox and Opera, being all about
| | 01:16 |
open source went in one direction, and
decided to support the WebM format, which
| | 01:20 |
is a royalty free format.
Apple, Google, and Microsoft went in a
| | 01:26 |
different direction and supported the
common MP4 format, which isn't royalty free.
| | 01:33 |
It is licensed by an organization named
MPEG LA.
| | 01:36 |
You may have noticed that Google straddles
both sides of the fence.
| | 01:40 |
Though, Google made it clear, their Chrome
browser would restrict itself to webM
| | 01:44 |
support by 2011, it still hasn't happened.
And the betting is, it won't.
| | 01:48 |
In fact, Firefox is on record as saying,
it is diligently working to add H264
| | 01:55 |
support on it's desktop browser.
When that happens, Opera could be the lone holdout.
| | 02:00 |
Then again, you never know with Google.
What about mobile?
| | 02:03 |
H264 has support in iOS, Android, and
Windows 8 phones and tablets.
| | 02:09 |
You might also be interested in knowing,
this is also the case with the Firefox
| | 02:13 |
mobile browser.
Now, for the bad news.
| | 02:16 |
When it comes to the desktop, HTML5 video
only only applies to modern HTML5
| | 02:22 |
compliant browsers.
The browsers that don't support HTML5 are:
| | 02:26 |
Internet Explorer versions five to eight,
Firefox 2 and 3, Opera versions 9 to 10.1,
| | 02:35 |
and Opera Mobile 10.
The elephant in the room is Internet Explorer.
| | 02:39 |
According to this chart, IE 6, 7 and 8
make up almost 10% of the Internet
| | 02:47 |
Explorer browser usage out there.
How do we deal with them?
| | 02:50 |
Flash, which brings us full circle.
Naturally, you may be wondering, how do we
| | 02:54 |
get out of this mess?
That's the subject of the next video.
| | 02:57 |
I'll see you there.
| | 02:58 |
| | Collapse this transcript |
| How we get out of this mess| 00:00 |
Having learned that internet video
deliveries started with competing formats
| | 00:04 |
and standards.
And is right back where it started with
| | 00:07 |
competing standards and formats, you
wouldn't be faulted for wondering, how do
| | 00:11 |
I get out of this mess.
What you're about to discover is the way
| | 00:15 |
out of this mess is to just keep doing
what you've always done.
| | 00:18 |
Other than a couple of new things here and
there, not a lot has really changed.
| | 00:23 |
What has changed is how we talk about it.
For designers and developers, the move
| | 00:28 |
away from plugins actually does provide
ubiquity of delivery.
| | 00:32 |
When the browser handles the video
playback chores, the code you write will
| | 00:37 |
play your video on any screen.
Ranging from a large screen HD TV in your
| | 00:41 |
den, to the smartphone in your back
pocket.
| | 00:45 |
The code is dead simple to write.
Once you've written your first chunk of
| | 00:48 |
video code in HTML5, you really never need
to write it again.
| | 00:53 |
All you need to do is to swap out the
names of the videos and you're good to go.
| | 00:57 |
Having said that, I agree there is some
pretty complex stuff you can do with HTML5 video.
| | 01:03 |
But if you really look at the code driving
the video, it is no different from what
| | 01:08 |
you have written previously.
YouTube, Vimeo and other streaming
| | 01:13 |
services are now in the HTML5 game.
Which means you really only have to know
| | 01:17 |
where to paste the embed code.
This may sound rather simplistic, but it
| | 01:21 |
is a real option when deadlines are tight
and you really don't have the extra time
| | 01:26 |
to create the WebM and Flash versions of
the video.
| | 01:29 |
As you are about to discover, even the
playback controls, which differ from
| | 01:34 |
browser to browser can be changed.
There are a couple of services out there
| | 01:38 |
that provide a pretty sweet selection of
players, requiring nothing more than a
| | 01:43 |
couple of lines of JavaScript that can be
pasted into an HTML5 page.
| | 01:47 |
For you purists or code jockeys, you can
even design your own controllers,
| | 01:51 |
something we won't be covering in this
course, in order to provide an even higher
| | 01:56 |
degree of customization to the user
experience.
| | 02:00 |
Most important of all, especially for
those of you that create MP4 videos, is
| | 02:04 |
that nothing in the video creation process
has really changed.
| | 02:08 |
WebM shown here may be new to you, but you
will discover the decisions made to create
| | 02:14 |
a WebM video, such as size, frame rate,
aspect ratio, bit rate, quality, are
| | 02:21 |
really no different from those you make
creating MP4 videos.
| | 02:25 |
Now that you understand that not a lot has
changed, let's turn our attention to focus
| | 02:29 |
on the fundamentals of creating the video
that will appear in the webpage.
| | 02:34 |
We'll focus on this in the next chapter.
| | 02:36 |
| | Collapse this transcript |
|
|
2. HTML5 Video PrimerUnderstanding video containers| 00:00 |
When it comes to working with video in the
HTML5 universe, it's common to simply
| | 00:04 |
regard your MP4 or WebM files as being
nothing more than, well, video.
| | 00:08 |
My students tell me this all of the time,
and they're a bit taken aback when I tell
| | 00:12 |
them, in actual fact, they aren't videos,
they're containers.
| | 00:16 |
To understand this, you need to know that
digital video at its absolute basics is
| | 00:21 |
nothing more than a video track and an
audio track in a box.
| | 00:26 |
For example, if you were handed a box, you
have no clue what is inside the box until
| | 00:31 |
you open it.
If the boxes' label says shoes, you sort
| | 00:35 |
of have an idea of what it contains, but
you have no idea about what is in the box
| | 00:41 |
until it is opened.
Video containers are a bit different from
| | 00:44 |
shoe boxes in that they only define how to
store stuff in them, not the kinds of data
| | 00:50 |
stored in them.
Using our shoe box analogy, you know there
| | 00:55 |
are a pair of shoes in this box, because
you can read the label as well as I can.
| | 01:00 |
What you don't know is that if they are
dress shoes or sneakers, because all the
| | 01:04 |
label says is shoes.
When it comes to video, the label on the
| | 01:09 |
box is mp4 or webm and not much else.
Still a video file as I pointed out
| | 01:15 |
earlier, contains multiple tracks.
A video track with no audio attached to
| | 01:19 |
it, plus one or more audio tracks with no
video attached to them.
| | 01:23 |
You can see this if you look at a video's
timeline in a video editing application
| | 01:28 |
such as the one shown here, Adobe Premiere
CC.
| | 01:31 |
The video and audio tracks are always
treated separately.
| | 01:36 |
Even so, these tracks are interrelated.
For example, the audio track can contain
| | 01:41 |
markers that keep it synced with the audio
track.
| | 01:44 |
These tracks can also contain meta data,
such as the aspect ratio of the video, the
| | 01:50 |
title, the author, and copyright
information.
| | 01:53 |
When it comes to containers for video,
there are dozens of them.
| | 01:57 |
Two that you may immediately recognize are
Quick Time and AVI.
| | 02:01 |
Thankfully when it comes to video, there
are only two that we need to use, Webm and MP4.
| | 02:08 |
Some of you may be asking, what about
Flash?
| | 02:11 |
Don't we need to use the .flv, .frv
container for IE7 and IE8?
| | 02:17 |
Nope.
The Flash player recognizes the MP4
| | 02:19 |
container, so no extra work is required on
your part.
| | 02:23 |
The .mp4 container is actually known as
mp4 part 14, and was created by the motion
| | 02:30 |
picture's expert group.
To stream video to a receiving device,
| | 02:34 |
such as the smartphone in your back pocket
or purse, or the HDTV in your den.
| | 02:40 |
This container actually has it's roots in
the .mov format used by QuickTime.
| | 02:46 |
With the rise of plentiful bandwidth, more
powerful computers and devices and the
| | 02:51 |
ability to play full screen HD video in
the browser.
| | 02:55 |
The mp4 container has become a defacto
standard.
| | 02:59 |
Webm may be new to many of you.
This container, usually with the webm
| | 03:04 |
extension is royalty free and open source.
It was developed by Google to specifically
| | 03:10 |
support HTML5 video.
The key issue here is, the only browsers
| | 03:16 |
that support it are Chrome, Firefox, and
Opera.
| | 03:20 |
In fact Webm is the only containers format
supported by Firefox and Opera.
| | 03:26 |
Now that we know what we're dealing with,
let's open the box and let' stake a look
| | 03:30 |
inside and that will be a subject of the
next video
| | 03:33 |
| | Collapse this transcript |
| Investigating codecs| 00:00 |
As you learned in the previous video, a
video resides in the container or box
| | 00:04 |
which holds the audio and video tracks.
In this video, we open the box and poke
| | 00:09 |
around at the contents.
If you have ever shot a RAW video or
| | 00:13 |
produced a RAW audio file and then brought
it over to your computer.
| | 00:17 |
You know the file size is well, massive
doesn't even begin to describe it.
| | 00:22 |
When you flame up a video on your
computer, the video player is very, very
| | 00:27 |
busy because it has to open the container
to look at the audio and the video track.
| | 00:32 |
To figure out how to decode the audio and
the video.
| | 00:35 |
It has to decode the video and start
putting the images up on the screen.
| | 00:39 |
And it has to decode the audio and send
that piece of the puzzle to your speakers.
| | 00:44 |
Which is why the graphic of a key here, it
is the piece of the puzzle that pulls it
| | 00:50 |
all together when it comes to working with
video.
| | 00:53 |
You may notice the word Decode, it is
there for a reason because the two tracks
| | 00:59 |
in the package are compressed in a
particular manner.
| | 01:02 |
Coded and uncompressed, decoded at run
time.
| | 01:06 |
This process is undertaken when the video
is created and uses a codec, which is the
| | 01:11 |
shortened form of Coder, Decoder or Codec.
A codec is an algorithm or mathematical
| | 01:18 |
calculation which tells the player how to
perform steps two and three, decode the
| | 01:23 |
video, decode the audio.
In any video, there are two codecs
| | 01:28 |
employed, one for the audio track and one
for the video track.
| | 01:32 |
In very simple terms, a video codec will
scoot through the video looking for
| | 01:37 |
differences between frames and store only
that data.
| | 01:41 |
The result is a seriously reduced file
size for the video track.
| | 01:46 |
The audio codec does essentially the same
thing for the audio track, but uses a
| | 01:51 |
different bag of tricks to reduce the file
size.
| | 01:54 |
Where the two intersect is the codec type.
Is it lossy or lossless?
| | 02:00 |
Obviously on the web, a lossless codec
where no information is tossed out is
| | 02:06 |
totally impractical.
The files are immense.
| | 02:10 |
Which leaves us with Lossy codecs which
toss out information.
| | 02:13 |
The bad news here is when it comes to
Lossy video and audio codecs, there are
| | 02:17 |
hundreds of choices.
When it comes to HTML video, the good news
| | 02:17 |
is there are only two each for the video
and audio tracks in the container.
| | 02:29 |
On the video side of the codec fence, you
have H.264 and VPA.
| | 02:34 |
On the audio side of the codec fence, you
have AAC and Ogg Vorbis.
| | 02:38 |
It becomes easier for you because you
can't mix and match these two.
| | 02:43 |
When creating an MP4, you have to use the
combination of H.264 and AAC.
| | 02:49 |
Webm uses VPA and Ogg Vorbis.
Now let's take a brief moment and look at
| | 02:55 |
these codecs.
H.264 is also known as, are your ready for this?
| | 03:01 |
MPEG 4 part 10 or MPEG 4-AVC or MPEG 4
Advanced Video Encoding.
| | 03:09 |
Its basic purpose is to provide a codec
designed for everything from low-bandwidth
| | 03:15 |
slow CPU devices, such as the smartphones
in your pocket.
| | 03:19 |
To high-bandwidth fast CPU devices such as
a desktop computer.
| | 03:25 |
This is accomplished through the use of
profiles designed to trade predictable
| | 03:29 |
playback for file size.
For example, a main profile offering great
| | 03:34 |
visual quality will take a long time to
encode, and the resulting file will give
| | 03:39 |
the smartphone a seizure.
The base line profile which is shown at
| | 03:43 |
the bottom works practically everywhere.
The VP8 codec used for Webm comes from ON2
| | 03:50 |
which is the company that gave flash video
the VP6 codec.
| | 03:53 |
That established it as the standard on the
web for so many years.
| | 03:57 |
This codec produces seizure free output
that is comparable to the H.264 main
| | 04:03 |
profile with the playback ubiquity of the
H.264 baseline profile.
| | 04:09 |
On the audio side of the box, you find AAC
which is a contraction for Advanced Audio Codec.
| | 04:15 |
This codec first appeared in 1997 when
Apple chose it as default format for good
| | 04:21 |
old iTunes.
It also explains why iPads and iPhones all
| | 04:26 |
support this format as does flash.
Design to provide better audio quality
| | 04:31 |
than mp3, AAC also offers audio format
profiles.
| | 04:37 |
OGG Vorbis for most of you may be the new
kid on the street, it does exactly what a
| | 04:42 |
codec is supposed to do, compress audio.
But unlike the AAC encoding, it is totally
| | 04:47 |
royalty free.
As you are now coming to understand there
| | 04:50 |
is much more to simply playing a video in
the HTML5 universe.
| | 04:54 |
The choice of codec and compression is the
critical difference between a video that
| | 04:59 |
plays on anything from the desktop
computer to the smartphone in your pocket.
| | 05:03 |
A bad choice results in a bad user
experience.
| | 05:08 |
What if you make the right choice and the
user still has a bad experience?
| | 05:12 |
That is the subject of the next video.
And has everything to do with a waterfall.
| | 05:16 |
| | Collapse this transcript |
| Exploring bitrate| 00:00 |
When I was first starting out on the web,
one of the best pieces of advice I was
| | 00:04 |
ever given was handed to me by Helen
Curtis.
| | 00:07 |
Keep an eye on the pipe.
When it comes to HTML 5 video, the pipe,
| | 00:12 |
bandwidth is the difference between the
user being able to watch the video and
| | 00:16 |
enjoy the experience.
Or the user ripping his or her hair out as
| | 00:21 |
the video stutters along.
How to avoid that is the subject of this
| | 00:25 |
video, and a great way to start
understanding this concept is to visit a waterfall.
| | 00:30 |
Think of the water cascading over the edge
of the waterfall as being your video data.
| | 00:35 |
That water actually gathers in a pool
before it falls over the edge.
| | 00:39 |
And when the video plays that pool is the
buffer and the stream into that pool is
| | 00:44 |
the pipe.
If the pool empties because there is a
| | 00:47 |
clog in the pipe, the water stops flowing.
Then the poll refills, and the water
| | 00:51 |
starts flowing again.
Video that starts and stops and we've all
| | 00:55 |
had this experience is just like this
waterfall.
| | 00:58 |
The buffer empties and everything grinds
to a standstill until it refills.
| | 01:03 |
The primary cause is connection speed.
That video data has to be transferred fast
| | 01:09 |
enough through the pipe to enable smooth
playback.
| | 01:12 |
If it can't, the player is going to drain
the pool and the water stops flowing.
| | 01:16 |
The solution starts with understanding
that physical size is not the issue.
| | 01:21 |
The issue is how much audio and video data
is kicked out of the video over a set
| | 01:27 |
length of time.
This is called the bitrate and is a key
| | 01:31 |
component of the file size calculation of
bitrate times duration.
| | 01:36 |
The bitrate for both the audio and video
tracks determines the overall bitrate,
| | 01:41 |
though most of this will come from the
video track.
| | 01:44 |
This is why presets like this one from the
Adobe Media Encoder are dangerous.
| | 01:49 |
The true number that you should be paying
attention to is the sum of both the audio
| | 01:55 |
and the video rates.
When you create the video you're going to
| | 02:00 |
set this rate and even though the average
US broadband speed is an impressive 6.6
| | 02:06 |
megabites per second.
The average mobile broadband speed is 2.7
| | 02:13 |
megabits per second.
This should tell you that targeting the
| | 02:17 |
lowest common denominator is necessary if
you are creating a single version of the
| | 02:24 |
video for very wide use.
If your target bitrate calculation put you
| | 02:29 |
above the lowest common denominator, there
are a couple of solutions.
| | 02:33 |
The first one is simple, reduce the
physical dimensions of the video.
| | 02:37 |
If you don't expect the user to go full
screen, then change the dimensions to
| | 02:41 |
something like 320 by 240.
Reduce the frame rate, this is solely
| | 02:45 |
dependent on the motion in the video.
If you're subject is a tree in a field,
| | 02:51 |
you can reduce the frame rate to 10 frames
per second, from 30 frames per second.
| | 02:55 |
With a corresponding bitrate decrease, and
no one will really notice.
| | 02:59 |
Of course, if the subject is a Formula One
race car, you can get away with 24 frames
| | 03:04 |
per second.
Another solution is to use variable
| | 03:07 |
bitrate encoding.
Now this may be new to you so let's take a
| | 03:10 |
look at it.
As shown here in the Adobe Media Encoder,
| | 03:14 |
you can actually set a minimum and maximum
bit rate.
| | 03:18 |
Let's just assume the video is a Formula
One car zipping around a test track.
| | 03:23 |
The car will zoom across the video then
until it's next pass you only see the
| | 03:27 |
track, there isn't much happening.
With VBR, Variable Bitrate encoding, the
| | 03:32 |
encoding takes this into account and uses
up to the maximum bitrate when the car
| | 03:37 |
zips past and gears down to the minimum
bitrate when only the track is in the frame.
| | 03:42 |
I wish I could tell you there is a magic
number for bitrate.
| | 03:45 |
There are a lot of factors that go into
preparing video for HTML 5 playback and
| | 03:50 |
bit rate is an important piece of that
puzzle.
| | 03:52 |
Speaking of preparing video, lets move
away from theory and actually create an
| | 03:58 |
MP4 video.
| | 04:00 |
| | Collapse this transcript |
| Creating an MP4 video| 00:00 |
With the theory out of the way, let's put
what we have learned into practice and
| | 00:04 |
encode, an MP4 video for HTML 5 playback.
In this lesson, I will be using the Adobe
| | 00:09 |
Media Encoder, though any video
application that outputs an MP4 video will do.
| | 00:15 |
The reason for my choice is the Adobe
Media Encoder gives you the opportunity to
| | 00:19 |
see much of what I've talked about to this
point in the series.
| | 00:23 |
To get started, we are going to jump into
the encoding.
| | 00:26 |
The first thing you really need to do,
when you start to encode a video, is to
| | 00:30 |
actually open the video to be encoded, and
watch it.
| | 00:34 |
What you're going to look for is image
quality, motion and audio.
| | 00:38 |
These will all factor into the encoding
decisions you will make.
| | 00:42 |
And to get yourself started, open the
CapbleCar.mov file located in your Chapter
| | 00:48 |
2 video 4 folder.
And when it opens, you'll see a rather
| | 00:51 |
pastoral scene of a cable car ride down
the side of Mount Stockhorn in Switzerland.
| | 00:57 |
Before we even play the video, get into
the habit of opening the Quicktime Movie
| | 01:02 |
Inspector, which is found in the Window
menu, right here and taking a look.
| | 01:07 |
Add the specs in the inspector.
We can see this video has been encoded
| | 01:12 |
using a lossless codec.
It contains a stereo audio track, and the
| | 01:16 |
frame rate is set for NTSC broadcast at
29.97 frames per second.
| | 01:21 |
For those of you not sure what NTSC
broadcast is, that's the frame rate of
| | 01:26 |
your TV.
We also know the video's physical
| | 01:29 |
dimensions are 720 by 480.
And though the file size is enormous, four
| | 01:35 |
gig, it is the least of our concerns.
The codec is important.
| | 01:40 |
Remember, there are LASI A lossless codec.
If a lossy codec such as H264 or so
| | 01:47 |
Sorensen to name just two is used in the
.mov file, you will be compressing an
| | 01:53 |
already compressed video.
If you have ever recompressed a jpeg
| | 01:58 |
image, you know this can get ugly.
There's serious image degradation.
| | 02:02 |
Same thing here.
Now, play the video.
| | 02:06 |
By paying attention to motion, you can get
a good idea that the frame rate needs to
| | 02:10 |
stay where it is, and that 2-pass encoding
will help the process.
| | 02:15 |
Also, you need to ask yourself if the
audio track really needs to be in stereo.
| | 02:20 |
In this case, stereo is a nice-to-have,
but not necessary.
| | 02:25 |
By reducing the audio to mono, its bitrate
is also reduced.
| | 02:30 |
This means the saving can be passed on to
the video site of the encoding process.
| | 02:36 |
As you can see you are making encoding
decisions even before you start the process.
| | 02:40 |
Speaking of which let's get this video
encoded.
| | 02:45 |
Let's quit the Quick Time player and open
up the Adobe Media Encoder.
| | 02:51 |
When the encoder opens, you will notice
there are actually two major areas of this interface.
| | 02:57 |
On the left side is an area called the
queue, and on the right side are user presets.
| | 03:02 |
We're not going to pay too much attention
to the presets, we're more concerned with
| | 03:05 |
the queue.
We're going to now add the cable car video
| | 03:08 |
to the queue.
To do that, I'm going to locate the cable
| | 03:11 |
car video in the exercise folder and just
drag it into the queue area of the interface.
| | 03:17 |
Notice the little grabber hand with the
plus sign tells you you're adding content.
| | 03:22 |
And it's in.
You can also add content to the queue area
| | 03:27 |
by clicking the plus sign and navigating
to the files you want to encode.
| | 03:30 |
Or you can even use the file menu and
select add source.
| | 03:35 |
Now that we've got the video in the queue,
what you want to do is click this Match
| | 03:40 |
Source high bitrate to open the Export
Settings dialog box.
| | 03:45 |
When the Export dialog box opens, you want
to come to the format area and select H264.
| | 03:51 |
That's right down here.
There are all kinds of little options in
| | 03:54 |
here, but H.264 is the one you want.
Notice that when you select H264, the
| | 03:58 |
CableCar name changes to an MP4 video.
Which is exactly what we are looking for.
| | 04:04 |
One other thing to look for, is that the
export video and export audio check boxes
| | 04:10 |
are checked.
In fact, even if there is not an audio
| | 04:14 |
track associated with the video, get into
the habit of making sure export audio is selected.
| | 04:21 |
Click the video tab to open the video
encoding options.
| | 04:26 |
And as you can see, there are a lot of
them here.
| | 04:29 |
The first thing you'll see is that the
width and the height of your video are in
| | 04:32 |
place and you do not want to change this.
We want to have it go at the size it is.
| | 04:39 |
The frame rate isn't going to be
problematic, so we're going to deselect
| | 04:42 |
the check box here.
And we're going to change the frame rate
| | 04:45 |
to 30 frames per second, which is normal
for web playback.
| | 04:49 |
The other thing you want to do is right
here with the aspect ratio, you want to
| | 04:54 |
deselect this checkbox.
And you want to select Square Pixels.
| | 04:58 |
Why are you selecting square pixels?
Computers use square pixels.
| | 05:03 |
These are not your standard TVs.
Moving down the dialogue box, we're now
| | 05:08 |
going to pay attention to the profiles.
The first change you want to make is to
| | 05:12 |
de-select the checkbox and in the profile
area select Baseline.
| | 05:16 |
And deselect level, and set the level to
3.
| | 05:22 |
A level is a specified set of constraints
that a level will support within a profile.
| | 05:31 |
This includes specifying the maximum
picture resolution, frame rate and bit
| | 05:36 |
rate that the decoder may use.
We chose level 3, because it is the one
| | 05:40 |
specified for a video.
That is, 720 by 480 with a frame rate of
| | 05:45 |
30 frames per second.
Next up is the bit rate.
| | 05:48 |
This is the all important area.
And it's located in the bit rate settings area.
| | 05:54 |
The first change we want to make is VBR 2
pass.
| | 05:58 |
2 pass encoding basically works this way.
The encoder will take a look at the video
| | 06:03 |
as a whole and notice where all the
changes are made and make note.
| | 06:06 |
And then on the second pass, it will
actually do the compression.
| | 06:10 |
The target bit rate is where you actually
set the rate at how fast the data will download.
| | 06:16 |
Obviously, right now the default is 6 mega
bits, and we're say, looking at a mobile
| | 06:22 |
solution here.
So we're going to have to reduce the
| | 06:24 |
target rate.
Now the target bit rate can be set using
| | 06:27 |
the slider.
But there are two more precise ways of
| | 06:30 |
doing it.
The first way is right here, just click on
| | 06:33 |
the bit rate number and scrub across it.
And we're going to set the bit rate to 1.5.
| | 06:40 |
The other way of doing it is to
double-click the value and actually enter
| | 06:45 |
it using the keyboard.
By doing it by the numbers, you get a high
| | 06:48 |
degree of precision.
So I've entered 1.8, press the Return key
| | 06:52 |
and you notice that these two values have
been applied.
| | 06:55 |
So, how do these two values work?
The video is going to stream at 1.5
| | 06:59 |
megabits per second, but every now and
then if there's nothing happening, it can
| | 07:03 |
go up to 1.8.
But once it slows down, it comes back down
| | 07:07 |
to 1.5.
It's like driving through traffic.
| | 07:10 |
You get to accelerate and decelerate.
The next decision you make is render
| | 07:14 |
quality, which is right here at the
bottom.
| | 07:15 |
And we're going to select use maximum
render quality to ensure we get the best
| | 07:21 |
picture possible.
The next step in the process is to click
| | 07:24 |
the Audio tab.
The key here when you're working with an
| | 07:29 |
H264 video is to use AAC encoding.
As I made clear to you in an earlier
| | 07:35 |
video, these things work in pairs, AAC and
H 264 are the pair.
| | 07:40 |
The sample rate, we're going to change to
44.1 kilohertz per second.
| | 07:45 |
It's not going to affect the quality
whatsoever, but it will decrease the file
| | 07:49 |
size by a little bit.
And of course, we decided to go mono on
| | 07:53 |
the sound, so we're going to get rid of
that.
| | 07:56 |
The next setting that we're going to use
is the bitrate, so the bit rate setting
| | 08:00 |
here is a default 160 kilobits per second,
we're going to reduce it to 80.
| | 08:06 |
What we've got here is an audio bit rate
of 80 kilobits per second, we're going to
| | 08:10 |
stream the video track at one point.
8 kilobytes per second or 1.5 that puts us
| | 08:15 |
well within the 2.3, 2.5 minimum and
maximum for mobile.
| | 08:20 |
One other thing I want to draw to your
attention is right down here at the bottom
| | 08:23 |
of the interface.
Notice that the estimated file size is 25 MB.
| | 08:29 |
Remember we started this file with a 4GB
file.
| | 08:32 |
This is a significant file reduction, and
to be honest with you there really is no
| | 08:37 |
loss in quality.
Click OK to return to the encoding queue.
| | 08:42 |
Now that we've set our values or our
encoding options, we can now create the video.
| | 08:48 |
To do that, what you do is you click this
little green Start Queue button at the top
| | 08:52 |
here to start the process.
You'll notice that there is a preview of
| | 08:59 |
the video, as it encodes.
And your actually going to see this
| | 09:02 |
preview twice, because remember we're
using two pass VBR.
| | 09:06 |
And when this finishes, the interface will
ding at you and we now have a file.
| | 09:12 |
We'll pick this up at the end of the
encoding process.
| | 09:15 |
As you can see, the progress bar shows you
the progress of the encoding and whence
| | 09:19 |
the process finishes, you will hear the
chime.
| | 09:24 |
(SOUND).
When you hear that chime, it's finished
| | 09:26 |
and you can quit the encoder.
And there's our MP4 file.
| | 09:32 |
Notice the file size has changed from 4GB
to 26.5 MB and if I open it in QuickTime.
| | 09:40 |
(MUSIC).
There really is no loss of quality, and if
| | 09:45 |
there is, it's not noticable.
So in this exercise I walked you through
| | 09:48 |
the steps and decisions you need to make
when encoding an MP4 video.
| | 09:53 |
In the next video, we'll create the WebM
version of this file.
| | 09:58 |
| | Collapse this transcript |
| Creating a WebM video| 00:00 |
The new kid on the video block when it
comes to HTML5 video is an open standard
| | 00:05 |
called WebM, and you can learn a lot about
it just by coming to this web page.
| | 00:09 |
But we're going to be concentrating on
creating WebM rather than reading about it.
| | 00:13 |
Though there are a number of applications
that allow you to create a WebM file, I
| | 00:17 |
will be concentrating on two encoders.
The first is an online encoder from
| | 00:23 |
Firefogg.org, which is a Firefox plug-in.
The second is the MiroVideoConverter,
| | 00:30 |
which is available in both Macintosh and
PC versions.
| | 00:33 |
Why two encoders?
I, personally, prefer to control the
| | 00:38 |
encoding process, and tweak the settings
to my satisfaction and Firefogg gives me
| | 00:42 |
that capability.
For those of you who want a simple, point
| | 00:46 |
and click encoding experience, you just
can't go wrong with Miro.
| | 00:50 |
So, let's get started.
And to get yourself started, just open
| | 00:53 |
Firefox and point your browser to
Firefogg.org.
| | 00:57 |
When the page opens, you'll see a little
red box here that says, install Firefogg,
| | 01:01 |
click the link and it will give you some
information about it.
| | 01:07 |
And then you click, Install Now, and you
notice that you're going to have to
| | 01:12 |
restart Firefox to get into Firefogg,
which is not bad.
| | 01:16 |
So, we'll restart the browser and start
creating some video.
| | 01:22 |
Notice that when you come back it tells
you Firefogg is installed.
| | 01:26 |
Click the Make Web Video link to open the
encoder.
| | 01:29 |
The first step in the process of course is
to select the file that you're going to encode.
| | 01:33 |
The file is located in your Exercise
folder.
| | 01:35 |
Click the Select File button and navigate
to your Video 05 Exercise folder for this
| | 01:42 |
chapter and the file that we're going to
be using is CableCar.mp4.
| | 01:47 |
Click the Open button and there it is.
You will see that Firefox has found the
| | 01:52 |
video, extracted the important metadata
from the file And selected a format and a preset.
| | 01:59 |
If this works for you, you can click and
code, but let's take a look under the hood
| | 02:03 |
before we do that.
Click the Advanced Options button.
| | 02:06 |
This is why I like this feature, you
control the process, the software doesn't
| | 02:10 |
control the process.
Let's work our way through this dialog box.
| | 02:14 |
The format has already been selected, it's
WebM VPA Vorbus.
| | 02:18 |
What we're going to do is to enter the
width and the height.
| | 02:21 |
And the width is 720 and the height is
480.
| | 02:26 |
The frame rate that we're going to use
here is the standard video frame rate for
| | 02:29 |
the web, 30 frames per second, because
there's lot of motion in it.
| | 02:33 |
And because this is an HD file, we're
going to use an aspect ratio of 16, nine.
| | 02:38 |
So, you enter 16: 9.
Bit rate we're going to set to 2300
| | 02:44 |
kilobytes per second, which will get us to
play on everything.
| | 02:48 |
Now, let's jack the quality to ten, which
is the best of all.
| | 02:51 |
Key frame interval, ignore.
Let the software do that, but what we are
| | 02:55 |
going to do is select two pass encoding.
And what that will do is, on the first
| | 02:59 |
pass look for changes in the video, note
where those changes are.
| | 03:02 |
And on the second pass, we'll actually do
the compression.
| | 03:06 |
Making sure the audio checkbox is checked,
select mono from the channels, and reduce
| | 03:13 |
the sample rate to 22050.
All this does is reduce the file size and
| | 03:20 |
gives you a small quality reduction but
nothing major.
| | 03:23 |
You will be asked where to save the file
when you click the Encode button.
| | 03:27 |
So, what we're going to do is click
Encode.
| | 03:28 |
It's going to ask you where to save it,
and we'll save it to the the same folder
| | 03:32 |
as the MP4 file and click Save.
Encoding process completes itself.
| | 03:38 |
Firefogg will launch the file in a player
in the browser to let you preview how it
| | 03:44 |
will look.
And here it is, and if you click the Play button.
| | 03:53 |
(MUSIC) So, you've now created a WebM
file, and the resulting WebM file is in
| | 03:58 |
the same folder as the original MP4.
Now, let's go take a look at Miro.
| | 04:05 |
When the window opens you will see that
there is just a great big green Download button.
| | 04:11 |
And the great thing about working with
this converter is you can work with
| | 04:13 |
Windows or Macintosh versions of the
converter.
| | 04:17 |
I'm going to download the Miro converter
for Macintosh and I'm going to open it
| | 04:22 |
when the disk opens.
When it's downloaded, I can just simply
| | 04:26 |
take the bow tie application here, and
drop it right into the application folder.
| | 04:31 |
And you can see that the Miro Video
Encoder is now part of your applications
| | 04:36 |
on the Macintosh.
You can quit Firefox now, and let's start
| | 04:41 |
using the Miro Video Encoder.
So, locate your download, double click it
| | 04:46 |
to launch the application.
When the interface opens, you have two choices.
| | 04:49 |
You can either drag the file to be encoded
right into the interface, or you can click
| | 04:54 |
this Choose Files Link.
In this case, I'm going to click the
| | 04:56 |
Choose Files Link.
Navigate to the Exercise folder > Video 5.
| | 05:03 |
There's the cable car MP4 file.
And I'm going to click open.
| | 05:07 |
And you can see, it appears in the upper
left-hand corner of the interface.
| | 05:11 |
Now, all you need to do is just select a
format.
| | 05:13 |
So, you click the Format button, select
WebM HD, because it is an HD video, and
| | 05:21 |
you can see that not much happens other
than the fact that you can Convert to WebM HD.
| | 05:26 |
Click the Convert WebM HD button.
And the file is now in the process of
| | 05:32 |
being converted.
When the conversion is finished, the file
| | 05:35 |
will sport a little green check-mark and
it's just coming up just now.
| | 05:39 |
There it is.
And to see the file, you click the Show
| | 05:42 |
File Link right here.
And you notice it goes to a folder called
| | 05:47 |
Miro Video Converter.
Now, where is that found.
| | 05:50 |
That's found in the Movies folder.
If you go to your Movies folder, there's
| | 05:53 |
the Mira Video Converter.
If I scroll down, there's the cable car
| | 05:57 |
WebM file.
And if I want to preview the file, all I
| | 06:01 |
have to do is double-click the Cable Car
WebM file, and it will open in Firefox.
| | 06:09 |
(MUSIC) As you can see, there really is no
big difference between the MP4 version and
| | 06:17 |
the WebM version.
So, we're going to close this, and one
| | 06:23 |
thing I'd like to urge all of you to do is
to be aware of the file naming convention
| | 06:27 |
here for the Miro Video Converter.
You will notice that there are two
| | 06:32 |
extensions: Webmhd and .webm.
When you get into coding this stuff, this
| | 06:37 |
could get awfully confusing so one thing I
do is I'll takea this webmhd extension.
| | 06:46 |
And then I will move the file to where
ever it's going to be for my web page.
| | 06:50 |
By the way, by removing that extension,
you avoid potential coding errors when it
| | 06:54 |
comes time to write the code that plays
the video.
| | 06:56 |
And speaking of code, now that you know
how to create an MP4 and a WebM file, the
| | 07:01 |
next chapter shows you the code you need
to know to play your videos.
| | 07:05 |
| | Collapse this transcript |
|
|
3. Showtime: Playing a Video StreamExploring the HTML5 video tag| 00:00 |
In this lesson, we finally roll up our
sleeves and get covered in code up to our elbows.
| | 00:05 |
Before we start, I should point out I will
be using Dreamweaver CC for this portion
| | 00:10 |
of the lesson.
The reason is the code panel allows me to
| | 00:13 |
enlarge the fonts, so you can clearly see
the code you need to know.
| | 00:17 |
As well, the live view, the little globe
right up at the top corner, here, lets me
| | 00:22 |
preview the page containing the video in
those modern browsers that will display HTML5.
| | 00:26 |
If Dreamweaver CC is not your preferred
choice, feel free to use a stand-alone
| | 00:32 |
code editor, such as the Edge Code Editor
from Adobe, Coda or any other tool that
| | 00:37 |
you prefer.
And to get yourself started, open the
| | 00:40 |
index.html file located in your chapter
three video one folder.
| | 00:44 |
When it opens click the Code button to
open the Code panel.
| | 00:49 |
When phased with wiring up their first
HTML5 video, it is common for people to
| | 00:54 |
approach this task with a high degree of
trepidation.
| | 00:57 |
Quite understandable because well, it's
video, and video is not exactly easy.
| | 01:01 |
This truly is not the case with the HTML5
spec.
| | 01:05 |
HTML5 defines a new element, which
specifies a standard way to embed a video
| | 01:11 |
or movie on a web page.
The video element.
| | 01:15 |
The process is fairly simple, you click
once on line 47 of the code right after
| | 01:19 |
the comment and add the video tag.
Close the tag and away you go.
| | 01:26 |
And you have to close the tag for a couple
of reasons.
| | 01:28 |
The first is all of the stuff that relates
to the video and how it plays goes between
| | 01:33 |
these two tags.
The second is, you need a place to provide
| | 01:37 |
fallback content in the off chance the
user is using a browser that doesn't
| | 01:41 |
support HTML5.
To show a video in HTML5, here is all you
| | 01:47 |
need to do to tell the browser, which
video is to be played.
| | 01:50 |
This is done through the source attribute.
Click once after the word video in the
| | 01:55 |
Video tag.
And enter src = "video/CableCar.mp4" and
| | 02:09 |
there you go.
You've now said what the source of the
| | 02:12 |
video is.
Because we're using an MP4, let's test
| | 02:15 |
this in Chrome.
So, what you do is you go up to Preview in
| | 02:19 |
browser and we'll preview it in Google
Chrome.
| | 02:24 |
It's going to ask me to save the changes.
That's fine.
| | 02:28 |
And there's the video in the browser, but
it doesn't (LAUGH) do much else.
| | 02:33 |
It's just sitting there.
The reason is simple.
| | 02:35 |
We haven't given the user any way to
control the video.
| | 02:38 |
Let's return to our code editor and solve
this issue.
| | 02:41 |
So, we're going to close Chrome, and back
to our code and we're going to add one
| | 02:46 |
word after our video source.
Controls.
| | 02:50 |
Save the file and test again in Chrome.
And there are the controls.
| | 03:00 |
(MUSIC) And the video plays.
And on behalf of linda.com, I'd like to
| | 03:06 |
welcome you to the wild, wacky and
wonderful world of HTML5 video.
| | 03:10 |
Though this is the absolute minimum code.
You need to know to play video.
| | 03:15 |
Don't stop here.
The common best practice that has emerged
| | 03:19 |
is not only to give the browser the
physical dimensions of the video but to
| | 03:23 |
also include a type attribute.
So, the browser knows exactly what type of
| | 03:29 |
video is being called.
If it doesn't recognize the MP4 file, it
| | 03:33 |
will let you know.
To accomplish this, delete the content
| | 03:36 |
between the video tags, and enter the
width.
| | 03:41 |
So, we're going to use a width attribute.
And we know the video is 720, and it needs
| | 03:50 |
a height attribute.
480 and it needs the controls.
| | 03:58 |
And we can close off that tag.
Now, what we're going to do, is we're
| | 04:01 |
going to use a source tag.
So, we type that car, source, src equals
| | 04:12 |
video, which is the location of the
folder, /cablecar.mp4, type = "video/mp4.
| | 04:29 |
Close the partition mark.
Close the tag, and I've got an extra close
| | 04:33 |
tag here, so let's get rid of that.
And here we go.
| | 04:36 |
So, what we've done is we've said edit the
videos width is 720 by 480.
| | 04:40 |
Show the controls, and the source of the
video is CableCar.mp4, and the type of the
| | 04:46 |
video is an mp4.
Let's save this, Ctrl+S or Cmd+S.
| | 04:52 |
And Preview in Google Chrome.
And you can see, it looks exactly the same.
| | 04:59 |
I'm going to close the video here.
By setting the height and width attributes
| | 05:05 |
the space required for the video is
reserved when the page is loaded.
| | 05:08 |
However, without those two attributes, the
browser doesn't have a clue what the size
| | 05:13 |
of the video is and can't set aside the
appropriate space for it.
| | 05:17 |
The effect will be that the page layout
will change during loading while the video loads.
| | 05:23 |
Another best practice is to insert text
content between the video tags for
| | 05:28 |
browsers that do not support the video
element.
| | 05:31 |
This means there will at least be
something to tell the user what is going on.
| | 05:35 |
In this case, I would enter a Return at
the end of the source attribute and type
| | 05:40 |
in Your browser doesn't support HTML5.
So far, so good.
| | 05:48 |
Let's save the file.
And this time I'm going to open the file
| | 05:56 |
or the page in Firefox.
And you can see that we get a rather nasty
| | 06:03 |
error message telling you not only can't
it find the supported format, but it also
| | 06:07 |
can't find the mine type.
What this tells you is the MP4 video in
| | 06:12 |
the source tag won't play in Firefox and
for that matter, it's won't play in Opera.
| | 06:17 |
In fact, Opera will only show the controls
and if you inspect the element you will
| | 06:23 |
see Opera has totally ignored the source
tag.
| | 06:26 |
This is not a good thing.
Now, that you've had a chance to explore
| | 06:30 |
the code you need to know, you have also
discovered that your video will only play
| | 06:35 |
in certain browsers.
This is not a huge issue and we'll deal
| | 06:39 |
with this in the next video.
| | 06:41 |
| | Collapse this transcript |
| Supporting multiple video formats| 00:00 |
In the previous video, you discovered a
rather nasty HTML5 gotcha.
| | 00:05 |
Not all the browsers will play your file.
In this exercise, we'll turn this gotcha
| | 00:09 |
into a non-issue.
The root of the problem lies in the fact
| | 00:12 |
that video playback has been left to the
browsers.
| | 00:15 |
And the current state of this decision is
competing video format.
| | 00:20 |
Safari, chrome, and IE will play an MP4,
while Chrome, Opera and Firefox will play
| | 00:25 |
WebM are ogg files or ogg.
Let's get to work solving this issue
| | 00:30 |
providing the browsers with multiple video
sources.
| | 00:33 |
To do so, open the index.html file located
in your chapter 03 video 02 folder.
| | 00:40 |
As you can see, there is already a source
tag for the mp4 version.
| | 00:43 |
Our task is to also add the WebM and ogv
source files to the lineup.
| | 00:49 |
We also need to add the respected file
attributes, so, the browser knows what
| | 00:53 |
type of video it is, and can skip over the
ones it can't play.
| | 00:57 |
Rather than give you a great big typing
lesson, I'm going to give you a little
| | 01:00 |
teacher trick.
Select the source attribute here and copy
| | 01:05 |
it to the clipboard.
Press once and paste the source into place.
| | 01:10 |
And all we have to do is change the
video's extension to WebM, and the type to WebM.
| | 01:21 |
Now we're going to deal with the ogv file,
which was primarily used by Opera.
| | 01:25 |
Again, we paste, and this time there's a
slight different in the extensions.
| | 01:31 |
For the video, it is ogg, but for the
type, it is not ogg, its ogv.
| | 01:39 |
Save the file, command or control s, and
preview in Google Chrome.
| | 01:48 |
And the video plays.
And at this time, we'll preview in
| | 01:52 |
Firefox, and there's the video.
As you can see, there are no shall we say, issues.
| | 02:01 |
It just works.
Let's return to the code, because there
| | 02:04 |
are a couple of things you need to know.
The order of battle here is really important.
| | 02:09 |
Get into the habit of listing the MP4
first, this file right here.
| | 02:14 |
This should be the first one in the order.
This has nothing to do with format
| | 02:19 |
preference, but everything to do with a
known bug in the iPad.
| | 02:22 |
If the iPad doesn't see the MP4 file at
the top of the order, it just stops, and
| | 02:27 |
that's the end of that video.
The WebM format is next up, simply because
| | 02:32 |
it has a slightly higher quality than an
ogg file.
| | 02:35 |
Thus, the lowly ogg container brings up
the rear.
| | 02:38 |
If Opera or Firefox see this, they will
play the WebM version.
| | 02:43 |
Because it is the first format they
recognize.
| | 02:46 |
As you may have guessed, play back order
is critical.
| | 02:49 |
The browser will play the first format it
recognizes, and if there is nothing there
| | 02:53 |
that it can use, the fall back text , your
browser doesn't support HTML 5 video, will
| | 02:59 |
be displayed.
The other aspect of the code is the
| | 03:02 |
closing slash added at the end of the
source tag.
| | 03:05 |
Though the source tag in HTML5 is self
closing, my colleague, Steve Hefferman
| | 03:11 |
here at Lynda, mentioned a couple of years
back that though not critical, he had
| | 03:15 |
encountered browser issues where the
browsers don't close the tag correctly.
| | 03:20 |
He discovered adding a slash solves that
issue.
| | 03:23 |
It isn't going to break anything, and I've
been using it ever since.
| | 03:26 |
Now that we've wired up the html in order
to have it play anywhere at any time on
| | 03:30 |
anything, let's turn our attention to
pre-loading video.
| | 03:34 |
| | Collapse this transcript |
| Preloading video| 00:00 |
As you discovered earlier in this course,
video will play once enough data from a
| | 00:04 |
video is in the buffer to ensure smooth
playback.
| | 00:08 |
In this exercise, we look at a rather
confusing HTML5 video feature, the Preload attribute.
| | 00:14 |
On the surface, you would think adding it
would be a no brainer.
| | 00:18 |
Preload a video and no problems with
playback.
| | 00:20 |
It's all there.
Not so fast.
| | 00:22 |
You may be actually making the experience
worse.
| | 00:25 |
Preloading is a no brainer on the desktop
where bandwidth is copious.
| | 00:30 |
But when it comes to mobile, you may be
exposing your users to a world of
| | 00:35 |
bandwidth hurt.
Then again, maybe not.
| | 00:38 |
It's all up to you.
The upside to preloading is video data is
| | 00:42 |
loaded as soon as the page is loaded
without waiting for the user to click the
| | 00:46 |
Play button.
Without it, the user has to wait until the
| | 00:49 |
video fills the buffer.
The downside to preloading Is, the video
| | 00:53 |
data is loaded every time the page is
viewed, even if the user never watches
| | 00:58 |
your video.
There is where mobile users wind up in
| | 01:01 |
their world of bandwidth hurt.
Because the data is transferred to their
| | 01:04 |
devices and this can get very expensive.
In this exercise, we're going to take a
| | 01:10 |
look at the Preload attribute.
And to get yourself started, open the
| | 01:14 |
index.html file found in the chapter 3
video 03 preload folder, and inside that
| | 01:21 |
is the start folder.
When the file opens, click once after the
| | 01:27 |
controls parameter, right here, and enter
preload=" " .
| | 01:35 |
There are three possible values that can
be added between the quotation marks.
| | 01:40 |
They are None, Auto, and Metadata.
Let's take a look at what each one does.
| | 01:46 |
The first one we're going to take a look
at is None, so enter the word None between
| | 01:50 |
the quotation marks.
Save the file and open the file in the browser.
| | 01:55 |
As you can see, the browser doens't load
any of the video.
| | 02:02 |
Even if there is content in the first
frame of the video, you don't see it
| | 02:07 |
because the browser has been told to load
nothing.
| | 02:10 |
Let's return to the code and change the
word None to Auto.
| | 02:15 |
So we'll select the word None, change it
to Auto, save the file and take a look at
| | 02:21 |
it in the browser.
So we'll open it in Google Chrome again.
| | 02:25 |
And there's the video.
When the page opens in the browser, life
| | 02:28 |
is a wonderful thing.
The video appears and starts loading.
| | 02:31 |
In this case, the browser's been told not
to concern itself with any bandwidth
| | 02:35 |
concerns and to carry on as usual.
Now it gets weird at this point.
| | 02:40 |
By leaving the preload decision to the
browser, It will do what it can to show
| | 02:43 |
the content.
This is not something that makes the Apple
| | 02:47 |
folks happy campers, so they have decided,
when it comes to iOS, to never preload
| | 02:52 |
video content.
The reason is not arrogance, but the
| | 02:55 |
simple fact that the data download hit
Into a mobile device can be expensive.
| | 03:01 |
What you can gather from this is iPhones
and iPads ignore the auto setting.
| | 03:06 |
The third option is Metadata.
Let's return to the code and enter the
| | 03:11 |
word Metadata.
If you save and test this in the browser.
| | 03:19 |
You really can't see any difference
between it and the Auto parameter.
| | 03:23 |
So what's the difference?
What is happening here is the browser if
| | 03:27 |
being told to display only the first frame
of the video as well as the metadata.
| | 03:33 |
Which includes such things as the physical
dimensions of the video and it's duration.
| | 03:38 |
The neat thing about this is it can speed
up buffering time but not by much.
| | 03:43 |
This parameter is helpful when you want
the browser to know how big the video is.
| | 03:47 |
So the browser can set aside the screen
real estate for the video.
| | 03:51 |
One final gotcha with the preload
attribute.
| | 03:55 |
All mobile devices ignore it, instead they
will play the video only when the user
| | 04:01 |
starts playback.
The bottom line here is, the browsers will
| | 04:04 |
pay attention to this attribute on the
desktop, so it's use is optional.
| | 04:09 |
Now that we've dealt with preloading,
let's take a look at it's close cousin in
| | 04:12 |
the next video, autoplay.
| | 04:14 |
| | Collapse this transcript |
| Setting up autoplay| 00:00 |
If there is one aspect of video playback
guaranteed to drive me up a wall, across
| | 00:07 |
the ceiling and down the other wall, it is
video that plays automatically.
| | 00:11 |
There is a time and a place for this
feature and it is to be added with a lot
| | 00:14 |
of careful thought.
Before hand.
| | 00:17 |
Obviously, autoplay works best on such
sites as YouTube and Vimeo.
| | 00:22 |
The sole purpose of being there is to
watch video so the decision to enable auto
| | 00:26 |
play is relatively easy to make.
Even then, autoplay is not a default on
| | 00:32 |
those sites.
On the other hand, if you have designed a
| | 00:35 |
page where there are a number of videos or
a video and a separate commercial
| | 00:40 |
somewhere else on the page.
The user is not exactly going to be a
| | 00:45 |
happy camper when the video and the ad
play simutaneously.
| | 00:50 |
Still there is an Autoplay attribute and
I'm going to show you how to add it.
| | 00:54 |
To add an Autoplay attribute to a video,
open the index.html file located in the
| | 00:59 |
Chapter 3, 04 Autoplay Video folder and it
is inside your Start folder.
| | 01:05 |
To add an Autoplay attribute, what you do
is you click at the end of the Preload
| | 01:09 |
area here and enter the word Autoplay.
That's it.
| | 01:15 |
This attribute is a bullion value.
Meaning it is either on or it's off,
| | 01:21 |
there's no way in between.
By entering the word Autoplay, turns it on.
| | 01:24 |
If the word Autoplay is not there,
Autoplay is off.
| | 01:28 |
Let's save and test the file.
(MUSIC) Aggravating isn't it?
| | 01:35 |
There are a couple of things you also need
to know about this attribute.
| | 01:38 |
On the desktop, there might be a slight
delay before the video starts playing.
| | 01:45 |
This is simply the browser filling the
buffer to ensure smooth playback.
| | 01:49 |
When it comes to mobile, Autoplay is
always ignored both on IOS and Android devices.
| | 01:56 |
This makes sense because of the data
charges that inevitably result in the
| | 02:00 |
mobile space.
The bottom line is to use Autoplay
| | 02:03 |
sparingly if at all.
In the next video, we're going to add a
| | 02:07 |
poster frame to our video.
| | 02:09 |
| | Collapse this transcript |
| Working with poster frames| 00:00 |
There are going to be occasions where the
video is not set to auto-play, and the
| | 00:04 |
first frame of the video is nothing more
than a black box, and that is all the user sees.
| | 00:09 |
A black box.
This is a common scenario, and might be a
| | 00:12 |
bit confusing for your users.
This is a great use case for the addition
| | 00:16 |
of a poster frame to the project, and
that's what we're going to do in this excercise.
| | 00:20 |
To get yourself started, open the
index.html file, which can be found in
| | 00:24 |
your chapter three exercise folder.
The index.html file is in the 05 poster
| | 00:30 |
frame folder, and inside that is another
folder named start.
| | 00:33 |
When the file opens click once at the end
of the pre-load attribute and enter the
| | 00:37 |
following, poster equals Images, which is
the folder where the poster frame is
| | 00:44 |
located, or the poster image.
And it's called Poster.jpg.
| | 00:49 |
Close the quote, save the file and let's
test it in the browser.
| | 00:55 |
And you can see, there's the poster frame.
Okay, we're going to return back to the
| | 01:00 |
code and set a pre-load attribute for
metadata to Auto.
| | 01:06 |
Save the code.
And again we're going to open the file in
| | 01:09 |
a browser.
And it pretty well looks the same, in both
| | 01:14 |
cases the use of a poster image buys a
small amount of time for the browser to
| | 01:20 |
start filling the video buffer.
Where did this poster frame come from?
| | 01:24 |
I simply grabbed a screenshot of the video
playing in the Quicktime player Opened it
| | 01:28 |
in the image editor and entered the text.
I then saved the file as a JPG image and
| | 01:32 |
called it into the file by using the
poster attribute in the HTML.
| | 01:37 |
Another aspect of the poster frame is it
does not have to be a JPG image.
| | 01:41 |
You can use a PNG or a GIF image, and
because it really is nothing more than a
| | 01:46 |
placeholder, even an animated GIF.
Just be sure the image chosen relates to
| | 01:51 |
the content in the video.
Finally, what about mobile?
| | 01:54 |
The poster frame attribute, when it comes
to mobile works across the entire spectrum
| | 01:59 |
of Android and iOS devices that are HTML 5
capable having covered all of the major
| | 02:06 |
aspects of the HTML video tag there is
still one piece of the puzzle missing.
| | 02:10 |
What about browsers that aren't able to
display videos in the HTML5 space?
| | 02:15 |
This is where flash comes in.
And that is the subject of the next video.
| | 02:19 |
| | Collapse this transcript |
| Flash fallback| 00:00 |
When you consider Internet Explorer 8
makes up almost 20% of the current
| | 00:04 |
browsers in use and it can't render HTML5,
let alone HTML5 video, preventing that
| | 00:10 |
vast number of potential users from
viewing your work might not be a great idea.
| | 00:16 |
The problem is, how to have your video
play in an html 5 page in IE8 or other non
| | 00:22 |
HTML 5 browsers.
The answer is Flash.
| | 00:26 |
Taken at face value, that seems totally
contradictory because the HTML5 video tag
| | 00:32 |
is so popular due to the move away from
the Flash player.
| | 00:35 |
Dig deeper and it makes eminent sense.
Because of the sheer ubiquity of the Flash
| | 00:41 |
player on desktop browsers.
For those of you who have never used
| | 00:44 |
Flash, let alone wired up a Flash video
project, there is one seriously neat
| | 00:50 |
solution available from Adobe.
The open source media framework, OSMF, player.
| | 00:56 |
It is dead simple to use, and requires no
knowledge on your part other than how to
| | 01:01 |
upload a video to a web server.
And how to copy and paste.
| | 01:06 |
Lets get started.
Open up a browser and point it to
| | 01:09 |
osmf.org, and you will be taken to this
page.
| | 01:12 |
Though it may look a bit confusing at
first glance, the only things you need to
| | 01:16 |
know are the URL where the video's
located.
| | 01:19 |
That could be your website or customer's
website.
| | 01:22 |
The URL where the poster frame is located,
which is usually in the same location as
| | 01:26 |
the video, the dimensions of the video.
Those are the only three things you need
| | 01:30 |
to know.
Now, if you want to work along with me, I
| | 01:32 |
have already uploaded the video and poster
frame to my site, TomOnTheWeb 4.CA.
| | 01:38 |
What you want to do, is select the text
that is in the video source area and enter
| | 01:42 |
in http://www.tomontheweb4.ca.
/fallback/cablecar.mp4.
| | 01:52 |
That is the source of the video.
The player now knows where to find the
| | 01:57 |
video, and the neat thing about this is,
the Flash player can play the MP4 file, so
| | 02:03 |
no transcoding is needed.
You won't be using a streaming server, so
| | 02:06 |
your answer to the HTTP streaming question
is no.
| | 02:10 |
In the width and the height areas enter
the width of the video, 720 pixels, and
| | 02:16 |
the height of the video, 480 pixels.
Leave the control bar docked, and don't
| | 02:21 |
autohide the control bar.
We obviously have a poster frame, and it
| | 02:25 |
is in the same location as the video, so
it would be http://www.tomontheweb4.ca/Fallback/Poster.jpg.
| | 02:33 |
tomontheweb4.ca/fallback/poster.jpg.
Include the play button overlay?
| | 02:38 |
Yes.
But don't add Auto Loop and Auto Play.
| | 02:41 |
Auto Loop means that the video will just
start playing once it finishes.
| | 02:46 |
And Auto Play well we've talked about the
evils of that in an earlier video.
| | 02:52 |
You're done.
What you do next is you click the Preview
| | 02:55 |
button at the bottom of the interface and
you should see the poster frame and some
| | 03:02 |
embed code.
This little button you see here is the
| | 03:06 |
play button overlay.
The beauty of this is you are given the
| | 03:10 |
object and the embed code, and what you
need to do is select it all.
| | 03:14 |
Select all of that text in that embed code
area and copy it to the clipboard.
| | 03:20 |
Next, we're going to go to Dream Weaver
and we're going to open the index HTML
| | 03:24 |
file, located in the 03 less than folder,
video 6 and there's a start folder in
| | 03:30 |
there, and inside that is the index HTML
file.
| | 03:33 |
And when it opens, this is what you're
going to be looking at.
| | 03:36 |
Now seeing as how we're going to have this
video play everywhere, we no longer need
| | 03:39 |
to tell the user they're essentially out
of luck.
| | 03:42 |
Select all of the text in line 53.
And paste the contents of the clipboard
| | 03:49 |
into that line.
Save the file and if we save the file and
| | 03:54 |
open it in a non HTML 5 browser, the video
will play.
| | 03:59 |
So there you have it.
You are now up and running with HTML5 video.
| | 04:03 |
You've written a code that gets you in the
game and even added a flash fall back for
| | 04:06 |
non HTML5 browsers.
In the next lesson we're going to look at
| | 04:10 |
alternatives to rolling your own HTML5
code.
| | 04:14 |
| | Collapse this transcript |
| Challenge: Shooting and encoding HTML5 video| 00:00 |
In this challenge, what we're going to do
is apply everything we've learned in
| | 00:04 |
chapters two and three to getting a video
up on a web page.
| | 00:08 |
The first thing I want you to do is shoot
no more than 30 seconds of video using a
| | 00:12 |
cell phone, a smartphone, even your still
camera.
| | 00:15 |
If you don't have access to a video
camera, I've included a file that I shot
| | 00:20 |
on the beach the other night, here in
Carpenteria, you can use that.
| | 00:24 |
The video is to be re-sized to 720 by 480
and you are going to write the HTML5 code
| | 00:31 |
that will play the video in a browser.
In fact, you're going to open the page in
| | 00:35 |
Google Chrome, and that's the name of that
tune.
| | 00:38 |
This challenge should take you no more
than ten minutes to complete from starting
| | 00:42 |
with the video to getting it up on a page.
| | 00:44 |
| | Collapse this transcript |
| Solution: Shooting and encoding HTML5 video| 00:00 |
So the other night I'm in Carpinteria, and
I'm walking along the beach and I thought
| | 00:04 |
I'll shoot 30 seconds of beach video.
(NOISE) So I've got 30 seconds of beach
| | 00:10 |
video, and as I pointed out in lesson two,
one of the first you want to do.
| | 00:14 |
Is take a look in the Movie Inspector, and
I find out kazart /g, it's way too big.
| | 00:19 |
It's 1280 by 720, when I want 720 by 480.
I also notice that the data rate is huge.
| | 00:26 |
So we're going to have to slow this thing
down, and that means I'm going to have to
| | 00:30 |
pop over to the Adobe Media Encoder and
re-encode this video.
| | 00:34 |
So I'm going to pop over to the Media
Encoder.
| | 00:36 |
So, I'm going to click the plus sign here,
navigate to the chapter three folder,
| | 00:40 |
where my challenge is.
I put the video in there, and there's that
| | 00:43 |
beach MP4.
Click Open, and there it is.
| | 00:48 |
Now, I'm going to have to take the bit
rate down, and change the size.
| | 00:51 |
So, I click the preset to open up the
export settings.
| | 00:54 |
I've got H264.
I've got audio and video.
| | 00:57 |
This is good.
It's going to rename it to beach1 MP4.
| | 01:00 |
I'm not too upset about that.
But what I need to do is change the video settings.
| | 01:06 |
So I came to the video, and I deselect it,
the width and height, to keep this little
| | 01:11 |
change selected, and I just change the
width to 720.
| | 01:18 |
And it changed it to 405, which is fine.
And I'm going to take it to 30 frames per second.
| | 01:26 |
And of course I've got square pixels.
I need that for the aspect ratio.
| | 01:30 |
And the bit rate settings are going to be
a little bit different.
| | 01:34 |
I want VBR, 2 pass and I'm going to take
this down to 1.5 which we used in one of
| | 01:40 |
the Videos.
And I'm going to take this maximum rate.
| | 01:45 |
Remember what the maximum is, it's as far
as it will go, to 1.8.
| | 01:50 |
And I'm going to come to the audio.
And, well, I just shot that with my Apple
| | 01:55 |
iPhone, so that means that it's going to
record it in stereo.
| | 01:58 |
So I'm going to knock the sample rate
down, and I'm going to knock the channels
| | 02:02 |
from stereo to mono.
Notice that the file size by the way, has
| | 02:06 |
plummeted to four megabytes from the
original 26 megabytes.
| | 02:10 |
Now that everything is fine, I'm going to
take one last quick pass through.
| | 02:13 |
I'm a nervous nellie when it comes to
working with these.
| | 02:16 |
And I want to make sure that everything
works.
| | 02:20 |
So I make sure that the size works, the
framerate's fine, whoops, So you just move
| | 02:25 |
the mouse and you get all kinds of
problems.
| | 02:27 |
VBR 2 pass, 1.5, 1.8, this is good.
And the audio sample rate is fine, it's AAC.
| | 02:33 |
Okay, and I missed the bit rate.
So I'm going to drop the bit rate.
| | 02:36 |
Because it's mono, I can drop it down to
80 kilobits per second.
| | 02:41 |
Now, I'm a happy camper.
Click Okay.
| | 02:48 |
Click the green button here to do the
encode and this is 30 seconds of video and
| | 02:53 |
you'll notice that it goes really fast.
(NOISE) It dings at me, fine, I can quite
| | 03:01 |
the encoder.
And I can kick out of my movie.
| | 03:05 |
Then I came to Dreamweaver and opened up
the index.html file that's located in the
| | 03:11 |
03 > 07_Challenge folder.
And now all I gotta do is write the code
| | 03:17 |
that will play the video, so I'm going to
start with video tag, like that, and start
| | 03:23 |
adding some parameters.
Width Equals 720, (SOUND) height equals
| | 03:32 |
480, and of course we need some controls.
And we can close that off, and then we're
| | 03:38 |
going to do the source of the video.
So we need to do the carrot, type in the
| | 03:42 |
word source, and then we type in src.
Now, this is what I love about Dreamweaver.
| | 03:47 |
You see this little link here?
All I have to do is click it, it will ask
| | 03:52 |
me to browse for the file and there's the
file that we created from the Adobe Media Encoder.
| | 03:58 |
So I don't have to worry about spaces and
stuff like that.
| | 04:00 |
I love this little feature in Dreamweaver.
Click open, there it is and of course I've
| | 04:05 |
got to enter the type.
And the type is video, forward slash mp4.
| | 04:13 |
We close off that, and we should work with
non compliant browsers, so we'll just add
| | 04:17 |
a p-tag here.
Your browser doesn't support HTML 5.
| | 04:27 |
And we'll just close off that tag and
we'll close off the video tag.
| | 04:32 |
Save the file and let's test it in Chrome.
(NOISE) And there you go.
| | 04:42 |
30 seconds of video shot on an Iphone
fixed up on Abode media and Cobra and
| | 04:48 |
quickly wrote the code that makes a play
inside a webpage and here it is inside of
| | 04:53 |
Google Chrome
| | 04:54 |
| | Collapse this transcript |
|
|
4. There Are AlternativesUsing the Dreamweaver CC video wizard| 00:00 |
In the previous chapter we walked through
the code you need to know to wire up an
| | 00:04 |
HTML5 video project.
In this chapter we're going to look at
| | 00:07 |
alternative methods for adding HTML 5
video to your pages.
| | 00:11 |
Those methods range from the rather neat
feature in Dreamweaver to a rather popular
| | 00:15 |
third party player.
Let's start with Dreamweaver CC, and to
| | 00:19 |
get yourself started, open the index.html
file located in the chapter four, video
| | 00:24 |
one folder.
Now, when the file opens I want you to do
| | 00:27 |
something very quickly because it's
going to wind up with all kinds of crazy paths.
| | 00:31 |
We're going to define a site.
So, what you do is, you come to the Site
| | 00:34 |
menu, select New Site.
And we'll just call this one HTMLvid, and
| | 00:42 |
we're going to save it to our Start
folder.
| | 00:44 |
So, the local site folder will be the
start folder for this exercise.
| | 00:47 |
Now, it's sitting on my Desktop.
And I've now identified the start folder.
| | 00:56 |
I'll click Choose.
Click Save.
| | 00:58 |
And you can see, there's all the files.
Now, the plan here, is to add the
| | 01:03 |
CableCARD video into the vid holder, div,
shown here in the code.
| | 01:09 |
So, you click once between these two div
tags and let's add a video.
| | 01:13 |
Now, Dreamweaver has had the ability to
insert HTML5 video since the CS5 version
| | 01:20 |
of the application.
In typical Dreamweaver fashion, there are
| | 01:24 |
four ways to accomplish this task.
If you click on the Insert panel here,
| | 01:30 |
you'll see that there is a pop down that's
got all kinds of stuff that you can insert.
| | 01:35 |
If you select Common, you can see that
HTML5 video is number two on the list.
| | 01:40 |
If you come back to the pop down and
select Media, again HTML5 is number two on
| | 01:46 |
the hip parade.
It's where you can insert HTML5 Video, and
| | 01:50 |
it's right here in the Insert menu.
And you can see, again, it is number two
| | 01:55 |
on the hit parade.
And, the fourth area is right here, with
| | 01:58 |
the Media command, and you can see HTML5
Video is number two on the hit parade on
| | 02:04 |
that one as well.
And seeing as how we're already here,
| | 02:07 |
select that.
Now, I'm going to just open up the Code
| | 02:11 |
view a little bit more here so you can see
what's going on.
| | 02:13 |
Don't worry about the design.
If you look at the Code panel, you will
| | 02:17 |
see the video tags and the control
attribute have been added to the code.
| | 02:21 |
Over on the design side of the page, you
can see it now sports a video icon.
| | 02:26 |
You also might notice down below that the
Properties panel has changed as well.
| | 02:31 |
If you take a look at it, it contains all
the attributes and so on to get a video playing.
| | 02:36 |
Now, what I'm going to do is I'm going to
tear the Properties panel off here and
| | 02:39 |
move it to the middle of the screen in
order to keep us focused on what needs to
| | 02:43 |
be done.
The first thing we need to do is to add a video.
| | 02:47 |
Click the Browse button, which is this
little folder here beside the source and
| | 02:52 |
if you navigate over to your Start folder
where the site has been defined, open the
| | 02:56 |
Video folder, we can add the CableCar mp4
video to the list.
| | 03:01 |
Now, we add this MP4 as the source because
if you remember the iPad, if it doesn't
| | 03:07 |
seen an MP4 file at the top of the order,
it won't play the video.
| | 03:11 |
The other thing to note is the Alt Source
1.
| | 03:14 |
It now sports the OGV version of the
video.
| | 03:17 |
This needs to change because the next file
in the order should be the better quality
| | 03:21 |
WebM version of the file.
Let's clear that out and add the WebM version.
| | 03:24 |
To do that, we can just select the text,
press the Delete key to get it out of
| | 03:29 |
there and browse over to the CableCar
3.webm file.
| | 03:36 |
Now, we can add the OGV resource as the
alt source to.
| | 03:40 |
And click the Browse button, there's the
OGV version, click Open and it's there.
| | 03:46 |
Now, if you take a look at the source
code.
| | 03:48 |
I'm going to close the Split view here.
You should notice that Dreamweaver has not
| | 03:55 |
only added the video, but it has also
added the mime types as well.
| | 03:59 |
Next, up we have to deal with the width
and height of the video.
| | 04:02 |
Dreamweaver doesn't add these values.
So, you have to manually add them.
| | 04:06 |
Click once in the width area and enter
720.
| | 04:10 |
Click once in the height area and enter
480.
| | 04:15 |
If we go to the Split view, you'll notice
that the video has now grown to reflect
| | 04:21 |
these dimensions.
With that out of the way, let's add a
| | 04:25 |
poster frame.
In the poster area, right under the
| | 04:29 |
source, click the Browse button, go to the
Images folder, select poster.jpg, click Open.
| | 04:37 |
Now, over on the left side of the
properties is a preload pop down.
| | 04:43 |
None, auto and metadata.
If you remember from our previous lesson,
| | 04:48 |
none will not preload any of the video.
Auto will preload the video, if it can.
| | 04:54 |
And metadata only loads such things as the
dimensions of the video and a couple of
| | 04:58 |
frames of the video.
Just keep in mind the majority of mobile
| | 05:02 |
devices disallow preloading video, so
we'll select metadata.
| | 05:05 |
Now, let's add a title attribute, so we'll
come over to the title area of the
| | 05:10 |
property and click once in the input box
and enter Cable Car.
| | 05:16 |
Also, let's add the Fallback Text, which
lets the user know their browser isn't
| | 05:20 |
HTML5 compliant.
Click once in the Fallback Text input box
| | 05:24 |
and Enter, this browser is not HTML5
compliant.
| | 05:32 |
At this point we can save the file and
test it in a variety of browsers.
| | 05:37 |
So, press Cmd+S or Ctrl+S.
And we can go to the preview and let's
| | 05:42 |
take a look at in Safari.
And there's the video.
| | 05:49 |
Let's take a look at it in Firefox, which
won't play an MP4.
| | 05:54 |
And we'll save the changes.
And again, there is our video.
| | 06:04 |
And, as you can see, all you had to do was
just walk through filling out the
| | 06:08 |
Properties panel.
You'll notice that there is a Flash
| | 06:11 |
fallback option, and I think it is time we
dealt with this one.
| | 06:14 |
Though Flash is for all intents and
purposes nonexistent in the mobile space,
| | 06:19 |
there are tons of Internet Explorer
browsers out there.
| | 06:21 |
And they make up close to 25% of the
browsers in use today, and these browsers
| | 06:26 |
are non HTML5 compliant.
Preventing them from seeing the content
| | 06:30 |
might not be a good idea.
The solution is to provide them with a
| | 06:34 |
Flash Video simply because Flash player is
on practically every desktop browser out there.
| | 06:39 |
There are two solutions to this issue.
If you are a Flash user, simply create a
| | 06:44 |
Flash Video project, and stick the project
SWF and the SWF containing the controls in
| | 06:49 |
the same folder as your videos.
I have provided them along with the FLA
| | 06:52 |
file if you want to poke through it.
Why the SWF?
| | 06:55 |
That is the flash fallback feature
required for this feature.
| | 06:59 |
To add the SWF, click the Browse button
and navigate to the Video folder and
| | 07:05 |
select the CableCar SWF file right there.
Click Open.
| | 07:11 |
And you'll notice that the embed code has
been automatically added to the Code panel.
| | 07:16 |
The second solution is ideal for those of
you who have never touched Flash.
| | 07:21 |
There is a rather cool solution out there
that you may want to try.
| | 07:25 |
A few years back when Adobe embraced the
open source movement, they created an open
| | 07:29 |
source video player that allows you to
create Flash Video projects without
| | 07:34 |
touching flash.
Now, we touched on this technique in the
| | 07:37 |
previous chapter video six.
So, this could be a refresher for you.
| | 07:41 |
For those of you who didn't follow it,
work with me here.
| | 07:44 |
To get yourself started, point your
browser to osmf.org/configurator/fmp.
| | 07:47 |
Now, what's going to happen here is that
we are going to put our Cable Car video in
| | 08:03 |
the preview player area here.
Now, to get yourself going with this, you
| | 08:10 |
need to have the video actually uploaded
to a web server.
| | 08:14 |
I've already uploaded it to my web server
and feel free to use this file.
| | 08:18 |
Now, when you are adding the video source,
you must have the full path.
| | 08:21 |
So, it's HTTP:// tomontheweb4.ca, all one
word there as you can see /fallback/cablecar.mp4.
| | 08:40 |
We're going to change the width and the
height values to 720 by 480.
| | 08:48 |
And in the poster frame area we're going
to add a path to the poster frame and
| | 08:55 |
again, it must be the full url,
http://www.tomontheweb4.ca /Fallback/Poster.jpg.
| | 09:14 |
The only Yes button you should be clicking
in this interface is the Include Button
| | 09:19 |
Overlay, and even then, it is a default.
So, let's take a look at how this works.
| | 09:23 |
You click the Play button here, to play
the video.
| | 09:28 |
Now, what you do is you click the Preview
button at the bottom, so let's go down to
| | 09:31 |
the bottom, there, there's the preview, it
goes and finds the video, there's our
| | 09:35 |
Cable Car.
And you can see that there is a whack of
| | 09:38 |
object and embed code.
So, what you do here, is you copy and
| | 09:42 |
paste the object and embed code into the
Dreamweaver document.
| | 09:46 |
So, select all the code in that box, Cmd,
or Ctrl+C to copy it to the clipboard,
| | 09:51 |
return back to Dreamweaver.
And we're going to get the embed area,
| | 09:55 |
plus we're also going to grab the browser
is not HTML5 compliant text.
| | 09:59 |
And we're just going to paste that code in
there.
| | 10:01 |
And if we refresh the code, and save the
file.
| | 10:05 |
This project now works everywhere.
If you test this file in a non HTML5
| | 10:10 |
browser, the video is going to play.
So, there you have it, a complete walk
| | 10:14 |
through of Dreamweaver CCS HTML 5 feature.
In the next video, we're going to answer a
| | 10:20 |
question that you probably all have.
What about you tube?
| | 10:23 |
I'll see you there.
| | 10:24 |
| | Collapse this transcript |
| Embedding video via YouTube| 00:00 |
In any discussion around the subject of
video in HTML 5, the subject of YouTube
| | 00:06 |
will inevitably arise.
The popularity of YouTube as a personal
| | 00:11 |
and commercial medium for distributing
online video can't be understated.
| | 00:15 |
For example, there is hardly a news
program on this planet that doesn't work
| | 00:21 |
in YouTube content somewhere in the
broadcast.
| | 00:25 |
For our purposes, the inclusion of a
YouTube video in an HTML5 page is relative
| | 00:31 |
simply to accomplish.
And to get started, open the index.html
| | 00:36 |
file located in the Chapter 04 02_YouTube
folder in any code editor.
| | 00:41 |
I'm going to be using Dreamweaver.
If you scroll down to the bottom of the
| | 00:46 |
code, you will see I have left space for
the YouTube code right, here between the
| | 00:50 |
two div tags.
Adding a YouTube video to your HTML is a
| | 00:55 |
relatively simple process, where you
simply add YouTube's embed code to the div
| | 01:00 |
where the video is to play.
Though it is common knowledge that YouTube
| | 01:03 |
is a heavy user of the Flash player, that
sort of goes against the grain with this course.
| | 01:08 |
As we wean ourselves off of our reliance
on plugins.
| | 01:11 |
What isn't widely known is that YouTube is
quietly swinging over to the HTML5
| | 01:16 |
universe and offering HTML 5 video player.
It is still early days with this one and
| | 01:22 |
there are some limitations, but they are
relatively insignificant for our purposes.
| | 01:26 |
So, let's get started.
The first step is to register your browser.
| | 01:30 |
So, the browser that you're currently
using will be registered to test with YouTube.
| | 01:34 |
So, open up a browser, I'm going to be
using Chrome, and point it to http://www.youtube.com/html5?g.
| | 01:48 |
The first thing that will happen is
YouTube tells you what this browser
| | 01:51 |
supports and asks if you want to join the
trial, right here.
| | 01:54 |
Click the button and you're good to go.
Let's now add that cable car video to our webpage.
| | 02:01 |
Point your browser to this YouTube link,
and this will take you to the cable car
| | 02:07 |
link on my YouTube channel.
And what you will see is the video we've
| | 02:11 |
used throughout this course has been
posted to YouTube.
| | 02:15 |
To get this into Dreamweaver, we have to
share the link.
| | 02:18 |
Click the Share link, and you will see a
shortened link to the file or a path to
| | 02:24 |
the file.
You do not need that.
| | 02:26 |
You need the embed code, right here.
When this embed code opens, you'll notice
| | 02:30 |
that it is in an iframe.
Actually, the full term is inline frame,
| | 02:34 |
which is a method for embedding an HTML
inside another HTML page.
| | 02:41 |
Select Custom Size from the video size pop
down, and we're going to add 60 pixels to
| | 02:48 |
the height of the file.
Now, this extra 60 pixels are added so
| | 02:54 |
that we can accommodate the player which
sits under the video.
| | 02:58 |
You might also want to deselect suggested
Videos to stop YouTube from tossing up a
| | 03:04 |
bunch of video suggestions when the video
stops playing.
| | 03:07 |
Select all of your embed code right here,
and copy it to the clipboard.
| | 03:11 |
Cmd+C, or Ctrl+C if you're on a PC.
Return to your HTML page, and click
| | 03:17 |
between the two div tags and paste the
code.
| | 03:21 |
Save the document and let's test it in a
browser.
| | 03:28 |
And you can see (MUSIC), the video plays.
So, where's the HTML 5 stuff that you
| | 03:41 |
registered for?
Play a couple of seconds of the video like
| | 03:44 |
I've done here and pause it.
Now, right click on the video and notice
| | 03:48 |
Stats for nerds.
The resulting dialog box shows you a
| | 03:53 |
rather interesting bit of information in
the Mine Type area.
| | 03:57 |
Notice it is WebM, VP8, Vorbis.
Now, I'm using Google Chrome and the Mine
| | 04:03 |
Type is WebM, but didn't we select MP4?
Absolutely correct.
| | 04:07 |
YouTube has transcoded the video to the
browser's HTML 5 preference.
| | 04:13 |
What do you get if you are using a browser
that hasn't been registered with the trial?
| | 04:17 |
I have yet to register Safari, so, let's
open that page in the browser and do the
| | 04:21 |
right click thing.
Come back to the page, and I'm going to
| | 04:24 |
preview in Safari.
There's the video, play a couple seconds.
| | 04:31 |
(MUSIC) Right click, Stats for Nerds, and
you notice it uses the MP4 codec.
| | 04:40 |
Though YouTube is playing the WebM or MP4
versions of the file for the browsers,
| | 04:44 |
just understand YouTube's basic player is
a Flash player.
| | 04:49 |
This only works for people that have
registered their browsers in the test.
| | 04:52 |
The vast majority of your viewers will see
the Flash version, but this gives you a
| | 04:57 |
really good peak into the future.
The thing I like about this is, there's no
| | 05:01 |
need for fall backs, YouTube will do the
heavy lifting for you.
| | 05:05 |
So, there you have it, even YouTube is
getting into the HTML5 video game.
| | 05:09 |
It isn't just YouTube offering an HTML 5
video player, in the next video, we look
| | 05:13 |
at a third party solution that is rapidly
getting traction among among the web
| | 05:17 |
design community.
| | 05:18 |
| | Collapse this transcript |
| Using the JW Player| 00:00 |
As you have moved through this course, you
may have noticed that all the browsers and
| | 00:04 |
Youtube all have different players.
You can chalk this up to leaving video
| | 00:08 |
playback to the browsers, and, in many
respects, it is a non-issue.
| | 00:13 |
Then again Consistency of design may be a
requirement for you and this is where
| | 00:17 |
third party solutions come into play.
There are a lot of them out there, but one
| | 00:22 |
of the more popular video players is the
JW Player from Longtail Video.
| | 00:27 |
In this lesson we are going to walk
through how to get the player and how to
| | 00:30 |
use it in your pages.
To get yourself started, point your
| | 00:33 |
browser to longtailvideo.com, and when you
arrive at the home page for Longtail
| | 00:39 |
Video, you're going to be asked to get the
JW player.
| | 00:43 |
Don't bother.
Sign up.
| | 00:45 |
When you sign up for an account, all you
have to do is provide your email address
| | 00:49 |
and a password.
For your account and then once you've done
| | 00:53 |
that you're good to go and then you sign
in and when you sign in, again you're
| | 00:58 |
going to enter your e-mail address and of
course your password.
| | 01:01 |
And you are brought to the homepage for
the JW Player account.
| | 01:06 |
And what you're going to do is you're
going to scroll down to the bottom here
| | 01:09 |
because there are two choices you get, a
self-hosted JW Player.
| | 01:13 |
Or a cloud hosted AW player, a soft hosted
JW player is a collection of Java hosted
| | 01:19 |
files in swifts that have to be included
in the root level every page that uses the
| | 01:25 |
AW player plus it requires a license key.
We're going to let all that get handled by
| | 01:31 |
JW player and what we're going to do is
click launch the publish wizard Now when
| | 01:37 |
you come to the Publish Wizard, you only
need to enter a little bit of information.
| | 01:41 |
The first thing you have to enter is the
location of the file.
| | 01:45 |
The file must be sitting on the web server
somewhere.
| | 01:48 |
I've already made one available to you and
it's at http ://www.tomontheweb4.ca/JWEX/CableCar.mp4.
| | 02:06 |
Now that I've entered the address, I just
want to take another look at it.
| | 02:12 |
Just to make sure I've got everything
correct.
| | 02:16 |
And, lo and behold, I've got an extra t in
here for http.
| | 02:21 |
Now that I've got the address correct, I
can click the Play button right here with
| | 02:25 |
this sample video.
And the cable car video plays.
| | 02:29 |
Obviously we should have a poster image in
here as well so we're going to enter the
| | 02:36 |
path to the poster image and it's at the
same address as the cable cars MP4 but
| | 02:42 |
it's in it's own images folder.
So the address is
| | 02:46 |
http://www.tomontheweb4.ca/JWEx/, and it's
in an images folder, so images, lower case
| | 03:02 |
i, and Poster.jpg.
And if I click the play button You can
| | 03:08 |
see, there's the poster frame.
So we're good to go.
| | 03:10 |
So how do we get all this from JW Player
into a webpage.
| | 03:15 |
Well, let's scroll down the page, and it's
all kind of here.
| | 03:19 |
All you really need to do is a copy and
paste job.
| | 03:21 |
But before you do that, make sure that you
select the secure https option.
| | 03:27 |
This will ensure that the scripts all
work.
| | 03:29 |
Select the first script.
And copy it to the clipboard.
| | 03:33 |
Now, I'm going to navigate over to
DreamWeaver to the index page.
| | 03:37 |
This HTML page is index.html, and is
located in the Chap_04 > Video_3 folder.
| | 03:46 |
Now, with the copy on the clipboard, what
you want to do is come to about line six
| | 03:50 |
of the code and just paste.
And you can see that it puts that script
| | 03:54 |
right in there, that secure script and
we're going to come back to the JPW player page.
| | 04:00 |
And, now what we're going to do is grab
the inbed code and you can just copy and
| | 04:04 |
paste it as well, so I'll just right
click.
| | 04:06 |
Copy, back to my HTML page, scroll down to
the bottom of the page, and you can see
| | 04:11 |
I've left a little place here for you to
past the code into place.
| | 04:15 |
Cmd+V or Ctrl+V, and there it is.
Now, we've got one minor issue to deal
| | 04:20 |
with, and that is the width and height.
The width of the video, of course, is 720 pixels.
| | 04:25 |
And the height is 480, so make those
changes to the code, save the file, and
| | 04:31 |
let's preview it in Chrome.
And there you go.
| | 04:36 |
There's the file.
And if I click the play button (MUSIC),
| | 04:41 |
everything works.
Now the one thing to be aware of is that
| | 04:46 |
unless you buy the commercial version of
the product This little JW player is going
| | 04:49 |
to show up everywhere.
Now that we've got the JW player working,
| | 04:55 |
let's come back to our HTML page, and what
you would do for the next step is just
| | 05:00 |
simply upload the HTML file that you've
produced here to your site.
| | 05:04 |
Now, feel free to test as many browsers
and devices as you have.
| | 05:08 |
The experience is somewhat similar.
Speaking of devices, what about mobile?
| | 05:12 |
Well, that's the subject of the next
video.
| | 05:14 |
I'll see you there.
| | 05:15 |
| | Collapse this transcript |
| Supporting mobile playback| 00:00 |
We are going to end this course with a
brief look at HTML5 video on mobile
| | 00:04 |
devices such as smartphones and tablets.
If you thought simply getting an HTML5
| | 00:09 |
video to play on the desktop was
convilluted, mobile is an even more
| | 00:14 |
tangled ball of yarn.
Your two main platforms are IOS, iPhones,
| | 00:18 |
and iPads and the meriot of tablets and
smartphones that employ the android OS.
| | 00:26 |
If you look at North America browser
shared statistics, Safari Mobile IOS
| | 00:30 |
accounts for 46%.
It supports video but only the H264 codec.
| | 00:36 |
Android browsers account for 37% of the
market and climbing.
| | 00:40 |
Support the video tag but depending on the
browser, either support the H264 or WebM codex.
| | 00:50 |
With well over 90% of the devices out
there able to support the video tag, you
| | 00:56 |
would be correct in assuming mobile
browsers are far more ready to play HTML5
| | 01:00 |
video than their desktop parents.
Let's not be too hasty with those assumptions.
| | 01:05 |
First off, though that this is a big
number you need to look at it in the
| | 01:08 |
context of the big picture.
When it comes to web browsing worldwide,
| | 01:12 |
everybody on the planet, 91.5% of that
activity is done on a desktop computer.
| | 01:19 |
Mobile devices only make up the remaining
8.4%.
| | 01:23 |
Though you may be seeing a lot of
smartphones in people's pockets and hands,
| | 01:27 |
they only make up a small percentage of
global browsing activity.
| | 01:31 |
Though every project I've shown you in
this course will load into a current
| | 01:35 |
smartphone or tablet.
That claim goes out the window, if you
| | 01:38 |
happen to be using an Android browser
lower than version 2.3.
| | 01:42 |
They simply weren't HTML5 capable.
Then it gets worse.
| | 01:48 |
Though I've been talking about the flash
fallback throughout this course, and the
| | 01:52 |
flash player for Android was withdrawn by
Adobe in 2012.
| | 01:58 |
You might be thinking that MP4 is the way
to go.
| | 02:01 |
Nope.
The android browser offers very limited
| | 02:04 |
MP4 support.
And the Opera browser, which is very
| | 02:09 |
popular in Europe has no support for MP4
on the desktop, yet the Opera mobile
| | 02:14 |
browser does support MP4, go figure.
The upshot is, you still need the MP4 and
| | 02:21 |
WebM versions of the file.
Even then, WebM was not available on the
| | 02:25 |
early Android devices, and there are a lot
of them still out there.
| | 02:29 |
Obviously, mobile is an important market
segment, and here are a couple of
| | 02:33 |
guidelines for you.
When creating your videos, keep in mind
| | 02:36 |
the smaller the file size, the faster the
download and the less the user has to pay
| | 02:42 |
for the data bandwidth used to load the
video.
| | 02:45 |
MP4 videos require specific formats.
And for the MP4 format an H.264 Baseline
| | 02:53 |
has to be used.
Only the MP4 format makes use of hardware
| | 02:59 |
acceleration, and what this does is avoid
unnecessary battery usage on the device.
| | 03:05 |
Cross-browser video tag support is limited
to progressive downloads.
| | 03:13 |
A progressive download is not exactly
mobile friendly because huge chunks of
| | 03:19 |
data have to hit the device before the
video plays.
| | 03:21 |
From a technology point of view this is a
non issue, but data downloads are expensive.
| | 03:28 |
You may need multiples of the multiples of
your videos if you commit to a non flash fallback.
| | 03:34 |
Now, this point takes us out of the scope
of this course but Apple's HLS Technology.
| | 03:40 |
Which is HTTP live streaming, thus the LS
introduced to the iPhone requires you to
| | 03:46 |
create multiple copies of each video with
each one having a different bit rate and
| | 03:52 |
even size.
When the video is ready to go, the user's
| | 03:55 |
bandwidth and CPU capacity are detected
and the video with the closest match is
| | 04:00 |
shot into the browser.
This technology is slowly and I mean
| | 04:04 |
slowly moving into Android devices.
But the major vendors such as Microsoft,
| | 04:09 |
Mozilla, Firefox, and Opera, have yet to
buy in completely.
| | 04:16 |
Though I have told you a rather scary
story, don't let mobile scare you.
| | 04:20 |
This is still an emerging technology.
It will eventually work itself out.
| | 04:24 |
And don't forget YouTube and such third
party solutions as the JW player will
| | 04:29 |
readily adapt to mobile.
Just keep this in mind as you start experimenting.
| | 04:34 |
Nothing, and I mean nothing, beats having
your video work on everything from the
| | 04:39 |
HDTV in your living room to the smartphone
in your pocket.
| | 04:43 |
End of discussion.
| | 04:43 |
| | Collapse this transcript |
| Challenge: Create HTML5 video using Dreamweaver| 00:00 |
In this challenge, we're going to go visit
Hong Kong Harbor.
| | 00:03 |
And the objective in this challenge is to
take the video that I'm about to give you
| | 00:08 |
in your chapter four video five folder and
convert it to WebM and MP4 versions of the file.
| | 00:15 |
You're going to use the Dreamweaver HTML5
video wizard to add the code that makes
| | 00:19 |
this thing run.
And I'll be supplying that index.html file
| | 00:24 |
to you, so you don't have to write a whole
ton of code.
| | 00:26 |
And finally, you're going to preview it in
Chrome and then preview it in Firefox.
| | 00:32 |
Depending on the time you need to encode
the videos, this challenge should take you
| | 00:36 |
no more than 10 to about 13, 14 minutes to
complete.
| | 00:39 |
| | Collapse this transcript |
| Solution: Create HTML5 video using Dreamweaver| 00:00 |
My solution to the challenge was to first
off, locate the Hong Kong movie in the
| | 00:04 |
video folder and then open it up.
Just wanted to make sure that everything
| | 00:07 |
was fine, so I give it a quick scan.
As you can see, there's Hong Kong harbor.
| | 00:13 |
Not a lot of motion in here, so I can get
away with a good frame rate.
| | 00:15 |
And of course, the first thing I want to
check was is this legal for HTML5?
| | 00:20 |
So I go to the movie inspector, and sure
enough, it's using the Animation codec at
| | 00:25 |
30 frames per second, no big deal.
I'm not too bothered by the surprise 853
| | 00:29 |
by 480, I can live with that, but this
codec has gotta go.
| | 00:33 |
So what I've gotta do is get this file
into the Adobe Media Encoder for the MP4
| | 00:39 |
version, and then I'm going to pop the MP4
version into Firefox to create the WebM version.
| | 00:44 |
So I just kick out of the QuickTime player
here, and I'm going to swing over to my
| | 00:49 |
Adobe Media Encoder.
I'm going to click the plus sign to add
| | 00:52 |
the video, and Chap_04, there's the
challenge.
| | 00:56 |
There's the video, Hong Kong.mov.
Click Open, and to get going, what I do is
| | 01:03 |
I click this Match Source link here, which
is the preset and that will open up the
| | 01:07 |
Export Settings.
Making sure that it's H.264, it is.
| | 01:10 |
It's going to be saved as HongKong.mp4.
There's a little background noise, so I'll
| | 01:14 |
get the audio there, and I'm going to
export the video.
| | 01:18 |
So I'm going to click the Video tab.
I don't need to change the size.
| | 01:21 |
I don't need to change the Frame Rate.
I'll stay with the main profile for the
| | 01:28 |
MP4, but the Bitrate setting's going to
have to change.
| | 01:31 |
I prefer VBR, 2 pass.
And I'm just going to lower the data rate.
| | 01:35 |
I'll lower the data rate down to about,
we'll say, 1.5.
| | 01:39 |
And I'm going to take the Maximum Bitrate
down to about 1.8.
| | 01:43 |
Next up is the Audio.
Click the Audio tab.
| | 01:46 |
It's AAC, of course, because we're using
an MP4, you need to use that.
| | 01:50 |
And the Audio Codec is there.
The sample rate, a little bit too high.
| | 01:53 |
I want to take it down to 4401 kilohertz.
The background sound is nothing, so I'm
| | 01:58 |
going to knock it back to Mono.
We'll keep the outer quality high, but
| | 02:02 |
we're going to drop the Bitrate down to
about 64 kilobits per second.
| | 02:06 |
That's background sound, nobody's really
going to pay much attention to it, so I'm
| | 02:09 |
not too concerned about quality at this
stage of the game.
| | 02:12 |
Now that I've got that all done, I can
click OK and this will take me back to the queue.
| | 02:17 |
I click the little green Encode button, as
you can see, it quickly, quickly, quickly
| | 02:23 |
And I mean quickly, encodes the video, and
we're done.
| | 02:26 |
I can click the Adobe Media Encoder, and
you can see, there's the MP4 right there
| | 02:30 |
in the folder.
Now, what I need to do is create the WebM version.
| | 02:34 |
Being a Firefogg user, I'm going to open
up Firefox, making sure that I've got
| | 02:39 |
Firefogg installed.
I'm going to select Make web video.
| | 02:42 |
going to select the file, so I'll just
click the Select File link here.
| | 02:47 |
Come to the Desktop where the challenge is
and there's the MP4.
| | 02:56 |
Click Open, and I'm going to use the
Advanced Options here.
| | 03:00 |
I'm not going to worry about the size,
because I already knows what the size is.
| | 03:02 |
We're going to keep the Aspect ratio to
69.
| | 03:05 |
We're going to take the Bitrate to, well,
say 23000 kilobits per second.
| | 03:10 |
We'll have high Quality, which would be
10.
| | 03:12 |
I'm not too concerned about Keyframe
interval, so I'll leave that to the software.
| | 03:18 |
2 pass encoding, definitely.
Audio Quality, we'll take the Audio
| | 03:22 |
Quality to about 5.
Knock the Channels back to Mono.
| | 03:27 |
And the Samplerate back to 44.1 kilohertz.
And, now, I can just click Encode.
| | 03:33 |
And you notice it's saving it as
HongKong.webm.
| | 03:40 |
Click Save and the progress bar goes very,
very quickly.
| | 03:47 |
And the encoding is complete and we can
test it if we want.
| | 03:53 |
Looks pretty good.
I'm happy, I'm going to quit Firefox.
| | 03:56 |
Now that I've got my Hong Kong.webm and
MP4 versions ready, I can now, concentrate
| | 04:03 |
on getting this thing working in
Dreamweaver.
| | 04:05 |
So I'm going to take this index.html page,
which is in the, 05_Challenge folder, and
| | 04:11 |
open it Dreamweaver.
So I come over to Dreamweaver, and the
| | 04:14 |
first thing I'm going to do is go to the
Site menu, New Site, and I'm going to call
| | 04:19 |
this one HK and tell it that the folder is
the Challenge folder.
| | 04:27 |
So, we'll just come here, click choose
Click Save.
| | 04:32 |
What this does is give us the opportunity
to avoid getting all kinds of nasty path
| | 04:37 |
names that come in if a site is really not
defined.
| | 04:40 |
This is not going to affect the project in
any way.
| | 04:43 |
Okay, so the first step in the process
that I did was to come up to the Insert
| | 04:47 |
menu and go find the HTML5 video.
So I just clicked once on line 46 here,
| | 04:53 |
Insert > HTML5 Video, there it is, and
you'll notice that the Properties panel
| | 04:58 |
opens up and asks me all kinds of,
questionsm.
| | 05:01 |
And the first question it's asking me, of
course, is what's the source?
| | 05:05 |
And the source is in that video folder.
And remember, you start with MP4, thanks
| | 05:10 |
to the iPad.
Click Open.
| | 05:12 |
And you notice it finds the WebM version
as well, and adds it as alt source.
| | 05:17 |
I'm loving it.
Now, the other thing is, is, we've got to
| | 05:19 |
put some width and height values in here.
And you'll notice that they are not
| | 05:24 |
automatically added.
Now, I'll show you a little trick about
| | 05:26 |
adopting them come to MP4 it tells you
that it's 872 by 486 so we'll just center
| | 05:33 |
those numbers.
872, 486, and we'll give it some fallback
| | 05:40 |
text, of course.
Make sure that we give it controls,
| | 05:44 |
there's no Flash fallback, we're good to
go and let's pre-load.
| | 05:50 |
We're going to just do the usual metadata
pre-load here.
| | 05:53 |
And now, we're good to go.
So now, we can save the file, Cmd or
| | 05:56 |
Ctrl+S, depending on your platform.
And we can come up here, Preview in browser.
| | 06:01 |
Let's start with Google Chrome and there's
our video right there.
| | 06:07 |
Here's the real cool thing about this
browser, you can actually click this full
| | 06:10 |
screen button and get full screen video.
And if you press the Escape key, it will
| | 06:14 |
come back to the original size.
So there it is playing in Good old Chrome.
| | 06:18 |
Now, let's play it in good old Firefox,
which only plays WebM.
| | 06:23 |
And as you can see, there's the video,
click it.
| | 06:27 |
(NOISE) It plays.
And again, we can take this full screen.
| | 06:31 |
And Firefox will ask you if that's okay,
it always is.
| | 06:34 |
To get out of it, just press the Escape
key.
| | 06:36 |
And we are done.
| | 06:40 |
| | Collapse this transcript |
| Challenge: Create HTML5 video using the JW Player| 00:00 |
In this challenge we're going to go into
the wilds of northern Ontario and use the
| | 00:04 |
JW Player to get our video to play in an
HTML5 page.
| | 00:09 |
So your objectives here are quite simple.
We're going to use the JW Player to play
| | 00:13 |
an mp4 video.
You're going to obtain the player code
| | 00:16 |
from JW Player and add it to an HTML
document and preview your result in Chrome.
| | 00:22 |
This challenge should take you really no
more than ten minutes.
| | 00:25 |
In fact, you might want to put a watch on
your desk and see if you can get it done
| | 00:29 |
in under ten minutes.
So let's get started.
| | 00:31 |
| | Collapse this transcript |
| Solution: Create HTML5 video using the JW Player| 00:00 |
This challenge is really kind of
interesting, because what you need to do
| | 00:03 |
with the video that's supplied to you in
the Challenge2 folder, this one right
| | 00:07 |
here, has to be uploaded to a Web server.
I've already uploaded it to my Web server,
| | 00:12 |
so if you don't have a web space, you can
use my file but, you're going to have to
| | 00:16 |
get this uploaded to a Web server.
Now this is just a simple canoeing film.
| | 00:20 |
This is my fellow author and I, Jim
Babich/g, up in the wilds of Northern
| | 00:26 |
Ontartio, canoeing on a lake at night.
So, to get this thing up and running, what
| | 00:33 |
we have to do is, first off, head over to
Longtail Videos.
| | 00:36 |
So I'm going to open the browser, went
over to longtailvideo.com, and signed in.
| | 00:44 |
And I'm ready to go.
Now what we're going to do, is we're
| | 00:51 |
going to use the Cloud-Hosted JW Player,
so we're going to launch the Publish Wizard.
| | 00:56 |
I enter in the path, to the file.
Now the path to the file has to have the
| | 01:02 |
HTTP in it Some of you may have made the
mistake of not doing that, so it's http://www.tomontheweb4.ca.
| | 01:17 |
It's in a folder called Challenge/ and
it's called canoe.mp4, which is the same
| | 01:23 |
name that we had earlier.
I'm not going to be using a poster frame
| | 01:26 |
on this one, so I'm just going to, delete
it.
| | 01:29 |
And we need to get the size.
We can change that later.
| | 01:33 |
So we just click the Play button here.
And there's our video.
| | 01:39 |
Okay, so we're good to go.
Scroll down to the bottom of the page, and
| | 01:43 |
this is what I need to know.
Now, the other mistake you may have made,
| | 01:46 |
if it didn't show up on your webpage, was
use HTTPS, select the script at the top
| | 01:52 |
here, copy it to the clipboard, and we're
now over to a code editor.
| | 01:57 |
Now, I'm going to be using Dreamweaver
here, but you can use any code editor you wish.
| | 02:01 |
And that piece of code, if you remember,
goes right in here, line six, it goes
| | 02:06 |
right into the head of the document, paste
it, Ctrl+V, or Cmd+V if you're on a Mac.
| | 02:11 |
And you can click Refresh, and then we
return back to the browser, and we grab
| | 02:15 |
the div.
So we just grab all that code, one click,
| | 02:19 |
there we go Cmd+C.
Back over to Dreamweaver, down to the
| | 02:23 |
bottom, and in line 56, we can Cmd+V, and
it goes to the DIV, and you're good to go.
| | 02:32 |
Click Refresh.
You might want to save the page, Cmd+S or
| | 02:36 |
Ctrl+S, and let's review it in Google
Chrome.
| | 02:41 |
There's the player, and there's the video,
and if you want to take it full screen,
| | 02:46 |
away you go.
So there you go.
| | 02:50 |
There's the challenge of getting a video
to quickly play as you saw.
| | 02:54 |
You can literally get it done in less than
ten minutes.
| | 02:56 |
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 |
We have reached the end of Up and Running
with HTML5 Video and I want you to keep
| | 00:05 |
one thing in mind.
When you're working in this technology
| | 00:08 |
it's a never ending process of learning
and there are some great resources
| | 00:12 |
available to you.
One of the best sources I have discovered,
| | 00:16 |
which gives me a really good overview of
the entire subject of HTML5 video, is this
| | 00:22 |
site by Mark Pilgrim, it's
diveintohtml5.info/video.html.
| | 00:27 |
It really is a deep dive and there is a
lot of information on this page.
| | 00:32 |
If you want to learn a little bit more
about the state of HTML5 video on the web,
| | 00:37 |
Long Tail Video has a great resource which
is being constantly updated.
| | 00:43 |
And what it does is it gives you all sorts
of statistics and where things are used
| | 00:48 |
and where we currently are with HTML5
video.
| | 00:52 |
If you really want to learn a little bit
more about the HTML that's actually used,
| | 00:56 |
you can go to the w3schools.com and learn
all about HTML5 video on this one page.
| | 01:04 |
And the other thing I like about this page
is that you can try it yourself.
| | 01:08 |
So you can make changes to the source code
here, give it a click, and see what it does.
| | 01:13 |
Finally, if you really want to learn more
about working with HTML5 video, there's a
| | 01:20 |
great course here at lynda.com, it is
authored by Steve Heffernan.
| | 01:24 |
It is a really great course and what
you've learned with Up and Running with
| | 01:28 |
HTML5 video will help you understand a lot
of what Steve talks about in this course.
| | 01:34 |
| | Collapse this transcript |
|
|
