---
title: WWDC2004 Session 707
framework: wwdc
role: article
path: wwdc/wwdc2004-707
---

# 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