Greetings. Welcome to session 707, Quick Time for the Web. Nice to see you all here this afternoon. Get this guy to go. Rhonda Stratton is here. I'm Steve Gooley, 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 the mix, and just a tiny bit of JavaScript.

So what we're 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'll 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 website at Apple. It's a really nice website. It's the www.apple.com/quicktimetools-tips, under bar dash. And it's got a lot of great tutorials there. And it's also available in this book, Quick Time for the Web, which you can get at Amazon. Or if you go over to the Quick Time Lab, the Morgan Kaufman Publishers has a form there. You can get it. And it's right 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, because you probably as a website developer are thinking, well, streaming video, should I use Reel, should I use Windows Media, should I use QuickTime? QuickTime is a lot more than just streaming video, and I want to give you 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. I'll just give you a quick run through of some of the things that you can do with QuickTime on the web. If we can switch over to demo one. Computer 2, I think you're calling it. Here we go. The role of the dark in motion pictures.

Recall the ratchet and flutter of grade school projectors. Sprocket teeth sank into slots in the film, feeding into a loop, slack enough not to tear. This will run over a dial-up modem. You can have a website that talks in good, rich speech automatically over a dial-up modem. This is a different kind of multimedia. It's rich not because you've got a zillion things going on, but because the content is exciting. And people just really, really react to a website that starts talking when they show up. Here's some music, a little bit of something from Wilco.

As you can see, this is a custom player that launches from your web page. And you can move it around, drag it around, close it, and it plays the streaming music. Here's a slide show. Let me get this guy here. Here's a web page that 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 that lasts for 10, 15 seconds, and then 30 FPS video mixed in with it.

So 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 just a tremendous... pretty high resolution image, but if you look at the actual video track, it's got Let's see, what's the frame rate here? 0.15 frames roughly per second. And of course that changes. But if we look at the size, let's see, I wanna get the general look out here. There we go. We're looking at 8.7 kilobytes per second for pretty high-res video. Animation is worse.

It's fairly flashy. That's 40K. That's the size of a 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 of places, you can zoom in, just kind of stick your head inside places and museums love this, it's wonderful for architecture, for visiting places that you've never been before, real estate.

And, oh, here we go, one of my favorite websites these days, Panorama's DK. 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 fills in as it comes along. You can kind of look around. But 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... What's through that door? Let's go see. Oh. Oh. and it just reveals whole worlds. 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 pretty cool.

In addition, there are things like 3D models, which are available. 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 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 that it needs it, offers to get it, downloads it, installs it automatically. And it's a pretty seamless experience for your users. It lets you do things that go beyond the-- 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. They fade in and out, the interiors.

And again, it's just a lot of different kinds of media involved here that go far beyond what we normally think of as streaming movies. And if we can go back to slides, please. OK. Oh, there's one more thing, interactive mini applications. I wanted to show you some of those. We can come back to demo computer two. and bring those up. And you already saw some of that already. You saw that there was a skinned player, there were interactive VRs you could drag around, but there's really a lot of other neat stuff you can do. Here's a calculator.

which isn't working. Here we go. Scientific calculator as a QuickTime movie. There's something cute. K-A-T-Y. Katie. Katie. Katie. Guy wrote that in a few minutes to entertain his granddaughter. And, you know, you can just do things that are not... to go quite a bit beyond what you might have thought of as streaming video or streaming audio. And I'm not going to go too much further into that. Let's go back to slides because, of course, 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, you When you think of streaming video, what you're thinking of is a movie that plays while you watch it. 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 is called Fast Start and the other is called Real-Time Streaming. Now, Fast Start Movie works on pre-recorded material only, but it sends the movie from start to finish just as you would 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, and you've got a one megabyte per second connection, it sends it in one second, and then it plays it as it can. Amen.

And you can play as much of the movie as has downloaded already. So the movie downloads while you're playing it. And if you've got a slower connection, you can only watch the parts that have come already. But if bandwidth permits, if you've got enough bandwidth to see the movie in real time, you do, and it's just like streaming. Let me go back to demos here and kind of show you some of what I'm talking about here.

Let's go to Riding Giants here. This is-- you can see that little bar at the bottom of the movie zipping along? That's the movie downloading. And it's playing while it downloads. And we have what looks a lot like streaming video, right? It's just playing as it comes in over the internet. But it's not streaming, it's 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. Okay. Let me compare you head-to-head a streaming video and a fast start video to show you what's similar and what's different because it's easy to get confused. Here's a fast start video. And we put that at double size so you can see it a little better. And again, 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.

OK, here's a streaming video. And as you can see, there really isn't a lot of difference to the user. 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 any more than has already downloaded. Well, now the whole thing is downloaded. I needed to move a little quicker to show you that.

With a streaming movie, I'm not downloading anything, so as I 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 Fast Start movie, as you saw, you could play it. The bandwidth was permitted, so you could see it in real time. If there hadn't been enough bandwidth to play that movie in real time, you would have just watched 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 of 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 a three hour lecture series, streaming is a good way to go because people can skip around to where they need to go without 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 300 kilobit per second movie and a 100 kilobit 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 and 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've got a live broadcast, streaming is the only way to go. You can skip around in 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 a cache. You're just sending a stream of bits that are being displayed and then discarded. But if they've got audio hijacked, they can capture the audio. If they've got a video buffer hijacker, they can do that. So 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 start 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 people are willing to wait for it, they'll get the whole thing. They will not be able to get it as a stream.

You can make them protected or saveable. Sometimes you want people to be able to save your movies. If your movie is basically a commercial for your product, you don't want to copy protect it. You want it to be passed around. You want everybody 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 start-- sprites, VR, a lot of those things we were just looking at that are flash media that are beyond simple audio and video and text.

OK, so why bother to use QuickTime rather than one of the other players? Obviously, you've got a much broader palette of media to work with than 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. Maybe it's a 40K image, but it's on the 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 demo 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 work, your production, at the highest possible quality, archive and save it at the highest possible quality, and then recompress it 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 your material. Thank you.

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 Reel or Windows or another form of QuickTime to say, gee, I put this stuff out on the web in Sorenson, 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 text or logo on it if your corporation changes. You can reuse your material. I think you're going to find that with the other media choices, it's more of a one-way street. You put it in and you say, okay, 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 fast start. Standards-based, I think we've talked a lot about standards in other sessions. I'm not going to go into it in too great a detail here, but we're really committed to working with standards and quick time open standards so that our players are interoperable with other people's players. You're not roped into what Apple does. If Apple decides, well, we don't 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 stuck.

Finally, distribution. We've been running third for a long time, and sometimes it's a hard sell to your clients to say, well, we want to use QuickTime. They'd say, well, isn't ReelPlayer more widely distributed or Windows Media Player? As of now, that's really not true anymore. We've pulled it well ahead of Reel, and we are neck and neck with Windows Media. We've got over 250 million copies downloaded of QuickTime 6, partly because it comes with iTunes, partly because it comes with digital cameras, but we're seeing a tremendous success there. So now if your client says, I think you can honestly say that QuickTime is the choice. I think that's the way to go. So let's get down to some real brass tacks. How do you put a 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 that says just, hey, href, a typical hypertext link to this movie file. And the reason is you can't really tell the browser what kind of MIME type your file is. You're just giving it a file name. And if it doesn't have the right extension or the server isn't properly configured, it will show up as text. You can't tell the browser to use the QuickTime plug-in. So if they have an old version of Windows 95 running Windows Media Player 3 that says, oh, I can play movie files, that's what they'll get. And it won't play the movie file. It'll just show a broken icon. And you can't really control the plugin to the player. You're just passing a file name. You don't know what's going to happen. You can't say, I want it autoplay, or I want it 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. And if QuickTime isn't installed, you've just linked it can't display and you just get a broken icon.

That's not the user experience you want them to have. So we recommend primarily using the embed tag, and that's what we're going to focus on. And we'll show you the new object tag, too. The embed tag works in all browsers. It works in Safari, it works in Netscape, it works in Internet Explorer, and 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 plugin. You can control a lot of things.

We'll show you some of the things you can control. And if you don't have QuickTime installed, it takes the person 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'll 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 it's in the same folder as the HTML, it's just the file name. You set the type. The type is always video slash QuickTime for movies. There are also QuickTime image files you can use for placeholders, but that was once needed to prevent problems that came up when certain versions of Windows Media Player would register themselves for the movie file type. So you would say, "Well, I'll pass this other file type." That's no longer a concern because of the object tag, as 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 www.applecom/quicktime/download. That's always the 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 quick time. The plugins page is 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 quick time. And let's go ahead and show you, if we'll switch back to computer two here, a simple embedded movie, just to show you the syntax.

done here is to tell it to autoplay and set the volume down to 25%. There's my embed, 240 by 196, 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 plugin, which is one of the nice features of the embed tag. So we can switch back to slides here. Let's Fun with the embed tag. What are we going to show you here? OK, let's look at the QT source. There are a bunch of embed tag parameters, attributes you can pass to the QuickTime plugin to tell it to do things with your movies.

And if you look at that website I gave you or get the book, you'll get a full list of them all. But I want to show you some of the more enjoyable ones, some of the more important ones. One is the QT source parameter. Use QTSource. I'm sorry, can we switch back to computer two?

QtSource is a parameter that tells QuickTime, 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, but 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 QuickTime 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.

Here, for example, it's similar. Play an MP4. And this is the same movie we were 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 the browser to choose QuickTime and using it to play an MPEG-4.

Here's yet another one. Here we're using QuickTime to play Smile. Now, probably if you have RealPlayer installed, it's registered to play Smile files. But we can cause QuickTime to play it just by setting the source to a QuickTime image and the QT source to what we really want it 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. And 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 a 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 a text processor. So that's using source and QT source. So the QT source is a wonderful little attribute you can add. And let's switch back to slides.

Now let's look at three other parameters, href, auto href, and target. You can set an attribute to your QuickTime embed tag that says, when someone clicks on the movie, go somewhere. Activate a URL. And that URL could 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 when they clicked 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 another frame. You can set the target to be myself, meaning the QuickTime movie. So once someone clicks the movie, it turns into another movie. You can set the target to QuickTime player, so it launches the player application.

And if we'll switch back to demos, 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 a click through. We've got a movie that's embedded in the player. And if you click on the movie, it opens the website where the movie came from. So that's just a-- and it works whether the movie is playing or not. Damn, that's a big wave.

And if you look at the source, it's nothing complicated. We set the source to the movie, set the height and width, turned on the controller to make sure it's there, give it an autoplay, and we have href, where you want it to go, target, in this case, a new window. Not much to it.

So you can set click throughs on your movies. So if you've got a movie that's displaying a product or your service, you can click through to your website. And that'll work even if the movie is playing in QuickTime Player. Well, no, not if you put it in HTML. It's got to be in a website. Sorry.

You can set the 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 web page, and suddenly is downloading a 5 or 6 or 10 megabyte file, and they're going, 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 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 false because we don't want people to try to play the poster. We want them to click on it. We don't want them to think of it as a movie. We want them to think of it as an image. But we use a movie because that way the QuickTime plugin 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, if you look at it, you'll see it just moves down about eight 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 browser. And, OK. Let's look at setting a different target. In this case, again, we have the same poster, same href. We set the target to QuickTime Player instead of myself, which means when we click it, it launches QuickTime Player. And sometimes you might want to do that, because people can do things like-- oh, look at the movie Double Size, or fast forward through it. back up because they can't quite believe what they just saw. Can you really do that?

Completely psycho. I love it. So those are some pretty good things you can do with the QT 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. Did you like that? Let's watch that again. Ahref means click it and it goes there. Auto Ahref means just go there. So why would you want to do that? I'll show you a different version of that page called Redirect.

Does it? OK. This is a different version of the page. This is the page that was loading, but because it was an auto href, you didn't have to click it. It just went there. Back up here. There's an href to a page called has quick time. And if you have quick time, because it's auto href, it just goes there. Well, what if you don't have quick time? Here's a tag. This is standard HTML. This isn't quick time. This is meta HTTP.

content, you set a URL and a timeout. And if nobody does anything before the timeout, it 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 hasQt. If you don't have QuickTime, it's going to take you to getQt. And you just have to wait for the timeout. And you can set that timeout to whatever you need. So is that making sense to people?

Okay, good. Because sometimes it's a little hard to wrap your head around the fact that you're using QuickTime to detect QuickTime. But if it has QuickTime, it'll go to one page. If it doesn't, it'll time out and go to the other. And that lets you provide an experience to your users and say, well, if they don't have QuickTime, 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 that is media-rich and one that's just, you know, JPEGs and text, if you don't want to ask people to download. The way we set it up though, nowadays, it's pretty good at getting people to download QuickTime automatically. Okay, let's go back to slides here.

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 want to do that, I want to do the other thing, make it autoplay, give me no controller, do it at such and such a size, at such and such a volume." Then you click the HREF and it brings up another movie in place of itself. Now how do you give instructions to that movie? 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 at 75% or double scale. So what you do is you use the e tag and the syntax. I think I'm going to show you on the demo machine. So if we go back to computer two, I'll bring up-- if we can switch to computer two. Here we go.

Here we go. And here, it's very simple. I'm going to click the poster, but the href is to Jaws, Waves, Movie, Target, Myself, E, the extensions, autoplay false, volume equals 25. So when I click this, it doesn't autoplay the next movie, and when I play it, 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. You put everything in quotes, put the URL in angle brackets. This T here, this is optional. You could have said target equals myself. 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 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. Let me just stop here. I don't know, is everybody following this? Do we have questions? We doing good here? OK, great.

So let's look at some other parameters. I'm not going to do demos of all these, but I just want to mention them to you because it's nice to know that they're there. There's a Qt Next attribute that says when this movie is done, play another movie. So you can play a series of movies. There's an autoplay to make the movie start automatically when the page loads. Controller, which you saw, you can have the controller present or not present, depending on what you want.

Set the volume. Set the scale. I think I will show you one with scale in just a moment, But 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 hotspots. So when people click on different parts of the panorama, you can specify in your HTML what happens. That's a really, really powerful technique.

I don't think I have anything that I want to show you from that. Yeah, 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 not that high resolution. But sometimes it's worth it to get the extra impact. And the syntax is, again, fairly simple. I'm just saying autoplay equals true, scale equals two. Play it at double size. Those are big ways, aren't they?

OK, well, that's it for the embed tag for now. Let's go back to slides. Let's talk about the object tag. Now, some of you may know the object tag is a World Wide Web Consortium standard, which the embed tag is not. However, the object tag works differently in Internet Explorer for Windows 5.5 and later than it does anywhere else. So as a 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. So why would you use it? Well, the main reason is because Internet Explorer for Windows 5.5 plus and later, as SP released too, I think, stopped 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 on 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 plugins. 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 of what to do, they just get a broken icon. And you certainly don't want that. But it's pretty nice because the object tag lets you specify an ActiveX control, so you're no longer dependent on the browser 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 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 pretty friendly, and it's very, very simple.

And 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 from our website. You can copy it from the text files on the book or from anybody's website who 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. The param has a name and a value. So instead of just saying source equals my movie, you say param name equals source, value equals my movie.

And close the object tag. And again, you add 16 to the height for the movie controller. The class ID and code base never change. It's a cut-and-paste thing. All the parameters apart from that are in separate param tags. And this works only in Internet Explorer for Windows. Well, 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 the class ID and code base and works with that. Everybody else sees those things and says, those aren't part of the worldwide standard. I don't know what those are. I'm ignoring this. And then they fall through and use the embed tag.

So this syntax works universally. If they have-- let's see if my laser pointer is really going to-- OK. If they have Internet Explorer for Windows, it's going to see if they have the QuickTime plugin, 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 onto the QuickTime ActiveX control.

For anybody else, Netscape browsers, 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 the browser will offer to go and 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 a right angle bracket. But if it's inside of an object tag, you have to be close it with a slash angle, more like XML. Otherwise, bad things will happen. Let's see, where are we?

OK, the quote at the end of that, that is a typo. No need for that. Sorry. If you're looking at this-- Oh, that's right. It got moved. I should have inserted it after the quote, and I inserted it before. So if you try to run this exact syntax, it won't run. Fortunately, I debugged 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, where your type and plugins page are set. So it really does work. Now the question is, if we go back to slides, 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 www.qtbridge.com, there's a free tool called Pagio. 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'll spit that right into your web page for you. Another is a little 1995 utility from Qtilities, www.qtilities.com. 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 embed tags with object tags. It'll rip through and replace all your embed tags with embed tags wrapped automatically with correctly formatted object tags.

So you just do the embed and it'll do the rest. Another possibility is go live. If you use 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.

OK, so let's look a little bit more at launching QuickTime Player. You saw that you used that by using the target attribute and the href. So we've looked at the poster movie. I don't think we're going to do that again. We've seen that. Well, let's look at a skinned movie. Yeah.

Let's see here. OK, the poster movie, just to make another point-- well, you saw this. It can be a web page. It can be another movie that loads your QuickTime player or 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 href it so that it automatically executes JavaScript when the movie loads to open another window to do any of the things you'd like to do with JavaScript.

And the only key is to make the target QuickTime player and some kind of an href. Href means click me. If you add auto href 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 a QuickTime media skin is not something a consumer puts on their player to make it 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 really, really nice for brand marketing, brand identification. Let's go over to the demo machine. And let me bring one up here. Here's a standard poster movie. You're gonna click it, it's gonna launch a QuickTime movie in QuickTime Player, target equals QuickTime Player, but it's a skinned movie. So it's got a custom window shape. It's got custom controls. little sprites in it to do things, directional sound.

Go places inside of it. And it's got-- let's see. I think it's got a full screen button. which is cool. Now, I don't know quite what the point is to having a skin player in full screen mode because you can't drag it around. But it's-- let's see. Go places inside of it. I don't think it has a volume controller, though, which is why I'm going to shut it off now.

But the point is you can create a player that has your logo, that has your shape, that has the controls you specify. You're not stuck with QuickTime Player's look. And with the media player, that can be really important. 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's advertisements. You may need a direct competitor. So these are really nice, especially if you want people to pass around and share your movies. Let them do it with a click-through to your website in your logo. You don't have to do it our way. We can do it your way. So those are skins. And that's one good reason to launch QuickTime Player, because you can launch a skinned 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'm not skipping something I wanted to show you.

Okay, full screen movie. Why use full screen movies? Obviously, they give a more cinematic experience. You 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. If you use a little movie and you blow it up to the 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, launch it in 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. There's a little droplet on the Apple website that will set that characteristic of a movie. It's just a little atom in the movie that says, went to QuickTime Player, when you play this, play it in full screen mode.

You can set it with application like Cleaner or Live Stage or Go Live. It's just a checkbox that says yes, this is a full screen movie. And another way to do it is to add a full screen widget. And I think I'll actually go to the demo screen and just show you how to do that. Cuz I think we're doing good for time here. So let me open a new browser window and go to, this is the website for the book by the way, which is a useful resource.

homepage.mac.com/qt4web. And there's an ugly guy there, but don't worry about him. He won't hurt you. Go to the useful items page here, and there's a bunch of downloadable widgets that you can use to make your movies go full screen or stop and automatic controllers, all kinds of fun stuff. So let me-- back to the finder here. Here's the widget demo. Okay. So what you do if you want to make a movie go full screen and you've got 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 that we now have a full screen. If we play it-- yeah, I think I missed a step. Sorry. OK. Oh, I saved it as the full screen movie. Right, right, right, right. Right you are. - Okay. And it's just a movie that automatically launches into full screen mode when it comes. Now, one thing I should point out that isn't in the... So there's really not much to it. It's really easy to make any movie into a 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, and it launches a full screen movie. And again, there's nothing to it. It's just a standard href and target quick time player. But the movie itself has been given a full screen widget. So it launches in full screen mode. and uh... It makes the most of 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, and it falls out of full-screen mode. And 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 GIF, one pixel, just a tiny little image, and give it about a three-second duration in QuickTime Player Pro, and just paste that onto the front of your movie. So you've got-- it 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.

OK. 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 a 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. It 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 QuickTime opens it and sees it's an XML file, it will 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 is QTML file. And it brings up a nice little dialogue with click boxes, and 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 full screen equals full, which you can't do in the browser because browsers can't... You can't launch something full screen inside of a browser window. You're telling the browser how much height and width to give to the plug-in. The plug-in can't use more space than that, but the application can. So you can have full screen equals full or half or normal. You know, the standard settings for any QuickTime player of setting a movie to play on full screen. So it can scale it up to fill the screen or it can play at a normal size on a black background. around. In this case, I set an href, but you don't have to.

No, actually, in this case-- Oh yeah, okay, that'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 that is a QTML file. In this case, I've got a poster movie, just like always. When I click it, it's going to load a QTML file. Ahrefs is full sample QTL.

And that was a little movie on my website that's a tiny movie that's not meant to be blown into full size, but obviously it plays full size. And here's the XML file itself. The obligatory header that lets it know what's going on. The URL, full screen full, autoplay true, quit when done true. I don't know if you noticed that, but after it played, it didn't hang around in QuickTime Player. It went full screen, it played, and then it just quit QuickTime Player and came back. I'll show you again. And that's a really nice effect to be able to put in your website. Okay, any questions so far? How are we doing? All right. Go back to slides, please.

If there's anything here I haven't covered that I wanted to tell you. If you're launching from a text link-- I showed you launching from a poster. So basically, you had a QuickTime movie. When you clicked the movie, you told QuickTime the href was a QTL file. If you just put a QTL file-- a link to a QTL file on your HTML. So A, HREF, yada, yada, QTL. When they click that, if they have QuickTime, QuickTime will be registered as... Its MIME type is Application QuickTime Player. So it should launch QuickTime Player and just play the movie. But that depends on the web server having the MIME type properly configured. It depends on 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 this little RM file with some text in it sitting around on your hard drive. So it has that same defect. And I 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 in QuickTime Player, make it work more like real. 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 Player. Say, well, I want 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 width, window screen available height. If you try to do it to window height, it won't work because there's some overhead that they need. You need to use the available height. But if you use this 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 it launches the window and then resizes it. If you do it otherwise-- let's go back to the demo machine here. And here's a nearly full screen. Oh, no, that's the other one, sorry. Nearly full screen mode. Here we go, almost full.

It's not really there. Let me reload it. That's what it's supposed to do. So when it loads and then 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've 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 they use on Panorama's DK, which I'm going to go back to now just to show you what it looks like when it's done right. Let's look at their 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, if they're looking at it for a long time, think that you've just got a really blurry panorama. So it's good to add a little text to your preview image that says loading image. And I'll show you that in just a minute here, because I think we're doing good here for time. OK.

How are we doing for questions? Are we okay? Yes, take one. Yeah, the question is, did it just use JavaScript to launch that? And the answer is yes. When I clicked on that link, it executed an on-click JavaScript function that's just new window. And then inside that new window was the syntax that I showed you. Okay.

If we go back to slides, the syntax here, inside that window was a little JavaScript to move itself to zero and resize it to the available screen height and width. So get a JavaScript book and learn how to make a click, launch a window. It's pretty easy to do. And then the window will resize itself. And that's a really nice trick. And you can just scale the movie to fit, height and width to 100%, and scale to fit, and it'll work. So no slide. OK, let's-- Oh, MPEG-4, yeah. Now, we talked about this before. I showed you a couple MPEG-4 players. I showed you MPEG-4 playing 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.

You can use those compressors, play them inside of QuickTime. It's a standard QuickTime movie. It just uses the codecs 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 how you want to pass the bandwidth. That'll save it as an MP4 file. Now, there's an advantage to 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 MPEG-4 player, I want it to play. So I'll just send it out in MPEG-4, and whoever's registered for it gets it. 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.

Okay, I exported it as MPEG-4. I want it to play in QuickTime, so I'll change the file suffix to MOV. 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 is a movie file because it won't play properly. Bad things will happen. 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.

You want to save it as MPEG-4, but you want to make sure it plays in QuickTime. It'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 and goes, oh, it's a QuickTime media, so call the QuickTime player. QuickTime says, well-- Yeah, there's a source, but there's also a QT source, so I'll play what's in QT source and ignore what the browser hands me as 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. You want to have an 8 kilobyte image.

But as you can see, if you do this, I've got an MPEG4 player here called pacific.mp4, and it comes up in QuickTime, not anything else. And that'll work that way in Internet Explorer on Windows or anything else. Okay. We're racing through this. Thank you. So I've got-- I'd like to show you some practical things. Well, let me go back to slides here and make sure I'm where I think I am. If we could go back to slides. Thank you. OK, 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 non-obvious, and it's a good way to give some people... It's useful tips 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 a fast start movie a fast start movie is 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 until 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 it immediately. If you have some old... If you ever clicked on a website that has a QuickTime movie or a QuickTime VR and you just see a blue queue or a white space and you're waiting and waiting and waiting for something to happen. Actually, there's a good example of that on Apple's website. Let's go to the... Are we still on slides? OK, thanks. This is a VR 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 it wasn't too long, because we have a fast connection. If we had a slow connection, it would have been quite a bit longer. Slow this down. It's neat. You can look around. This is a nice way to show this is yet another piece of QuickTime technology. This is called the QuickTime Object VR. So if you have things for sale, or 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. This is a nice way to show objects, products, artifacts on the web. But you don't want to have -- you want to have it fast start. And the way you make a movie fast start is you open it in QuickTime Player and you just do a save as or a save and make it self-contained. And that will automatically make it fast start.

So most movies are automatically fast start, but some of the older applications like the one that turned out that object VR don't make fast start movies. So just open it in QuickTime Player and export it or save as self-contained and it will take care of itself. OK. Let me just show you how to do that if you-- Open a movie, and it happens to be a slow start movie. You just go to File, Save As.

Give it a new name, save it. I did that wrong. Let me show you again. I 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 that points to the movie you were opening.

and you 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 start movie but Here'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. 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 it to load up early, and that lets people manipulate and look around in the VR while it 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. OK, 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.

Seem to have misspelled something here. Oh, it's a movie. Okay, well, we're out of luck. It's a fast connection today. It 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 if it's going to be this fast, though, we're going to be out of luck. Let's try PRE1.

Okay, again, okay. So the one thing you can do is to go ahead and load a preview image, have it generate a preview image. You can also have it load a 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, well, actually let's go back, let's try doing this the other way.

Usually, the problem with the web is not that it's too fast. OK, let's look at the high-resolution image. Okay, you probably only saw it for a fraction of a second. There was a blurred preview, and there was text on it that said, you know, image loading, so that people 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 it lets them realize that there's something to be done here. All right.

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 panorama-- well, actually, adding things to a panorama is tricky enough that let me go ahead and show you how to do that. Let me open this panorama.

Okay, here I've got a panorama. 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 your editing features are enabled and you can copy 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. Okay, here's a loop sprite. Where is an auto-rotate sprite? Here we go. Thank you. Rotate Sprite, I'll just control click it and download it to my desktop.

to be there somewhere. Let's go to -- there's my desktop. Okay, here's my little auto rotate sprite. And again, I select all, copy and close it cuz 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.

Let's undo that. Go back to the beginning. Let's try select none and add. OK. Oh, I think the widget has a longer duration than the VR Prana, but that doesn't really matter. So if we set the controller back to the VR controller-- That should now be an auto start movie. So let's-- 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, and suddenly 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 lets them know they're looking at something that isn't a static image. And that's the material I plan to cover for today, so that's it, unless you have questions. percent.