WWDC2004 Session 707

Transcript

Kind: captions
Language: en
greetings welcome to session 707 quick
time for the web and I see you all here
this afternoon get this guy to go on to
Stratton us here I'm Steve Cooley senior
technical writer and multimedia web
monkey for Apple Computer and this is
what I do for a living it's great I got
to tell you so we're going to be talking
about QuickTime over the Internet here
and I can't actually see the monitor
from here so I'm going to move over here
I'll be showing you how to use QuickTime
over the Internet
primarily putting QuickTime content on
your website and mostly we'll be talking
about HTML today but also we'll be
showing you some movie tricks to get the
most out of putting movies on your
websites and we'll show you a little bit
of XML and ways to work that into mix
and just a tiny bit of JavaScript so
we'll be mainly learning to do today is
how to put QuickTime on a web page in a
way that lets everybody see it whether
they're using Explorer or Safari or any
operating system if they don't have
Quicktime installed they get a good
message to get it installed how to put
live and pre-recorded streams on a web
page as well as movies that are non
streaming how to decide when to stream
and when to use fast start technology
and how to play other kinds of media mp3
smile that sort of thing when you're
using QuickTime so that it doesn't come
up in a random player we show you how to
launch QuickTime Player from a web page
how to do full screen movies from a web
page how to work with mpeg-4 in
QuickTime and how to enhance QuickTime
VR for the web so we're going to be
covering a lot of stuff everything
that's in this session today is also
available on our web site at Apple it's
a really nice website
it's the dub dub dub Apple com QuickTime
tools - tips under bar - and it's got a
lot of great tutorials there and it's
also available in this book QuickTime
for the web which you can get it Amazon
or if you go to the QuickTime lab Morgan
Kaufmann publishers has a form there you
can get it and it's it's very handy
it'll cover all this stuff and quite a
bit more so
just before we go too far I want to give
you some idea of what QuickTime is and
because uh you know you're probably the
website developer thinking well
streaming video should I use real cities
Windows Media should use QuickTime
QuickTime is a lot more than just
streaming video and I want to give you
some some sense of what it is speech
music slideshows animation movies of
course QuickTime VR 3d models
interactivity let me switch you over to
demo one here and I'll just give you a
quick run through some of the things you
can do with QuickTime on the web if we
can switch over to demo one computer - I
think you're calling it here we go roll
star employee images we call the ratchet
and flutter grade-school projectors
strategy Thank You slots in the film
feeding into a loop swiping up not to
tear this will run over a dial-up modem
you can have a website that talks and
goodrich speech automatically over
dial-up modem this is a different kind
of multimedia it's rich not because you
got a zillion things going on because
the content is exciting and people just
really really react a website that
starts talking when they show up here's
some music a little bit of something
[Applause]
[Music]
and as you can see this is a custom
player that launches from your webpage
and you can move it around drag it
around and close it and it plays the
streaming music here's a slideshow and
give this guy here his webpage it
launches a movie in QuickTime Player and
slideshows have a particular value on
the internet because QuickTime is
unusual as a media it doesn't have
necessarily a frame rate you've got 24
FPS video you've got 30 FPS video with
QuickTime you can have one image to last
for 10-15 seconds and then 30 FPS video
mixed in with it so with a width on the
Internet it allows you to send very high
resolution images that last for a long
time without straining your bandwidth
budget it looks like this is a
tremendous pretty high-resolution image
but if you look at the actual video
track it's got what's it what's the
frame rate here Oh point one five frames
roughly per second and of course that
changes but if we look at the size I say
we only get the general look out here
there we go we're looking at eight point
seven kilobytes per second for pretty
high res video
and maybe
[Music]
that's fairly flashy that's 40k besides
the small JPEG because we're using flash
within quicktime along with audio and
QuickTime effects and of course virtual
reality which is something that no other
technology will offer you you can look
around inside the places you can zoom in
just kind of stick your head inside
places and museums love this wonderful
for architecture for visiting places
that you've never been before real
estate and here we go one of my favorite
websites these days panorama is DJ one
thing you'll notice if you look down
here in the lower right corner is that
little image is moving around that's a
QuickTime movie and when you click it it
launches a full-screen QuickTime movie
of the same thing and this is a virtual
reality it's very high bandwidth so
we're looking at a background that's
kind of fills in as it comes along and
going to look around but this is this is
a kind of immersive technology that you
don't necessarily think of when you're
thinking of streaming video it's like
wow I can really let's do that door
let's go say oh and just reveals whole
world here we've got this incredible
medieval fortress right in the middle of
a of a modern city and again we can zoom
in and look at things more closely or
zoom out and it's it's pretty cool so oh
yeah
in addition there are things like 3d
models which are available and this is
axel playing in QuickTime this is a
component download and what's going to
happen here is I didn't have that
component so it offers to get it for me
and it'll just download it and install
it automatically this is a the Apple
component download program so that you
can include media in your movies that
not everybody has a player for if it's a
component that plugs into QuickTime
QuickTime sees it needs it offers to get
it downloads it installs it
automatically and it's a pretty seamless
experience for your users
I'd let you do things we go beyond ok
and we'll just reload the frame and
suddenly there we are so here again is
something quite a bit beyond streaming
video we've got an interactive 3d model
that we can look at and we can turn on
and off the exterior views or fade in
and out the interiors and it's again
it's just a lot of different kinds of
media involved here to go far beyond
what we normally think of as streaming
movies and if we go back to slides
please okay
oh there's one more thing interactive
many applications I wanted to show you
some of those we can come back to demo
computer to and bring those up and you
already saw some of that already you saw
that there was a skinned player that
interactive VR as you drag around but
there's really a lot of other neat stuff
you can do here's a here's a calculator
which isn't working here we go
scientific calculator as a QuickTime
movie just something cute okay gee why
Katie Katie Katie guy wrote that in a
few minutes to mr. Kane is his
granddaughter and you know you can just
do things that are not quite live beyond
which you might have thought of a
streaming video or streaming audio and
I'm not going to go too much further
into that let's go back to slides
because we're streaming audio and
streaming video are important and with
QuickTime there are really two kinds of
what you think of or might think of as
streaming video ordinarily there are
when you think of streaming video what
you're thinking of is a movie that plays
while you watch it you know you click
the link and it plays in real time you
don't wait for it to download and then
watch it but QuickTime actually has two
ways to accomplish much the same thing
one it's called fast start and the other
is called real time streaming now a fast
start movie works on pre-recorded
material only but it sends the movie
from start to finish just as if you
wouldn't during a normal file download
and it sends the movie as fast as it can
so in other words if you have a
one-minute movie but it's one megabyte
you've got a 1 megabyte per second
connection it sends it in one second and
then it plays it as a can and you can
play as much in the movie as has
downloaded already so the movie
downloads while you're playing it and if
you get a slower connection you can only
watch the parts that have come already
but if Bandit permits if you've got
enough data with the student will be in
real time you do it it's just like
screaming let me go back to demos here
and kind of show you some some of what
I'm talking about here ok let's go to
writing joins here this is you can see
that little bar a lot of the movies
zipping along that's the movie
downloading and it's playing wall-eyed
downloads
and we have what looks a lot like
streaming video right it's just playing
if it comes in over the Internet but
it's not streaming a fast start because
I've got the whole movie here and the
difference now let's go ahead and bring
up another here we go yeah okay let me
compare you head-to-head a streaming
video and a fast hour video to show you
what's similar and what's different
because it's it's easy to get confused
here's a fast start video and they put a
double sign so you can see it a little
better and again if you can see it's
downloading and it's playing at the same
time so let's look at the streaming
version of the same thing okay here's
the streaming video and as you can see
it really isn't a lot of difference to
be using for the user streaming video
fast start video are the same thing but
there are some differences one is in my
Fast Start video here I can't see
anymore that has already downloaded well
now the whole thing is downloaded okay I
needed to move a little quickly to show
you that with a streaming movie I'm not
downloading anything so it's like click
and move around it starts streaming from
a new point now what I'm showing you
here obviously is that there isn't a lot
of difference for the user experience if
there's enough bandwidth to play the
movie and if we can go back to slides
now so the faster movie is you saw you
could play it the bed width is permitted
so you can see in real time if there
hadn't been enough bandwidth to play
that movie in real time you would have
just watch the bar slowly move along and
you could have started playing it as
soon as enough had downloaded with a
streaming movie in addition to
pre-recorded movies it can play live
material which obviously you can't in
pre-recorded format but it sends little
bits in the movie in real time it
doesn't send the movie from start to
finish you position your movie anywhere
you want so for long material you've got
like three hour lecture series streaming
is a good way to go because people can
skip around to where they need to go
having to download the intervening
material the downside of streaming
really is that if there's not enough
bandwidth to show the movie in real time
it doesn't play you've got a three
hundred and kilobit per second movie and
a 100 kilobits per second connection
you cannot stream it over that
connection it just won't get through the
bits will fall on the floor but you can
play it in fast start it's just that
they'll have to wait 15 minutes to see a
five-minute movie and sometimes people
are more than willing to do that other
times that's a problem so that's kind of
what brings up the decision process so
when should you stream it when should
you fast start well as you saw they're
really comparable quality at a given
data rate and they both start right away
and play over the internet but streaming
can provide live content so if you got a
live broadcast streaming is the only way
to go
you can skip around and large files so
that's when you might want to use
streaming and it offers a certain amount
of inherent copy discouragement because
you're not downloading a file to the
disk that they might somehow find and
ferret out of the cache you're just
sending a stream of bits that are being
displayed and then discarded but if it
got audio hijacked they can capture the
audio if they've got a video of buffer
hijacker they can they can do that so
it's not it's not perfect but it's kind
of built in and a lot of people use
streaming just because it is inherently
difficult to copy and you can stream
audio and video and text so if that's
all you're sending that can be a good
choice fast art has the advantage of
being able to deliver high quality over
any speed connection if you want to
deliver a 25 megabyte movie over a
dial-up connection and your people are
willing to wait for it they'll get the
whole thing they will not be able to get
it to the stream you can make them
protect it or savable sometimes you want
people to be able to save your movies if
your movie is they should be a
commercial for your product you don't
want a copy protect it you want it to
passed around going to be looking at
your movie trailer and going that's
great I want to see that fast start
movies always get through you don't have
to worry about firewalls you don't have
to worry about bandwidth it's going to
get there sooner or later and you can
deliver all the different media types as
fast starts right they are a lot of
those things we were just looking at
that are go flash media that are beyond
simple audio and video and text okay so
why bother you use QuickTime rather than
one of the other players obviously
you've got a much broader palette of
media to work with and then you do in
most other things you can use still
images as well as video and get the
advantage of using still images the low
bandwidth you know it's maybe 40k image
but some screen for 10 seconds so it's
only 4k a second lots and lots of media
the quality I think some of you have
seen the h.264 codec demoed today we're
starting to see some really beautiful
quality here and with QuickTime you have
the ability to use a variety of codecs
so you do your your work your production
at the highest possible quality archive
and save it at the highest possible
quality and then recompressing with a
different compressor to send out over
the web but then if you want to edit or
make changes you don't have to go back
to that low quality output you can go
back to the highest quality and rework
and reuse
material you have the durability and
reusability QuickTime movies that were
made for QuickTime 1.0 still play just
fine you have the ability to take things
out of QuickTime and export them to real
or Windows or another form of QuickTime
2 so you know see I put the stuff out on
the web and Sorenson and but I want to
take it back in and put it back I only
have the web source you can still pick
it up and put a new soundtrack on it or
put a different texture logo on it if
your corporation changes you can reuse
your material I think you're going to
find them at the other media choices
it's more of a one-way street you put it
in and you say ok now I have this kind
of media I want to take it out and
rework it oops it doesn't come back out
so this is a much more open standard
flexibility streaming and pass start
standards-based I think we've talked a
lot about standards in other sections
I'm not going to go into it into greater
detail here but we're really committed
to working with standards and QuickTime
open standards so that our players are
interoperable with other people's
players you're not you're not roped in
to what Apple does Apple decides to see
we're all ready we all want to do that
anymore
you can find somebody else who's also
able to do it or you can hire an
engineer to work on it because it's an
open standard you're not you're not
stuck finally distribution we've been
planning running third for a long time
and there's sometimes it's a hard sell
to your class to say well we want to use
QuickTime they'd say well isn't real
play or more widely distributed windows
media player as of now that's really not
true anymore we pulled it well I have is
real and we are neck and neck with
Windows Media we've got over 250 million
copies downloaded of QuickTime 6 partly
because they feel comes iTunes partly
because it comes with digital cameras
but then we're seeing a tremendous
success there so now if your client says
well I want the most popular format I
think you can honestly say the QuickTime
is a B choice so let's get down to some
real brass tacks how do you put a
QuickTime website QuickTime movie in
your website there are two ways to embed
a movie in your website the embed tag
and the object tag and we're going to
show you how to use both what you don't
want to do is link to a QuickTime movie
this is just a href a typical hypertext
link to this movie file and the reason
is you can't really tell the
what kind of mime type your file is
you're just giving it a filename and if
it doesn't have the right extension or
the servers were properly configured it
will show up as text you can't tell the
browser to use a QuickTime plug-in so if
they have an old version of Windows 95
running you know Windows Media Player 3
that says oh I can play movie files
that's what they'll get and then it
won't play the movie file we'll just
show a broken icon and you can't really
control the plug-in to the player you're
just passing the filename you don't know
what's going to happen you can't say I
want to autoplay or I want volume change
or the scale set and you can't use
QuickTime to play any other file type if
you link to an mp3 file well whatever
mp3 player they get is just going to
come up you can't really use it for mp4
or smile or flash or streaming so and if
QuickTime is it installed and just link
to something that it can't display and
just get a broken icon that's that's not
the user experience you want them to
have so we recommend primarily using the
embed tag and it's we're going to focus
on and show your game object tag to the
embed tag works in all browsers it works
in Safari or to Netscape works in
Internet Explorer on all the operating
systems that they run in it lets you
specify a mime type so you can say in
the HTML this is a video QuickTime it
gives you extensive control of the
QuickTime plug-in you can control a lot
of things we'll show you some of the
things you can control and if you don't
have put ton installed it takes the
personally gracefully to the QuickTime
plugins page to get it which is
something you certainly want to do the
exception is Internet Explorer for
Windows 5.5 and later which ignores the
plugins page attribute so that's why we
also use the object tag and we get into
that here's the embed tag it's not that
complicated you specify the height and
width of your movie the file name and
path to your movie it can be an absolute
path or a relative path if in the same
folder is the HTML it's just the file
name you set the type the type is always
video slash QuickTime for movies they're
also QuickTime image files you can use
for placeholders but that's that was
once needed for to prevent problems that
came up when certain versions of Windows
Media Player would register themselves
to the movie file types
it will pass this other file type that's
no longer a concern because the object
tag is I'll show you this used to be
really complicated and it's gotten
simpler lately which is nice the plugins
page should always point to dub dub dub
Apple comm QuickTime / download that's
always place to get QuickTime so a
couple of tips you should add 16 to the
height of your movie to allow for the
movie controller on your web page type
is always video clicked on the plugins
page always the same and the source is
your file name dot MOV always use the
MOV file extension because that's
universally recognized as video
QuickTime and let's go ahead and show
you if you'll switch back to computer to
hear a simple embedded movie just to
show you the syntax
[Music]
and all I've done here so to let the
autoplay and set the why I'm down to 25%
there's my embed 240 by 196 so it's
really 180 high so I add 16 for the
controller there's my source type
plugins page and I can pass some other
information along to the plug-in which
is one of the nice features of the embed
tag so we can switch back to slides here
let's have some fun with the embed tag
what are we going to show you here okay
let's look at the QT source there are a
bunch of embed tag parameters attributes
you can pass the QuickTime plug-in to
tell it to do things with your movies
and if you look at that website I gave
you or get the book you get a full list
of them all but I want to show you some
of the more enjoyable ones or the more
important ones one is the QT source
parameter you use QT source I'm sorry
can we switch back to a computer - QT
source is a parameter that tells put
time even though the source file I gave
the browser was a movie file or a
QuickTime image that caused it to call
QuickTime I really wanted to play
something else so here I've got an mp3
playing and it plays in QuickTime
because I gave it a source which is a
QuickTime file and a QT source which was
the thing I really wanted to play so you
can pass any kind of a movie or pretend
file to the browser and that will cause
it to load the QuickTime plug-in and
then you can tell QuickTime to play any
of the many hundreds of types of media
that it can play and this allows you to
control the plug-in and make it work
with QuickTime even though you're
playing mp3 or mp4 or something like
that and here for example with similar
playing mp4 and this is the same movie
you're looking at a little earlier and
once again we've set the source to a
QuickTime image and the Qt source to an
mp4 so now we're forcing rather to
choose QuickTime
than using it to play an mpeg-4 and
here's yet another one here we're using
quick time to play smile now probably if
you have Real Player installed it's
registered to play smile files but we
can cause foot time to play just by
setting the source to a QuickTime image
and the Qt source to what we really
wanted to play and I'm not going to go
into great length about smile but I will
show you just very briefly what the
smile file looks like it's loading a
text file the text file is specifying an
mp3 and a bunch of JPEGs so here what
looks like a QuickTime movie is really a
collection of JPEGs in an mp3 pile that
have been knit together by a text file
the syntax is fairly simple it's really
easy to write a web script that will
spit these out and generate the
slideshow of the day or the movie of the
day and it's very lightweight file it's
only a few lines of text it's pretty
easy syntax to learn and master and it
allows you to basically make movies out
of media with text processor so that's
that's a using source and Qt source so
the Qt source is wonderful little
attribute you can add and let's switch
back to slides okay
now let's look at three other parameters
href Auto atria and target you can Ted
you can set an attribute to your quick
time embed tag it says when someone
clicks on the movie go somewhere
activate a URL and that URL to be
another website it could load another
movie in place of itself it could be
JavaScript to execute you can have a
number of things happen when somebody
clicks on that movie the auto href tag
says wherever I said to go in and click
the movie go there anyway don't wait for
them to click the movie just happen so
as soon as QuickTime loads it loads the
second URL and the third one is the
target and the target lets you say where
you want this URL to load you can load
it in a frame to load a web page in the
other frame you could set the target to
be myself
meaning the QuickTime movies so when
someone clicks the movie she turns into
another movie you can set the target to
put time player so it launches the
player application and if we switch back
to a demo as I'll show you that and
again I know I'm going through a lot of
stuff in a fairly short time here but
it's not as complicated as you might
fear so let's look at this you can do it
click through we've got a movie that's
embedded in the player and if you
clicked on the movie it opens the web
site where the movie came from so that's
just a and it works whether the movie is
playing or not big way
and if you look at this source it's
nothing complicated we set the source to
the movie set the height would turn down
the controller to make sure it's there
give an auto play and we have href where
you want it to go target in this case a
new window not much to it so you can
click throughs on your movies so if you
get a movie that's displaying a product
or your service you can click through to
your website win it and that will work
even if the movie is playing in
QuickTime Player well no not if you put
in HTML it's going to be in a website
sorry you can set the post to target to
myself in this case you get a poster
that when you click it turns into a
movie now this is nice one of the things
that you worry about when you put movies
in your website is movies typically are
large and somebody opens your webpage
and suddenly is downloading a 5 or 6 or
10 megabyte file on the grab what I
didn't sign up for this so what you can
do is create a one frame QuickTime movie
which is very easy to do you just open
your movie copy one image and save it as
a separate movie now I've got a poster
movie so I can put it in my web page and
it's only a couple of few K and it's one
image from the movie but when I click it
it runs the movie and because target is
myself it just turns into a movie
and I'm going to reload this just so you
can see it again it loads very quickly
because it's a very small image and
you'll see we've set controller Falls
because we don't want people to try to
play the poster right we want them to
click on it we don't want to think of it
as a movie we wanted to think of it as
an image but we use a movie because that
way the QuickTime plug-in is loaded to
display this image now you're going to
make sure that your height is high
enough for the movie plus the controller
so we've got a little white space here
when I click this you look at you'll see
it just moves down about 8 pixels
because it's centered to make room for
the controller okay so that's a poster
movie which is a classic QuickTime
technique for getting a good experience
from your from your browser and ok let's
look at setting a different target in
this case again we have the same poster
same href which set the target to
quicktime player instead of myself which
means when we click it it washes
quicktime player and sometimes you might
want to do that because people can do
things like oh let's movie double size
or fast-forward through it back up
because we can't quite believe what they
just saw he's really do that
completely psycho I love it
so those are some some pretty good
things you can do with the Q key source
href auto href and target now I'm going
to show you one more thing with the auto
href and this one is going to be well
I'll show it to you first but you won't
really see much so here we go and you
like that with watch that again o href
means click it and it goes there auto
href means just go there so why would
you want to do that well I'm going to
kind of show you a different version of
that page called redirect
okay this is a different version of the
page this is the page it was loading but
because it was an auto href you didn't
have to click it it just went there and
back up here there's an href to a page
called house quick time and if you have
quick time because it's Auto hrf it just
goes there well what if you don't have
good time here's a tag that's a standard
HTML this isn't a quick time this is
meta HTTP content you set a URL at a
timeout and if nobody does anything in
before the timeout that goes to another
page and I'll go back there again in
this case if you have Quicktime it's
going to take you to has QT if you don't
have quick time it's going to take you
to get QT and you just have to wait for
the timeout and you can set the timeout
to whatever you need so this is that
making sense to people okay because
sometimes a little hard to wrap your
head around the fact that you're using
QuickTime to detect QuickTime but if it
has quick times it'll go to one page if
it doesn't it'll timeout and go to the
other and that lets you provide an
experience you use it and say well if
they don't have put time I want to
explain why they should get it and that
it's okay and if they don't if they have
QuickTime I want to go immediately to a
media intensive page or you might even
have two different versions of your site
one with his media rates and one it's
just you know JPEGs and texts if you
don't want to ask people to download
when we set it up though nowadays it's
pretty good at getting people to
download QuickTime automatically so okay
let's go back to slides here up with
that another tag I want to show you is
the e tag and the e-tag allows you to
pass additional parameters to the
plug-in one of the things about your
HTML is you're setting up these
attributes to talk to the QuickTime
plug-in and say well I want to do this I
went out on a good thing make the make
it
autoplay give me no controller do it is
such-and-such a size so in such a volume
then you click the href and it brings up
another movie in place in itself well
now how do you give instruction to that
you've already put one set in your HTML
you can't say I want you to have a
controller but I want the movie that
replaces you not to or I want you at 50%
volume but I want the replacement to be
a 75% or a double scale so what you do
is you use the the e-tag and the syntax
I think I'm going to show you on on the
demo machine so if we go back to
computer - I'll bring up we can switch
to computer - and we go here we go and
here it's very simple I'm going to click
the poster but the href is - jaws weighs
movie target myself II the extensions
autoplay falls by them equals 25 so when
I click this it doesn't auto play the
next movie and when I play at the volume
will be lower it's down to 25% it's just
an example of some parameters you can
pass along the syntax is a little tricky
put everything in quotes put the URL on
angle brackets this this T here is this
is optional you could have said target
equals myself used it's just a different
way to do the same thing but the key
there is put E and then any parameters
you want to pass between those angle
brackets close the whole thing up with
quotes again it's it's fussy syntax but
it's a really handy tool and once you
get used to it it's not hard at all to
do okay so let's go back to slides now
let me just stop here is I don't know if
everybody following us do we have
questions we're doing good hair ok great
so let's look at some other parameters
I'm not going to do demos of all these I
just wanted to mention them to you
because it's nice to know they're there
there's a cutie next attribute that says
when this movie is done play another
movie so you can play a series of movies
there's an autoplay so - making the
movie start automatically when the page
loads controller which you saw you can
have the controller present or not
present depending what you want set the
volume set the scale set I think it will
show you won't with scale in just a
moment
you can set it to loop so you can set
the movie to continuously repeat and if
it's a virtual reality movie you can set
the field of view the original angle the
pan angle the tilt and you can set hot
spots so when people click on different
parts of the panorama you can specify in
your HTML what happens it's really
really powerful technique and I don't
think I have anything that I want to
show you from that yeah let me let's
switch back to demo and I will show you
one thing this is scale now this is the
same movie at the same bandwidth as we
were playing before it's just bigger
which means it's a little blurry because
it's you know it's not that high
resolution but sometimes it's worth it
to get the extra impact and the syntax
is again Curly's tempo I'm just saying
autoplay equals true scale equals to
play it at double size it's our big way
okay okay no that's that's it for the
embed tag for now let's go back to
slides and let's talk about the object
tag now some of you may know the object
tab is a World Wide Web Consortium
standard which the embed tag is not
however the object had worked
differently in in Internet Explorer for
Windows 5.5 and later than it does
anywhere else so as the standard it's
kind of a weak standard if you use just
the object tag you won't get the same
behavior from the different browsers but
so why would you that well the main
reason is because Internet Explorer for
Windows 5.5 plus and later as SP release
two I think
stop supporting the plugins page
attribute of the embed tag it still
supports the embed tag if you have
Quicktime installed and use the embed
tag it will play an Internet Explorer
for Windows but if they don't have
QuickTime it won't look at the plugins
page because they use ActiveX controls
not plug-in
there's no ActiveX parameter
so what happens then is that if they
don't have Quicktime and they're using
Internet Explorer for Windows they come
to your site they don't get a helpful
message if the what to do they just get
a broken icon and you certainly don't
want that but it's pretty nice because
the embed the object tag lets you
specify an ActiveX control so you're no
longer depends on the browser's having
somebody registered for the movie file
type you're going to say look I want the
QuickTime ActiveX and only the QuickTime
ActiveX and if it's not it's not
installed Internet Explorer will say hey
you need this control would you like to
get it and it'll go and get it from
Apple's website so it's a pretty
friendly and it's it's very very simple
and the the syntax is like this you set
the height and width just as you would
with the embed tag you set a class ID
which is an incredibly long complicated
number that you want to cut and paste
and never type twice you can copy it for
our website you can copy it from the
text files on the book or from anybody's
website so embeds this the code base
tells them where to get the ActiveX
control and the user doesn't actually go
and get it Internet Explorer gets it for
them what's different is you have these
params a parameter has a name and a
value so instead of just saying source
equals my movie you say paramah an equal
source value equals my movie and close
the object tags and again you had 16 -
the - movie controller the class ID and
code base never changed it's just cut
and paste things all the parameters
apart from that are in separate
parameters and this works only in
Internet Explorer for Windows 5 actually
that's not 5 + this will work with
almost any version of Internet Explorer
for Windows so what do you do for
everybody it's a nightmare there it is
this is as bad as it gets
you set up your object tag and you put
the embed tag inside of it and what
happens is Internet Explorer for Windows
sees a class ID in codebase and works
with that everybody else sees those
things and says those are part of the
worldwide standard I don't know what
those are
I'm ignoring this and then they fall
through and use the
bed tag so this syntax works universally
if they have a CF a laser pointer is
really going to okay if they have
internet explorer for Windows it's going
to see if they have the QuickTime
plug-in ActiveX control if they don't
it'll offer to get it for them if they
do it'll just use it to play this movie
and it will pass these parameters on to
the click on ActiveX control for anybody
else netscape browser Safari Internet
Explorer for Macintosh they'll see the
embed tag width and height source the
type and if they don't have QuickTime
where to go and get it and don't the
browser will offered is going to get it
for you now one thing that's critical
here is this little business here
ordinarily when you close an embed tag
you can just use the right angle bracket
but if it's in the side of an object tag
you have to be closing with it with a
slash angle more like XML otherwise
things bad things will happen I'd see
Larry
okay the quote at the end of that that
is a typo yep there's no need for that
sorry if you're looking at this oh
that's right it got moved what I should
have inserted after the quote answers
before so if you try to run this exact
syntax it won't run fortunately I debug
the version I actually put in a movie so
let's switch over to demo again computer
two and look at it working properly and
here it is the whole thing actually
working and as you can see it acts just
like the embed tag alone
it's just wrapped in all this other
stuff and this one is closed properly or
your type and plugins page or set so it
really really does work now the question
is if we go back to slide you know why
do this well to make it work in all
browsers and give the people good
experience now the other question is is
there any way to simplify this do you
really have to type all that stuff in
and the answer fortunately is no you can
simplify it nicely if you go to dub dub
dub QT bridge comm there's a free tool
called Paseo it's free it's French it's
great and it's got lots of new features
and it will go ahead and make your tags
for you you just tell it what you want
to do and check off the boxes and it
will spit that right into your web page
for you another is a little 1995 utility
from cute illa teased dub dub dub
utilities calm David there is great he
makes lots of little widgets for
QuickTime and one thing he's got is a
batch converter so that if you've
written embed tags now you say oh no I
have to surround my bed to embed tags
object tags it'll rip through and
replace all your embed tags with embed
tags rap automatically with correctly
formatted object tags
so you just get in bed and it'll do the
rest another possibility is go live if
you lose that upgrade to a recent
version it'll spit all this stuff into
your web page automatically you just
drag the QuickTime image onto your page
and the rest is done so you don't have
to type it all by hand
thank goodness okay so let's look a
little bit more at launching QuickTime
Player you saw that you use that with it
by using the target attribute and the
href so we've looked at the poster movie
I don't think going to do that again
we've seen that let's look at a skinned
movie yeah well post your realistic
let's see here
okay the poster movie just to make
another point well you saw this it can
be a web page it can be another movie to
load to QuickTime Player replaces itself
what I haven't shown you is loading a
JavaScript function and I'm not going to
show you that today but inside your href
you can have a line of JavaScript codes
when someone clicks the movie it
activates a line of JavaScript and you
can auto HRF it so that it automatically
executes JavaScript when the movie loads
to open another window to do any of the
things you like to do with JavaScript
and the only the only key is to make the
target QuickTime Player and some kind of
an href
HRF means click me if you add all the
way to rep equals true it happens
automatically now let's look at a
skinned movie skins are really different
than media skins for other players and
the reason is the QuickTime media skin
is not something a consumer puts on
their player to make you look cool while
it plays your movie a QuickTime media
skin is something that comes it's part
of your movie it's a customized player
that travels with your movie so that
your movie doesn't play in QuickTime
Player it plays in a customized version
of QuickTime Player that you have
created and this can be a really really
nice for brand marketing branding
identification let's go over to the demo
machine and let me bring one up here
here's a standard poster movie I'm going
to click it it's going to launch a
QuickTime movie in QuickTime Player
target equals QuickTime Player but if
your skin to move it
so it's got a custom window shave it's
got custom controls with sprites in it
to do things directional sound go place
it inside of it and it's got the scene I
think it's got a full-screen button
which is cool now I don't know quite
what the point is having a skin player
in full-screen mode because you can
track it around but it's a go place it
inside of it
I don't see if it has a volume
controllers over to 11 shut it off but
the point is you can create a player
that has your logo that says your shape
as the controls you specify you're not
stuck with QuickTime players look and
with media player that can be really
important you know if your media player
is supported by ad revenue and is
looking at keywords the last thing you
want to do is have your movie playing in
a player that's been skinned with
somebody else that because I'm a direct
competitor so these are really nice
especially if you want people to pass
around and share your movies you know
let's let them do it with a click
through to your website you know in your
logo you don't have to do it our way we
can do it your way so those are those
are skins and that's one good reason to
launch QuickTime Player as you can
launch the skin movie another good
reason to launch QuickTime Player is for
full screen movies but let me switch
back to slides just for a second here
make sure that I not skipping something
I wanted to show you okay full screen
movie why use full screen movies
obviously they give them more cinematic
experience use the whole screen not just
a little part of the browser it's not
surrounded by the browser window no
distractions when you're doing that you
want to use high quality source we use a
little movie and you blow it up to full
screen it's going to look pretty grainy
I don't have any of the new great h.264
stuff in my demo here so it's going to
be a little bit cloudier than I'd like
it to be but there's two methods
basically to launch full screen movies
one is to use a movie that has the full
screen characteristic built into it and
the other is to use what's called a
QuickTime media link file to tell the
player launch this movie even though
it's not a full screen movie launching
the full screen mode and I'll show you
both those methods here
the full screen mode when you're using
full screen movies how do you set the
full screen characteristic of a movie
well you can use an apple script this
little droplet on the Alpha website that
will set that characteristic of the
movie it's just a little atom in the
movie that says went to QuickTime Player
when you play this played in full screen
mode you can set it with application
like clean air or live stage or go live
is just a checkbox says yes this is the
full screen movie
and another way to do it is to add a
full-screen widget I think I'll actually
go to the demo screen and just show you
how to do that because I think we're
doing good for time here so let me open
a new browser window and go to this is
website for the book by the way which is
a useful resource
homepage dot-com cutie number four web
and it's ugly guy there but don't worry
about him he won't even hurt you
good the useful items page here and
there's a bunch of downloadable widgets
that you can use to make your screen
movies go fullscreen or stop and
automatic controllers all kinds of fun
stuff so let me go back to the fine here
okay here's the widget demo okay so what
you do if you want to make a movie go
fullscreen and you've gotten my little
full-screen movie widget is open the
movie that you want to play select all
copy close open the widget add and now
save and I believe we now have a full
screen click lap yeah I think I missed a
step
sorry okay it's like
all I said that is the fullscreen we'll
be right right right right
right you are and it's just a movie that
automatically launches into full-screen
mode when it comes and one thing I
should point out that isn't in it so
there's really not much to it it's
really easy to make any movie into a
full time of this full screen movie and
then when you link to it it will just
play in full screen so let's go ahead
and bring one up here click the poster
that launches a full screen movie and
again there's nothing - it's just a
standard href and target QuickTime
Player but the movie itself has been
given a full screen widget so it
launches in full-screen mode and it
makes the most of these you know these
high resolution images now one thing
that can happen when you launch full
screen movies that you don't want to
have happen is if the movie is
downloading as it plays
sometimes when a movie starts to
download the data comes in very quickly
and then it hits something kind of a big
chunk of data and it slows down so it
starts to play it goes into full-screen
mode then it runs out of data and it
stops it falls out of full screen mode
and that's you know that's a jarring
experience you don't want to have it do
that so what you do to prevent that is
you take a JPEG or a gift you know one
pixel just a tiny little image and give
it about a three second duration using
QuickTime Player Pro and just paste that
onto the front of your movies so you've
got those just you know says movie title
or something like that so you have low
data rate for a few seconds and it'll
buffer up ahead and then you won't have
that experience that dropout will go
away and
okay so that's regardless of how you
let's go back to slides regardless of
how you do it that's all there is to
making a full screen movie link up as of
the movie but what if you don't want to
change the movie to full screen what if
you want to play something at full
screen resolution without altering the
movie you want to just change your HTML
maybe your HTML pages are generated
automatically your movies come from an
outside source you don't want to go
through that production process of
adding a widget to a movie you just want
to say hey play this movie in full
screen mode
we have something called a QuickTime
media link file it's a little XML file
you can generate it from a script it's a
little bit of text uses XML syntax uses
the QTL file extension or the move file
extension you can tell the world this is
a QuickTime movie and when put time
opens it and see if it's the XML file
it'll do the right thing you can create
it oh it's really nice if you open up
QuickTime Player just open a movie in
QuickTime Player to create it and say
export one of your choices QT ml file
and it brings up the nice little
dialogue with quick boxes you can say
what you want to do with it and I'll
show you that in a moment so the syntax
if you're doing it yourself is set the
XML version to one yes yes QuickTime
type application QuickTime media link
then it's basically your embed syntax
you only have the option of setting
fullscreen equals full which you can't
do in the browser because browsers can't
you can't launch something fullscreen
inside of a browser window you're
telling the browser how much height and
width to give to the plug-in the plugin
can't use more space than that but the
application can so you can have full
speed equals full or half or normal you
know the standard settings for for even
QuickTime Player of setting blue to play
in full screen so it can scale it up to
fill the screen or it can play it a
normal size on a black background in
this case I said an href but you don't
have to know actually in this case you
oh yeah okay it's just to give it a
click through and the source now the
source is a little tricky when you load
a QTL file
the browser doesn't necessarily tell
QuickTime where it came from the browser
loads this file and hands it over to
QuickTime and so you may not know you
don't want to use typically relative
URLs in a QTL file you want to use the
absolute URL that's a safe way to go you
can use relative URLs on a website but
you can't really reliably use them from
a disk and I've got a disk based
presentation here so I'm using it I'm
going to pull something in off the web
to show you this so let's go ahead back
to the demo machine and I'll show you a
full-screen movie this is a cue KML file
in this case I've got a poster moving
just like always when I click it it's
going to load a QT ml file HRF is full
sample QT l
[Music]
and that was a little movie on my
website that's in our tiny movie that's
not meant to be blown to full size but
obviously it plays full-sized and here's
the XML file itself the obligatory
header lets it know what's going on the
way the URL full screen full auto play
true quit when done true I'm know if you
noticed that but after it played it
didn't hang around a quicktime player
went fullscreen and played and the just
quick QuickTime Player and came back so
you go and that's a really nice effect
to be able to put in your website okay
any questions so far
how we doing all right go back to slides
please
see if there's anything here I haven't
covered then I want to tell you ah if
you're launching home text link I showed
you launching from a poster so basically
you had a QuickTime movie when you click
the movie you told QuickTime the href
was a QTL file if you put it if you just
put a QT L file a link to a QT l file on
your on your HTML so a href yada yada
QTL when they click that if they have
Quicktime QuickTime will be registered
as for its mime type its application
QuickTime Player so it should launch
QuickTime Player and just play at the
movie but that depends on the web server
having the mime type properly configured
it depends my QuickTime being installed
and registered for that mime type on
your machine and it leaves mouse
droppings if you've ever used a real
media where you click a little RM file
which is a little text file with the URL
in it and it plays the movie and then
you get to the lower end file with some
text in it sitting around on your hard
drive
so it has that same defect and it's not
really don't recommend doing it that way
but you can if you really need to link
to a QuickTime movie using a text link
only and you want to launch an QuickTime
Player you know make it work more like
real that's that works as well as that
works so let me show you something this
is a nearly full screen movie sometimes
you don't want to launch QuickTime
players they will I want to use to just
fill the screen but I want to stay in a
browser window can I do that it's nice
there's been some additions to
javascript in recent years you have a
self resize command which is here to
screen with window screen available
height if you try to do it to window
height it won't work because there's
some overheads they need you need to use
the available height but if you use the
syntax and then move the window to 0 0
to begin with it'll move there and
resize itself now to do this you really
ought to launch the window itself in
JavaScript because you launch this
window and then resize it if you do it
otherwise let's go back to the demo
machine here
and here's a nearly full screen I know
that's the ceiling I'm sorry nearly full
screen mode here we are almost full it's
not really there I'm reloading that's
what it's supposed to do so it when it
loads and reloads it goes to full screen
and it just scales the movie up with it
and it works pretty well you're still in
a browser window you still got all the
usual assortment of things here it
really is the same window it's just
caused it to scroll up to full size and
that's a nice trick to use on panoramas
DK which I'm going to go back to now
just to show you what it looks like when
it's done right mouse click with your
screen of the week you see it opens it
in JavaScript and resizes now this did
you see that blur for a moment there
that's a preview it's a blurry QuickTime
preview for VR if you're on a slow
connection you can be looking at that
black grid for a long time so it's nice
to give people a little preview so they
can manipulate around and see what's
going on the bad thing about the preview
is sometimes people they're looking at
it for a long time think that you just
get a really blurry panorama so it's
good to add a little text to your
preview image it says loading image and
I'll show you that in just a minute here
because I think we're doing good here
for time okay
how we doing for questions we okay
yes take one
yes the question is did it just use
JavaScript to launch that and the answer
is yes when I click on that link it it
it executed an on click JavaScript
function it's just new window and then
inside that new window was the syntax
that I showed you if we go back to
slides the syntax here inside that
window was a little JavaScript to resize
move itself to 0 and resize it the
available screen height and width so you
know get a JavaScript look and learn how
to make a click launch a window it's
pretty easy to do and then a window will
resize itself and that's a really nice
trick and you can just scale the the
movie to fits that height would to 100%
and scale to fit and it'll work
so no slide okay let's okay oh mpeg-4
yeah we talked about this before we
showed you a couple mpeg-4 players they
showed you intake for play in QuickTime
but there's two ways to use mpeg-4 media
in QuickTime and one way not to use it
the main and obvious way is to put
mpeg-4 encoded video and mpeg-4 AAC
audio inside your QuickTime movie use
those compressors and play them inside a
QuickTime it's a standard QuickTime
movie it just uses the codec from mpeg-4
and that works great there's no problem
with that
the other way is to use actual mpeg-4
files in that case you open up your
QuickTime movie in QuickTime Player and
export to mpeg-4 and you'll have some
options to set for you know how you want
to pass the bandwidth that'll save it as
an mp4 file now there's an advantage to
see using mp4 which is that it's an
interoperable file type there are mp4
players for lots of different platforms
if you want to play it on Linux and
there's no QuickTime for Linux you can
save it as mp4 there are mpeg-4 players
on Linux
if you want to say look I don't care if
they have real or QuickTime or what as
long as they have some kind of impact
for player I want it to play so I'll
just send out an mpeg-4 and whoever's
registered for it gets it now you have
less control that way but that's another
reason you might want to do it what you
absolutely do not want to do is to save
it as an mpeg-4 file and change the
suffix to MOV people do that all the
time
ok X foot is mpeg-4 I want to play in
QuickTime soul change the file suffix to
movie the QuickTime says oh it's a movie
and it starts to open it and the mpeg-4
file specification is based on the
QuickTime file specs so they look very
similar inside but there are details
that are different and you do not want
to try to fool QuickTime into thinking
an mpeg-4 file as a movie file because
it won't play properly
bad things will happen so but it is a
nice thing to use as itself so either
put the media in a QuickTime movie or
save it as an mp4 file and again if you
want to play an mpeg-4 file come back to
demo here in a quick you want to save it
as mpeg-4 which want to make sure it
closed in QuickTime that's pretty easy
to do just now in this case I'm using it
whatever your source is in this case
it's a QuickTime image it could be a
movie it doesn't get displayed the
browser looks at it goes oh it's a
QuickTime media so called a QuickTime
Player QuickTime says well yeah there's
a source there's also a QT source so
I'll play what's in Qt source and ignore
what the browser hands me a source but
make that a small file because the
browser will download it you don't want
to have a 25 megabyte movie as your
placeholder want to have a 8 kilobyte
image but as you can see if you do this
I've got an mpeg-4 player here called
specific dot mp4 and it comes up in
QuickTime not anything else
that'll work that way and Internet
Explorer on Windows or anything else ok
we're racing through this
so I've got I'd like to show you some
practical thing well I was going to go
back to slides here and make sure I'm
where I think I am if we go back to
slides
thank you okay there's the points I just
hit on okay and we're on the last part
of it I want to show you some things
about optimizing QuickTime VR for the
web because it's not obvious and it's a
good way to give some people its useful
tips for for QuickTime movies in general
so if we come back to the demo machine
here I will okay there's something
called one of the reasons we call fast
start movie a fast start movies because
the movie part there's a header in the
file that tells QuickTime how to play
the data if the data comes before that
header you have to wait till it all gets
there before you know what to do with it
but if the header comes first then
QuickTime knows what to do with you
immediately if you have some old if you
ever clicked on a website it has like a
QuickTime movie or QuickTime VR and you
see a blue cue or a white space and
you're waiting and waiting and waiting
for something to happen actually there's
a great example of that on Apple's
website it's good to the boy still on
slide songket Thanks this is a V our
website and see this is kind of large
see there's nothing here we're waiting
for the file to download but we don't
see anything until it downloads and
wasn't too long so we have a fast
connection if we have a slow connection
it would have been quite a bit longer
slow this down and it's neat and now you
can get around this is a nice way to
show this is yet another piece of
QuickTime technology that's called the
QuickTime object VR so if you have
things for sale you have museum
artifacts that people would like to
handle and you'd like to let them handle
it but you can still zoom in
look more closely at things there's nice
way to show objects products artifacts
on the web but you don't want to have
you want to have a fast start and the
way you make a movie Fast Start is you
open it in QuickTime Player and you do
just do a save as or save to make it
self-contained that will automatically
make it fast start so most movies are
automatically fast start with some of
the older applications like the one that
turned out that object VR don't make
fast our movies so just open in
QuickTime Player and export it or save
as self-contained and it will take care
of itself so that's okay make sure you
show you how to do that if you open a
movie and it happens you a slow start
movie just go to file save as give it
your name save it now I did that wrong
let me show you again and screwed it up
it's simple and I still screwed it up
save as set it to make movie
self-contained if you allow dependencies
you've created a little movie the points
to the movie you are opening and they
make it self-contained movie now that is
always a fast start movie but you can do
better than that especially if you have
panoramas you can export a panorama from
QuickTime Player using the export menu
and one of your choices is movie to fast
start QuickTime VR movie that seems
explicit and what this does among other
things is not only make it a fast hour
movie but there's an options button here
it allows you to create a preview that
little blurry preview and you can set it
to be a quarter or half the size and
blurry so you set your quality for what
kind of compression you want to use for
the image and it'll go through the
panorama and actually create a preview
image of it compress the way you want
and the size you want you want to make
it fairly small because you want to load
up early and that lets people manipulate
and look around in the VAR wallet
downloads and I think I can load this
from a website that's hopefully slow
enough that you'll actually see this
let's go to
test and see which one I want to use
here that's okay and a panel fast
okay so we're going to load put this
where I can see it we're going to load a
VR panorama from what's traditionally a
pretty slow website
I seem to have misspelled something here
Oh movie
sorry about that okay now we're out of
luck it's a fast connection today you
downloaded and what you would have seen
had it been a slow download was you
would have seen a black matrix because
there's no preview in this image let's
try with the preview I think it's going
to be this fast though that we'd be out
of luck
let's try PR e1
again yeah okay so one thing you can do
is to go ahead and load preview image
have a generator preview image you can
also have a load of preview image so you
can take the panoramic image and bring
it into Photoshop recompress it blur it
make it small and add text to it that
says image loading and unfortunately
because this is so long actually let's
go back try to do this the other way
usually the problem with the web is not
that it's too fast cancel its high
resolution image okay you probably only
saw for a fraction of a second there's a
blurred preview and there was text on it
that said you know image loading so that
they would understand that this is not
the only thing you're going to see that
it will eventually come through and as
you can also see it's got an auto rotate
sprite in it and this is really nice
because when you load a there you go
when you load a panorama a lot of people
think they're looking at a still image
they don't realize it's something they
can move around in so you put an auto
rotate sprite in it and lets them
realize there's something to be done
here and again you can get free sprites
on the web adding a widget is pretty
straightforward and all you do is open
the widget and add it to your paddock
well actually adding things to a
panorama is tricky enough and let me go
ahead and show you how to do that let me
open this
panorama
okay okay
here I've got a panorama and let's go
ahead and dismiss this to edit things in
QuickTime Player a panorama you have to
do something that's a little bit tricky
you have to set the movie properties the
editing feature is part of the movie
controller and the VR controller doesn't
allow you to edit because it's not
time-based so if you go to the movie
controller suddenly you're heading
features are enabled and you can copy in
and add things to it so now if I go here
and get to my auto rotate sprite
and this is the process you would go
through normally just okay here's week
sprite where's where's on auto-rotate
sprite here we go rotate sprite
I'll just control click it and download
it to my desktop and there's not to be
there somewhere
- here's my desktop
okay here's net little auto-rotate
sprite and again I select all copy and
close it so I don't need it anymore then
I go to the movie that I want and here I
select all again and I'm just going to
add the widget to the movie so edit add
okay let's undo that like the answer try
select not an ad okay oh I think the
widget has a longer duration in the VR
panorama but that doesn't really matter
so if we set the controller back to the
VR controller that should now be honest
our movies looks there we go there's
really nothing to it one of the nice
things about QuickTime is this ability
to add sprites and widgets and effects
you take something that's static and you
add a widget to it so maybe it does neat
things so this way you can create a VR
panorama that gives a nice preview image
lets people know there's more coming and
listen note they're looking something is
in the static image and that's the
material I plan to cover for today so
that's that's it unless you have
questions