Greetings. Welcome to session 707, QuickTime for the Web. Nice to see you all here this afternoon. Let's see if we can get this guy to go. Rhonda Straatton is here. I'm Steve Gulie, senior technical writer and multimedia web monkey for Apple Computer, and this is what I do for a living.

It's great, I've 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 and I will be talking about the most advanced and most effective ways to embed QuickTime on your web pages.

We will be talking about how to use QuickTime on your web pages, how to use QuickTime on your web pages, how to use QuickTime on your web pages, how to use QuickTime on your web pages, how to use QuickTime on your web pages, how to use QuickTime on your web pages, how to use QuickTime on your web pages, how to use QuickTime on your web pages, how to use 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, QuickTime for the Web, which you can get at Amazon, or if you go over to the QuickTime 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're probably as a website developer 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 1 here, and 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 you over to Demo 1. 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 streaming music. Here's a slide show. 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 want to get the general look out here. There we go. We're looking at 8.7 kilobytes per second for pretty high-res video. Animation, of course.

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 and 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 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.

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 look around. 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.

And it just reveals whole worlds. Here we've got this incredible medieval fortress right in the middle of a... and I are going to take a moment to show you a picture 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 Axle 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.

That lets you do things that go beyond, okay, 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 it's, 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. Okay. Oh, there's one more thing. Interactive mini-applications. I wanted to show you some of those.

If we can come back to Demo Computer 2. And bring those up. And you already saw some of that already. You saw that there was a skinned player, that 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. You can just do things that are not... Thank you for joining us. I'm going to go back to the slides because, of course, streaming audio and streaming video are important. With QuickTime, there are really two kinds of what you think of or might think of as streaming video.

Ordinarily, 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.

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 Writing 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 FastStart video to show you what's similar and what's different because it's easy to get confused. Here's a FastStart video. And we'll play 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.

Okay, 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 FastStart video here, I can't see any more that has already downloaded. Well, now the whole thing is downloaded, so 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 FastStart 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 you can send 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." FastStart 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 FastStart. 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.

Okay, 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.

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, you know, gee, I put this stuff out on the web in Sorensen, 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 in QuickTime, 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, well, I want the most popular format, I think you can honestly say that QuickTime is the choice.

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're going to do. And it won't play the movie file. It will just show a broken icon. And you can't really control the plug-in 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 just link to something that 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 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 QuickTime installed, it takes the person gracefully to the QuickTime plug-ins 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 plug-ins page.

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 for QuickTime. To prevent problems that came up when certain versions of Windows Media Player would register themselves for the movie file type, you would say, well, I'll pass this other file type. That's no longer a concern because of the OBJECT tags I'll show you.

This used to be really complicated and it's gotten simpler lately, which is nice. The plug-ins 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.

The type is always video QuickTime. The plug-in's page is always the same. And the source is your file name .mov. Always use the .mov file extension because that's universally recognized as video QuickTime. 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.

What I've done here is to tell it to autoplay and set the volume down to 25%. There's my EMBED, 240 by 196, because it's really 180 high, so I add 16 for the controller. There's my source, type, plug-ins 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 slides.

Fun with the EMBED tag. What are we going to show you here? Okay, let's look at QT source. There are a bunch of EMBED tag parameters, attributes you can pass to 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'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 want it 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, then 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. 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 one 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 Ahrefs, 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 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, 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. Okay, 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 Back up, because I can't quite believe what they just saw. Did he really do that? Jeez.

Completely psycho. I love it. So those are some pretty good things you can do with the QTSource, Ahrefs, AutoAhref, and Target. Now I'm going to show you one more thing with the AutoAhref. 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. Oh, Ahref means click it and it goes there. AutoAhref means just go there. So why would you want to do that? Well, I'm going to... I'll show you a different version of that page called Redirect.

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

content, 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.

Cover 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 want to do that. I want to do the other thing. Make it autoplay. Give me no controller. Do it in such and such a size and 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. Is everybody following this? Do we have questions? We're doing good here? Okay, 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 QtNext 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. 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? Okay, 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 plug-ins 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 in Internet Explorer for Windows.

But if they don't have QuickTime, it won't look at the plug-ins page because they use ActiveX controls, not plug-ins, and 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. A 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. Rhonda Straatton, Steven Gulie So, this syntax works universally.

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 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 closing with a slash angle, more like XML. Otherwise, bad things will happen. Let's see. Where are we? Male #1: Okay, the quote at the end of that, that is a typo. Yep.

No need for that. Sorry. If you're looking at this, uh... 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 2, 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 plug-ins page are set. So it really does work. Now, the question is, if we go back to slides, 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 GoLive. If you use that, you know, 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 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.

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 a 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-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 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. 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 going to click it, it's going to 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 players 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 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 in.

You can launch 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 into 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, to QuickTime player, when you play this, play it in full-screen mode. mode.

You can set it with application like Cleaner or Live Stage or Go Live. There'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, because 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--

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. Okay. Oh, I saved it as the full-screen movie. Right, right, right, right. Right you are.

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-time--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 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 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, you know, 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.

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 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 the 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. It uses the QTL file extension or the MOV 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'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 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.

Uh... In this case, I said an Ahrefs, 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 uses 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, you know, 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. Ah, 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

This is a nearly full-screen movie. Sometimes you don't want to launch QuickTime players. You say, "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 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 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 quick time preview for VR. If you're in 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 onClick JavaScript function that'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 move itself to zero and resize it to the available screen height and width. So, you know, 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. Okay, 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, you know, 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. 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. Well, okay, I exported it as MPEG-4. I want it to play in QuickTime, so I'll change the file suffix to movie. So, you can save it as a MPEG-4 file, but you don't want to do it as a movie file.

You want it to play as a movie file. You don't want to do it as a movie file. So, I'll change the file suffix to movie. 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.

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, it's not a QuickTime 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 MPEG-4 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. 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. 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 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... OK.

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 like a QuickTime movie or a QuickTime VR, and you 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. This is a nice way to show, this is yet another piece of QuickTime technology. This is called a 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 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. So that's a... Okay. Let me just show you how to do that. 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. Seyvaz, set it to make movies self-contained. If you allow dependencies, you've created a little movie that points to the movie you were opening.

And the 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 it also 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 let's see which one I want to use here. That's okay. Anapanofast. Okay, so 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.

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 so... 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. Okay, 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.

and the other two are going to be talking about the 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 -- Well, actually, adding things to a panorama is tricky enough. Let me go ahead and show you how to do that. Let me open this panorama.

Okay, here I've got a panorama in. 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. Rotate Sprite, I'll just control-click it and download it to my desktop. I'm going 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 because 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. Okay. Oh, I think the widget has a longer duration than the VR Pranarama, 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.