WWDC2003 Session 712

Transcript

Kind: captions Language: en good morning and for us to go ahead copy or at least started to we're just getting ready to come out with the third edition of quicktime for the web and it's still a virtual book but it's almost ready actually it's at the printers now and so if you do want to get a copy of the 3rd edition with QuickTime 63 go over the Morgan counseling booth in the in the main auditorium there in the area they've got a special going twenty percent off and free shipping if you want to order it at the show here so it's kind of a good deal because of quicktime pro so you can do some authoring the session is quick time for the web and we're here we go that's me I'm Steve Cooley senior technical writer at apple and we're going to be talking about using QuickTime over the internet that's a really broad topics we're going to narrow it down some really going to be talking primarily about putting quicktime on your website so we're going to try to bridge the gap between painfully technical and painfully non-technical and just just stick with painful so it's mostly going to be about HTML will be some movie tricks for movie authors a little bit of XML and maybe some JavaScript if we can get that far into the presentation we'll see how we're doing is are we got mainly HTML office here or movie authors okay applications programmer okay perl PHP programmers okay all right we'll see where we go here this is going to be about how to click quicktime movie on a web page how to launch quicktime player from your web page get those folks game movies going and how to play other media mp3 mp4 anything you want to play using quicktime besides a quicktime movie specifics about working with the impact for in quick time together the way they play together and don't play together and how to put live and pre-recorded streams on your web page and to decide when to stream and when to use what we call fast our technology and I'll get into that a little bit more put media skins and chapter lists with streams so mixing streaming and non streaming content just kind of tricky and a little bit about scripting bricktown using javascript okay so putting quick time on a webpage the main thing there is getting quick time to come up at all through the browser you're coming through a browser interface so the question is really how does the browser choose what player 2 to bring up for multimedia and how do you particularly make it to use QuickTime and there's three HTML tags you can use inside of a webpage to bring multimedia into a browser the href tag which is your standard hypertext link for text the embed tag which has been around for a long time and the object tag which is a little bit more recent and the hrs is the most obvious thing to do is you put text like it says click here for the movie and you link to a movie and people click it and why shouldn't you do that well because it doesn't really work very reliably the browser doesn't really know what file type it is here you're not you're not able to tell the browser what the file type is or what plugin you want to use you're just giving it a URL so the browser says well what kind of file do i have here and it asks the server typically if it's on a web server or you know some CD it just looked in an internal table but in either case it's going to look at file extension I the server is or the browser is I think jpg it goes oh it's a jpeg at the PDF it goes well with the PDF a mov ago so it's a QuickTime movie hopefully but it's up to the people who run the server to update the table or people who write the browser to keep that table updated and people can fool around with those tables to some extent so if the extension is wrong if you don't name your movie mov if it's just my movie nothing or if that's not in the table then it typically shows up as text your movie shows up is a big screen full of text and I think you've probably seen that sometimes you click a link and kids spring full of text it doesn't see what they had in mind and if the extension is in the table well then what happens well we switch over to demo machine here a number of things can happen but it's it's not terribly predictable if all is well then when you click this link simply a little bit bigger text here well it's too big then what will happen is that the movie will okay in a blank window all by itself which is not a terribly attractive way to display things typically but that's not the only way it could happen it could happen in a window that's just specifically sized for that movie or it could open in quicktime player or it could try to open a windows media player all sorts of things can happen and it's really up to the up to the browser and that's really not the choice that you wanted to make and even if it does open in quicktime player then what happens well it may download it and open it in quicktime player in which case you're your viewers sitting there waiting while the whole movie downloads before it starts or it may download it and then say okay well that's good if you've ever launched quick to a PDF link you've probably seen this sometimes it opens in the browser window sometimes it opens in preview sometimes it opens in Acrobat and sometimes it just downloads here is a desktop and you have to double click it and again those those are not a lot of choices you want to leave a hanging in the air you want to be able to have some control over that so then what happens is quicktime is not installed somebody clicks that length well you don't you can't don't have any way to tell it what plug-in you want to use so if the user doesn't have quicktime maybe they see a broken puzzle piece or it can complain and say do you want to plug in and they say yes and then it goes crashing around looking for plugins somewhere but it doesn't know which one to get or it gives it the old college try as well I've heard of QuickTime movies maybe I can fly it play that and explore is really wonderful if taxes no let's go for it I can play QuickTime movies that were authored before 1992 and usually what you see is a broken windows media application player icon and that's also not what you want to see so the best way to do it is to use the embed tag and again if you have that if you're using a tool to do your HTML for using go live or dreamweaver then it will typically do this for you drag a QuickTime movie under the page it'll make an embed tag for you and the way the embed tag works is to let you specify the URL but also the file type so it doesn't have to get and also the URL to plug in if it doesn't have one so your source code looks like this you've got your source which is a move you want to play the type video quicktime the plugins page apple com / quicktime / download so this will enter the height and width on the page the browser gets the file type from the web server or the HTML web server doesn't know you put it in your HTML the plug in it and installed it says okay I know which URL to go to to get it and plug-in is installed it opens in the current web page and sure you run the demo machine here so this is a little bit more attractive we're moving from the middle of web their wrists rated for it and the embed tag is almost painfully simple you've got the source the height and the width the height is going to be typically the height of the controller of the movie itself plus 16 in this case have said it to 20 because it's just an audio movie so the height of the movie itself is 0 this is a just a JPEG but in this case if this movie had opened alone in its own window it just would have been an audio controller and in this case it's where it really belongs so it looks a lot nicer and that's that's the long and short of it if that's all you do you'll have done a lot of the right thing rather than just drink to it but there's more this doesn't always work just what you want to the notion of a plug-in was created by Netscape and when they invented the plug-in they had this idea that okay browsers can display a lot of things but people invent new media types that we can't display or don't display yet so people will create a media type and they'll create a plug-in and you'll say oh my media type is flash so I'll have a flash plugin and when the browser sees a flash media types it will load the Flash plugin all will be well but then things began to change so that multiple browsers multiple plugins could handle the same mp3 and smile are good examples real handles and QuickTime handles and windows media handles them there's all kinds of audio plugins that will handle in mp3 so when the browser sees an mp3 file what plug into the call it if you look back at the embed tag you'll see we could say what plug-in to use if there was nobody who could handle that media type or where to get it rather but we weren't able to save this is a plug-in I want to use to play this media all we can say is it's a QuickTime movie or it's an mp3 file so who gets it if multiple plugins can handle it well with netscape the first one to register with explore the most recent one to register and we kind of watch do some mime type words where different peoples plugins would grab mime types and put in the continuous loop swear it every interrupts it would look and see if somebody take it as mine types and try to get it back but the answer if you really want to use a QuickTime movie is to use a mime type that only quicktime registers for and then you walk into these conflicts and there are three QuickTime file types that you can use but the two we most recommend are the mov now there were problems in the past where sometimes the windows media player would claim the video quicktime mime type but that seems to be behind us pretty much now and there are some new solutions i'll talk about a little bit further on that prevent that from happening so that's now a good mime type to use the other one that's really good to use is the cute eif file use the image quicktime and nobody else registers for that however it's fairly rare one of the problems you can get into is if your server doesn't know about cutie iaf files or can t g files they're not in their table then you have to make sure that that's put in that table by your network administrator or by the the webmaster and it's not hard to do it's a one line command but it's easy to get overlooked there's also the dot T ntg file which is the image X macpaint type and that is a mime type that I guarantee no one will ever take but if you use anything other than the dot MOV file to play a piece of media you need to use the Qt source parameter the way this works is you say embed source equals say small cute eif the other quicktime image file the browser says oh he wants to play a cute eif file whose registered for that line type will only quicktime so it loads the quicktime plugin then the QT source plugin says this is so the QT source parameter this is some data that you can just pass to quicktime once you've passed the source and the height and the width to the browser anything else you pass goes directly to the plugins that gets loaded so you can pass all kinds of information in your HTML webpage to the quicktime browser to get it to autoplay your movie play at a different scale do all kinds of neat stuff in this case what you're telling it is even though my source was this key gif file that's not what I want you to play I want you to play this movie and you could also use that to play an mp3 file and and before pile or any of the 200 media types windows quicktime can play on windows or Macintosh so if you want to use a quick time to display a jpeg or gif well that's fine and again if they don't have it your plugins page and your height and width let me show you how cutie source looks on the demo machine [Applause] whoo-hoo and what you see here is that because we're using source and QT source because we're talking to quicktime plugin we can tell it what to autoplay the movie and to set the volume the 25-percent so it's not overwhelmingly loud and this basically says we've told the QuickTime image file is what it's going to get but it never displays pretending to trial which is good just in this case but the trick to this making this work is the source file must actually exist you really do need to have a QuickTime image file there to make a quicktime image file you can open anything like a single dot gift in quicktime player and save it as a quicktime image file using the exporter so then you've got a little backup but it doesn't really matter what it looks like because it's never displayed quicktime will it's the only place the only plug in and we'll try to display it and it knows better because you're telling it the QuickTime source is the movie not the image file now there's a that's the embed tag and if this is what you use then you're really going to go a long way it's going to work in quicktime everytime quicktime is installed it'll get the quicktime plugin if it's not installed and it will never be distracted by another mime type there's also an object tag the object tag is very useful because it lets you specify a particular plug-in in this case in activex control using the ID and it gives you the URL of the activex control if it's not there so on Windows this is really terrific you can use the class ID and code base that are here and you can cut and paste them from our website it's always the same it's large but it never changes so it's static and the thing that's a little different instead of saying the source equals my movie you have a paramus source and value as my movie anything you had passed a quick time in the embed tag you can pass the object tag it's just the parameter name and value or past separately in a per am element and this is now getting a little closer to xml it's a little more strict so you have to close your object tagged properly not just leave it hanging but it's pretty nice the browser gets the file types in the server HTML but it doesn't matter because you have told the browser that it's going to use a particular activex control so it doesn't really matter what the file type is and if it's not installed it automatically gets its in that download URL it is installed it opens it it's great the only problem with this is that it only works in internet explorer for windows you probably have some of you are more familiar with the w3 specs and others will sail embed is not a standard but object is ways standards but it's a broken standard the object tag as written here will only work in internet explorer for windows not any other browser and not internet explorer on any other operating system however you can put them together and this gets to be a lot of code but there's really not that much to it what you've done is you've taken the object tag and stuck the embed tag right in the middle of it and what this does is it says okay I'm an Internet Explorer for windows I will use the class ID in code base and I will get to quicktime plugin period if I'm not if I'm on another operating system you're using another browser then i'll use the mime type in the source file to determine which plugin to use and the QT source will tell quicktime which movie to play and the plugins page will tell me what to do if plugin if clicked on is not installed and i'm not an internet explorer for windows and let me just back up a little bit here if you look at this this embed tag what if you just using bibtex without the object tag this works fine on internet explorer for windows this works fine on all browsers and all platforms you don't have to use the object tag but if you're on internet explorer for windows and quicktime is not installed you have a problem because internet explorer for windows does not honor the plugins page tag anymore because it's not a plug-in it's an activex control at least I think that's the rationale anyway if quicktime is not installed it will just say i don't know what to do and so the answer is to put this at least once in your website if you haven't gateway to your website once the user gets the a QuickTime activex control the embed tag works fine so at least once they have to hit this object to know that if this is the acadec control we want but I think you'll find that if using the latest generation of web generating tools built around the embed tag with the object tag anyway there's a website QT bridge they make a product called pas GOP AG eot it's French but it's free and you can just drop your folder full of web pages on and it'll go through and turn all the embed tags into embed tags Plus object tags so there's lots of free automated health to this you don't have to type it in every time but this is the belt and suspenders way to go particularly if sometime in the future internet explorer decides to drop support for the embed tag and say we're only using the object then you will really be glad that all your tags look like this because they'll continue to work on every system so don't use href do use in bed or better still use object and in bed together and are we any questions so far we all kind of on the same things yeah majority okay the question is if explorer takes the most recent way recent plug-in to register for mime type and Netscape takes the first one how does the firework Safari also takes the most recently registered for that mime type there's a split it's much more like a Windows system now which is a registry and the most recent person to alter the registry is the person who is listed in that registry but let me show you here on the demo machine a little bit how that look again it looks it acts the same and make this a little bigger so you can see the text so you've got a class ID he's got a code base and this says this is the activex I want this is where it is you don't have it and here's the embed tag if you are not internet explorer for windows which obviously we're not we're safari on the Macintosh so I guarantee you that if you pass the MOV file type Safari will bring a quick time I don't think it even asked question okay yes the question is the Indian bed tag don't we have a link to the Apple web page and in fact we do it's the plugins page I may have no mitad it from the the slide here just because it takes up a lot of space on the screen okay now once you have quicktime plugin talking to your web page you can tell put time to do a lot of interesting stuff and very web friendly you can tell it for example to autoplay the movie when it starts or to set a background color so that it matches the background of your web page to have the controller on or no controller on so you can have your own stuff going on that lots of stuff enable JavaScript so you can have JavaScript control the QuickTime movie Step hot spots for a virtual reality there's an href tag that lets you say okay somebody clicks on the movie open this URL and that could be the URL of another movie or a different webpage it lots of things put it in kiosk mode so people can't save the movie tell it to loop the movie continuously if it's a virtual reality pano you can set the pan tilt and field of view for it to open with which is a really nice thing without having to go in all to the movie itself QT next to say when this movie is done play this of the movie or open this other URL when the movie is done set the scale to play twice as big half as big as it normally is you can target a movie so with someone clicks on the movie it causes the URL to opening a frame in a browser window and QuickTime Player or to replace the QuickTime movie itself and I'll show you that in a moment and you can set the y on this lots and lots of HTML friendly features of QuickTime you can access now and control directly from your web page so one of the first things i'm going to show you about that is using a poster movie one of the problems with embedding movies and web pages they're big so if you've got a 26 megabyte movie file and somebody goes to your webpage and it starts downloading and it's kind of rude especially they're on a dial-up account wait a minute I don't know if I signed up for this so you can use a single image to bring up the quicktime plugin and then warn the person that you know if you click this something that's going to happen and then let that be the lead in to play the QuickTime movie or two to not and clicking the poster connect to do a number of things basically it tells quick time I want to do something and it could it could load another movie load a webpage you could execute a JavaScript function it could fire off a movie a quicktime player and was the key to adjust the href tag you have a source your which is in this case let's see where's Lou that's up cutie source or someone did but the CD source would be to your movie and there's an href so when you click on the movie it opens that that URL in the target if there's a target let me show you that we're here on the demo machine there's only do it for the Audubon Society they didn't want the sound of the Loon which is a big audio file to load immediately so here we have just as click here for the QuickTime audio this is a little poster sitting under the loan if I click it it loads of Krypton movie okay there's a good question is is there a difference between eh graph in the QT sort yes cutie source okay this is really kind of an interesting little tag look at this embed tag the source is a small quicktime image file and all that does is tell the browser I want to use QuickTime the QuickTime source it's actually a gift I can tell quicktime to display any kind of file i want i'm going to reload this page and you see this is a gift this little speaker icon in this text this is just a gift called speaker gift it's got a high 8 in the woods and it's a but i'm opening with quicktime when you open a gift in quick time it opens it is a still image but it's now a quicktime movie so if you're in control or off because we don't to play this movie we just want to click on it I've said autoplay to be false because you know let's deploy but if i click on it that will launch the href URL which will be losing one move target myself so this is when i click on the movie load this URL and the target is the movie that I clicked on replace yourself with this to this QuickTime movie so right now we're looking at speaker gift and when I click on it it will load loon one move right where it is it'll replace yourself with the movie the reason I'm using hype okay why am I using high 20 instead of height 1616 is the correct height for the controller and the reason is because the gift was 20 pixels that I was given and I did this is a favor to some people who are doing a web site okay so it's yes I'm sorry I can't hear the question why don't we use a rollover sure we can use a roll over there are lots of ways to do this but I'm just showing you a poster movie which is basically a movie that you click to launch another movie this is just one more technique here or it should be included in the poster movie it opposes prime why don't you include roll over at the post to the frame because you have to right click on that frame oh yeah I say why don't I use the roll over instead of right and click on that frame sure you could do that that would be a fine thing to do if there's no particular reason why I didn't do that although sometimes you want people to uh to click on the image but yeah a JavaScript rollover works fine there ok now another thing you can use a poster movie forrest launch quicktime player and one of the reasons you might want to do that is so you can get a full screen movie now to launch a movie in quicktime player is pretty straightforward but not terribly impressive you just set target equals quicktime player instead of target equals myself but to get a full screen movie you need to have either a movie that's in full screen mode or you have to have some way to tell foot time i want to play this movie in full screen mode even though it's not necessarily a full screen movie but the short answer is use target equals quicktime player and there are three ways to well there are several there are several ways to make a movie into a full screen movie is an apple script you can put it use an apple script to turn on a full screen movie mode for any movie and say when this movie plays it is to plan full screen mode if it's in quicktime player there's a little tool free tool from Apple called plug-in helper that will set that characteristic for you you can use of like cleaner or live stage to set that characteristic you can put a wired sprite inside the movie just drop it in there I'm a full screen sprite and when I get loaded too i go to full screen mode or you can use an xml text don't worry about that in a second okay look let me bring up a couple movies and show you a little bit more about that here's a web page and it's got a poster when I click the poster it's going to launch click the poster both launch a full screen between QuickTime Player why not use a rollover well could have done that too but the key is that you get differently see that's a big way so here we set the movie to play a full screen movie and put when done this is a really nice experience and somebody comes to your web page and they click on something it goes full screen the movie plays and one has done they're right back at the web page like it was never there and it gives the impression that you've got a full screen plugin there's no such thing the browser gives a little space to plug in but the plug-in now calls the quicktime player and quicktime player can go fullscreen and then drop back into the browser when it's done so this is a really nice technique and you just show you something here make sure it to you in a larger way is this readable at all can you see that text maybe not okay well how big can we go how's that getting somewhere this is a really simple text file this is an XML text file and it just says I'm an XML text file I'm a QuickTime media link these first two lines are always the same so you can cut and paste them you don't have to remember that just type it in just cut and paste it all that really matters is your very last line here embed source equals and here you just put in all your embed tag you would want to do so you can set full screen mode autoplay quit when done it's really handy just as a text file and you can see it's a text box that just open it up with a text editor but if i change that to an MOV file it will warn me hey you can't just change file extensions like that but yes you can wow so XML the miracle of XML you take an XML file you give it an MOV file extension quicktime will play it as a movie and this is great now i can embed that movie in my web page or i can call it from anything like it's just it's just really terrific to have this capability at your fingertips so that's kind of any technique i want you to know about okay we've seen posters no no that the question is that only for Safari that works in any web browser that success in any web browser this out there today okay question we're getting some questions about this limit let me go into this a little bit more than think I have some other movies that illustrate this maybe just a little bit better obviously I've kind of dropped a bombshell here ridgeville wait a minute okay waited to it let's look at these okay this hard way I'm sorry the XML is not being interpreted by the browser at all it's by quick time we've got the browser to call quick on this is by the way it's taken from the website for the book and let's look at delivery okay ok so first we're just opening a QuickTime movie a movie in quicktime player then we're going a little step further and opening it in full screen and let's city ok now we didn't have to change the file type from text to mov we could have changed into q tal q tal is defined as application quicktime player and when you open a QTL file the Browse we should automatically launch quicktime player that's how real disease like Daria rram files and the browser just knows to use their player the problem is that again there's it isn't always registered for that sometimes it downloads and plays at least we call a mouse dropping behind at least the QTL file behind on the viewers disk so we tend to use it as a mov file so it opens in the plug-in and then let the plug-in launch the player rather than ask the browser to launch the player so if you use the if you use any at file extension besides MLB or QTL the operating system is going to treat that as telling you what kind of file type it is if you call it jpg it's going to try to open it as a JPEG right it's call it txt it's going to display it but if you call it a dot MOV file or you use the Qt source parameter to open it with quicktime to put time at the movie quicktime looked at and goes ah it's XML I know what this is and then it opens the movie you want to play so it's a little bit of a shell game here where you're telling the browser the file type is something quick time can open until quicktime treat this is a movie and then look quick time do the right thing about the xml you can name it QTL and try to get the browser or the operating system to open it with quicktime player that should also work but in my experience is not entirely reliable okay yeah means you'll have an ultramoon difficult the maximum five this cold yes okay here's the question we have we have a poster movie that calls an XML file that specifies yet another movie and that's right so we're getting kind of several levels of interaction here but that's how it work it would be obviously the key is that it allows you to connect thing about doing it this way that XML files can be generated by a perl script or CGI really easily you don't have to actually generate movies and specify them you can just say play the movie of the day don't move and have a text file that spits out the right movie which could be specific to the browser to the user to all kinds of things so it's really handy to have that kind of interaction although it is a little confusing sometimes okay yes Oh which version of quicktime will recognize the xml quicktime for dot one and later i believe so what we found is we simply have the auto update in place that people we're not finding old versions of quicktime very often anymore quicktime for and later automatically update 25 automatically updates 26 some people choose not to do the download so you might hit quicktime 5 but the likelihood that you'll hit something that can't interpret that XML files very unlikely okay so if you have a poster movie a couple of things make the poster the size of the movie that you really want to play plus 16 for this room for a controller set the controller fall for the poster because otherwise people will try to play the poster instead of clicking on it set the href parameter equal to the URLs a movie you want to play when somebody clicks on it if you want the poster to morph into a movie then set target equals myself and let me show you just one more thing about about that back in the demo machine is here we go multi movies here you know we've got a web page 23 movies on it but we really don't want to download all three movies simultaneously so what we do is we say okay flowers from tripping birds and China's bunny rabbits all this year ok so what we're seeing here is posters that link that turn into movies when you click them and i'll just show you something that i won't really explain but it is in the book which is you can have a poster transyl movie and then turn right back into a poster again that's a little bit of legerdemain where you put something in the movie that says when I'm done replace me with this other movie which in this case is a poster but the trick here is the poster movie is 16 pixels taller than the real movie for there's room for a controller and the poster movie doesn't have a controller because you don't want people to play it you want people to click on it so that's sitting target equals quicktime player for full screen movies you can either make the movie itself a full screen movie that just when it plays it plays in full screen or you can use xml to set full screen mode to play any movie you want in the full screen and any more questions that we just covered okay we're all on the same page or else people are going to be glazed over one way or the other ok let's look at playing some things besides QuickTime movies in quicktime player or quicktime plugin why would you want to do that mp3 audio mp4 flash smile rtst streams some of these things like smile or rtsp might be QuickTime movies and so you want to direct them to quicktime specifically because it is quick time but why might you want to play an mp3 file in QuickTime well because if you just load up an mp3 file and say you embed this and play it in whatever you don't have any idea what's going to play it you don't know what it's going to look like you can't really control you can set autoplay or set the volume you don't know if is going to open an application it's going to download quicktime is pretty nice as it actually will play it for you and it download it plays it while it's downloading and you can set it to auto start and you know set the volume level instead it's a loop or set it to put an href on it so somebody clicks on your put a poster with it you know so somebody clicks on the poster while the movie song is playing their tickets your website with an opportunity to buy the album that sort of thing so you can use QT stores to specify anything if the over 200 media types of clicked on can fly and say no I want to play this in quick time and as we saw in this previous demo you can say display a gift but when somebody clicks on the gift take a quick time action based on that so it's a really handy way to repurpose other media and again it's fairly straightforward the source is some images quicktime some piece of media that only quicktime registers for and the QT source is anything for time can play and i just go ahead and show you that again here this is not a QuickTime movie it's an mp3 and we told it's the kind of image file that the Cutie sources at mp3 so it's playing mp3 with clicked on even though quicktime is not necessarily the registered plugin for mp3 but we can make it play anything because we got the browser to let us talk to quicktime okay so that thing has left the mpeg-4 which you would use similar techniques for mpeg-4 and quicktime are close cousins the mpeg-4 file specification is based on the quicktime movie file specification and that means they're really really similar but they're not actually the same so if it's an mp4 file quicktime imports it and makes minor changes in it before places it's a movie file and MPEG four players not going to be able to play it and there's a lot of confusion around that because people think of mpeg-4 is being a video codec or the AAC audio codec and so they go well for today HD audio I can call mov or mp4 not true the files are similar but slightly different so there are two important ways you can use mpeg-4 in QuickTime you can use mpeg-4 video or audio inside a QuickTime movie so we've got a QuickTime movie it can show video compress any one of a thousand ways well mpeg-4 is one of those kinds of compression it can do mp3 audio is doing it you know all sorts of compression techniques for audio but casey audio is one of them so you if you use this if you use pretend mpeg-4 video or audio input time movies you have the advantage of being able to use the MOV file format you can mix and match with other kinds of QuickTime media if you want AAC audio over your foot time virtual reality ok and use mpeg-4 audio in a QuickTime movie the other way to use mpeg-4 in QuickTime is you can create play and stream native mp4 files and this is really a cool way to go it's interoperable with other iso streams files and players so you can use quicktime to play mpeg-4 from other peoples plus streamers or created by other applications or you can create mpeg-4 files in QuickTime and play them in real or windows media player with the correct you can hint mpeg-4 files for streaming in QuickTime you can authorize the mp4 file format so it's really strong support for mpeg-4 in QuickTime more than anything any other file types we've ever seen and again you just use the Qt source if you want to play in a big for file just like you would an mp3 yeah okay the question is why are we using QT source for the mp4 file well because anybody can register for mp4 you could have a hundred different players so you might not want to you might say hey source equals NP for anybody is a plan mp4 please play it I don't need quicktime i'm not worried about that and if you want to reach the broadest possible I audience that might be a way to go but if you want to be sure that the mpeg-4 is going to play in quicktime because you want more control over the web page and that's the plug-in you want to use then say source equals something quick time will play QT source equals the mp4 so this is a technique to play mp4 files in QuickTime or to force QuickTime Player to be used to play the mp4 file you want to leave it up for grabs that's also entirely viable option yes okay here here we're getting the question is showing me there's some confusion an MOV file is not an mp4 file you can't just change the file extension if you open a movie in quicktime and it has mpeg-4 audio and video you can either save it as a quicktime movie or you can export to mp4 and the audio and video will not be recompressed but it will be saved in the mpeg-4 file format if you just change mp4 to move and back and forth add things will happen because there are such close cousins that if you try to open an mpeg-4 filing quicktime you tell it's an MOV file it will do a superficial look and go yeah looks like an MOV file to me this is a movie and it will try to play it and then it's not going to work right and if you name a quicktime movie mp4 it might open in another mp4 player or even quicktime and it'll go yeah this looks like an mp4 but it isn't and again things will go wrong so it's very important not to just swap the file extension but to actually import and export and I see a question in the back I'm not sure I heard the question oh it in the embed tag you can set the mime type and I think the question is does that override the mime type of the file not reliably the server will tell you the browser what the mime type is the extension will be mapped to a table and you have the HTML and all three could be saying different things so what should the browser believe it within its own table what the server is telling it or what you're telling it it's really up to the author of the browser and they have different opinions about that so again using source you can only use a QuickTime file type you can't play mp4 it's and QuickTime using via the source if you use the source commander point to an mp4 it will go to whatever player is selected for mp4 it might be a good time it might not if you use QT source it will use QuickTime to play mp4 s or anything else mpeg-4 audio and video can be in a movie or it can be in an mp4 file you can export movies to mp4 to force and mp4 file to use QuickTime use source and QT source just use source it's up for grabs but they're not the same more questions okay yeah here's the question is if you use cutie source is it going to play in quicktime even if something else selected for mp4 yes because the source is what the browser looks at the source the the browser doesn't know anything about cutie source and look at that parameter and says this is jibber-jabber to me I know the source the source is a QuickTime movie or QuickTime image file so I'm calling quicktime then quicktime says I know what a QuickTime sources I'll play this mp4 file so the browser has no idea that it's dealing with an mp4 file it just notes about the source file by the way make the source file small because the browser is going to download it so just use a little image quicktime image file it's good for that or a small QuickTime movie a couple of k all right and let me i'm going to show you an mpeg-4 file just like the MP actually i'm going to open this internet explorer because i have to [Music] you know what happened the audio there here we've got an MPEG 4 player file playing in quicktime in internet explorer and believing internet explorer does not know this version of internet explorer does know what an impact for file is let alone know the QuickTime should play it but it's happy to do it because it said the source is a QuickTime image file so the Qt source can be anything it just doesn't know now there's I'm sorry can I hear that question again okay will this work if you leave source equals mp4 empty I'll leave the source empty if the source tag is empty then the browser has no idea what you want to do no quick time will only load if the browser is told to load a file that it can't play and the quicktime plugin is registered for the file has to exist and it has to be able mime type that only quick timers registered for and a quick time is not installed then you want to have the plugins page tag there now I just a caveat for this this is all somewhat less to an Internet Explorer for windows because the object tag says I want the quicktime plugin if it's not there go get it and whatever it gets played is up to the plug-in so it's less sensitive if when you use the object tag you're saying we're playing it in quick time I don't care so it's been different but any other browser any other operating system you really need to use the source and cutie source this way but the key thing I'm trying to get across is the movie and the mpeg-4 are a little different and you can't just change the file extension they were expecting you to work the same way and okay so let's change subjects all together and talk about streaming it's been ready for a change in topic okay okay it would be enough then they saw and beg for people i would have multiple times what i'm hearing tested despite opening service the quick tiles okay the question is if i set the source I understand the question if I set the source to a QuickTime movie chance I then set the source to an mp4 file why do I have to use QT source because you can't have to source parameters in the same tag if the source is one thing that's what it is so the Qt sources and I'll use your other swords with the source tag is for the browser the Qt sources for the plugin okay all right there's some great stuff happening in streaming and streaming is a little different from the kind of movies have been looking at here on our disk it uses real-time protocols the real difference between streaming and and the movies we've been looking at is that streaming is these real-time protocols goes of the network in such a way that a one minute movie is transmitted in one minute all right so if you've got a fast internet connection it still takes a minute if you get a slow internet connection and it can't hold the data it's coming over in a minute so if it doesn't get through it just doesn't get through it to dropped on the floor you can't like buffer it up and watch it later it's a real time protocol the good thing about that is you can carry live audio and video things are happening in real time and there's no way to carry live audio and video if steps with streaming you can't record it and play the recorded movie happening now another good thing is if you record a stream and record a movie and you stream it you can start streaming from any point in the movie and that's really nice you got a two-hour movie people want to skip around or you've got multiple lessons in learning course if you want to go to lesson 3 or listen to that again they don't have to load download the whole movie to that point to watch it they can just skip right to that point and start screaming from the middle of the movie and it supports a multicast now this is really a cool thing if you have a movie and you've got a you know campus land you've got a hundred people watching a movie you're sending out a hundred copies of the movie over the network and you've all seen what happens when two thousand people fire up their laptops over the local airport network you know it's pretty extreme but if you send one copy of a stream to a multicast address everyone can turn their computer to that multicast address and watch the movie and you're really only sending out one copy of the movie over the network and everybody is looking because the network remember a packet network everybody it's kind of like post cards right they go past everybody but your computer only looks at the ones that are addressed it but if I say this is one that everybody can look at and all your computers can look at it if it goes by on the bus or through the ether you don't have to send multiple copies so that's that's really nice that doesn't work over the internet but works great over campus plans and the corporate lands the bad things about streaming are it has to fit within the available bandwidth if you've got a 28 kilobits per second movie playing on a 27 kilobit per second connection it doesn't play you don't see anything you don't hear anything the other thing is that because it's a real time protocol typically lost data is not retransmitted and over the internet there's some law so you have little artifact video audio dropouts things don't show up and third thing is limited to certain media types audio video text and URL events that sounds like a lot check audio video and it is a lot but there's no flash there's no VR there are lots of things that you can't send 3d models fast start movies on the other hand or something that quicktime quicktime is a world-class streaming client but if you really just want to stream audio and video whether you use windows or windows media or real or QuickTime you know there's trade-offs this reasons why you might want to choose each one but when it comes to fast our quick time is the absolute champion there's nothing else like it Jesus Colin web protocols data transfer time is a movie it's movie size / the bandwidth you've got a one megabyte movie and you've got a one megabyte per second connection one second transfer time you know if you get 28 kilobit connection obviously much longer but it's going to get there and the good things about that is your quality is not limited by your available bandwidth you can have if you give the QuickTime movie trailer so you see some really nice-looking stuff you can watch that over any kind of connection you have to wait longer but you can see it and so you don't have that trade-off we say well most of my customers have this speed to connection so I can only have this good of quality movie you can say no quality comes first and people will wait as long as they have to wait or they'll have a smaller version for people with slower motives the movie transfer is pristine there's no data loss it's a packet gets drop it gets retransmitted and unlimited mediatek flash dr sprites 3d all kinds of interactivity so that's really nice bad things about fafsa movie so you can't play from the middle you have to download the whole movie if you want to play the last minute of the movie if to our movie you can equate to download gifts to the last minute no skipping around and you can skip backwards but not forward you can't carry live events obviously in a pre-recording and there's a perception that fast our movies are easier to copy because oh you're downloading a file as opposed to just playing a stream and there are reasons why that isn't really is true as it once was there was a time when yeah you know you download the file but their ways now you can download just a header the information and leave the source on your server and also there are ways you can copy the streams from the audio and video buffer so they're about equally secure now if you if you follow the tips for protecting your movie I don't really have time to go into that in this section but it is covered in detail in the book and there's some free tools that will separate you have you been to some other foot time sessions you understand that in quick time the movie is the organizing principle is not the data a QuickTime movie says what to play and when to play it and how to play it the data itself can be on another server on a hard disk on a floppy disk on live streams can be all over the world the movie is just the the explanation of what to do with it so if you have the movie on the user's hard disk and the data on your server and a data reference that says get the movies data from the server that's what it's going to do and somebody copied to data from your server the movie is still going to get it from your server that data is just a rock anyclip time engineer can put them together but most of your customers presumably or not quicktime engineer so unless somebody builds a tool to pirate this to assist them in copying it it's pretty secure now so how do you play a stream how do you put a stream in a web page a little different because he uses the real-time rtsp protocol its URL is going to start with rtsp and if you just embed it in a web page what's going to happen is even if the DA to MOV file its rtsp my server my path might move many times the browsers will go Oh rtsp that means I better use real or all that means somebody's Windows Media Player or that must mean I use Joe's streamer so what you do is use source and QT source ordinarily with QT sores quick time will tell the browser to get a file for it it will use the facilities of the browser to do the download even though the browser isn't displaying it so you use QT source don't use browser this is a tag which tells quicktime not to use the browser to get to quicktime source movie and that way the rtsp will not be redirected or misdirected it says quicktime use your own resources to get this it's usually pretty good I think current versions will will will do that automatically for Arceus because I gotta click on engineer in the audience not today okay I'm on my on believe that's correct so another choice is you can use a text movie to embed a strain and i'll show you saw that work with the xml that could be an rtsp URL there are a couple ways third ways to use a reference movie if i open a stream and quicktime player and save as a self-contained movie what am i saving well it's a QuickTime movies it's basically a wrapper around a URL and then I can embed that movie in a web page and it will open the stream when somebody clicks on it so let me kind of show you a couple ways to do the text movie let's see if this works go over here to the demo machine and I will once again show you a text file and the thing up my sleeve this is just an rtsp URL and there are eight characters that precede that URL rtsp all uppercase teehee XD all lowercase this is known as the text Adam hack and I won't go into all the reasons for that but if you start a file with the characters rtsp txt and then immediately follows up with an rtsp URL you can treat that as a quicktime movie and quicktime will open that URL but what do you have to do to make that work well you have to say it's a movie file not a text file so that instead of trying to display it the browser will use where the operating system will use QuickTime to display it yeah this is a very this is using a tech movie instead of a reference movie again a reference movie is I open the stream and quicktime player i save it i say i've created a quicktime movie and that's a perfectly good way to go why would you use this instead maybe you don't want to create QuickTime movies maybe you just want to generate txt files because it's a hassle it saves you a step again if you're using PHP or pearl or something to generate these you can generate these movies that are just you know anything you can generate a text file can generate one of these movies and hopefully yeah again I just open a text file as a movie I'm playing it quicktime is doing the right thing and after little buffering because we're coming from down unda nothing with a few g's but is like one giant metal messages through this live from Australia okay I'm sorry can I use oh yes can I use chapters well that question is can I use chapters in that kind of streaming movie the answer is no not exactly to use chapters in a streaming movie you really have to have a regular movie and a stream here's an example of a moot of a streaming movie this is actually a webcast from steve jobs keynote in 1999 a really inspiring keynote that went on for two hours so if you just wanted to know what he had to save a quick time at that point it would be really nice to be able to just jam down there and see it and so you can skip around here becomes huge for us we announced quick time for quick time for okay so here's an example of a two-hour movie and how long do they have to wait to download the part I wanted use chapter lists with streaming movies that are long they don't stream chapter listing off streams so what you have to do is you open the streaming movie up in quicktime player then you add a chapter list in quicktime pro this is a text file it's really easy to do there's free tools that will do it for you look around the internet utilities on the web all kinds of cool stuff it's really easy to do and it really enhances the value especially for distance learning of long streaming movies but the question was can you do that with an xml file and the answer is no the rtsp hack is just the past in RTF to URL if you want to do more elaborate mixtures you really have to use a reference movie the first date characters are case sensitive question is what part of the of the rtsp hack is case sensitive the first eight characters the first four characters left the uppercase rtsp the second floor characters must be lowercase T exe and what's happening is the QuickTime quicktime player is trying to open a QuickTime movie it's looking for a movie Adam it says well I don't see a movie Adam that I see a text adam is the length of the text Adam the characters are TSD that's why we call it a hack you can all see use XML the way I showed you earlier that's a far more structured away and that works beautifully and then you can tell it to play it in quicktime player and full screen and you know you can pass what kinds of extra parameters which is also very nice oh yeah here here B is the xml version so instead of using the rtsp hat so you can't remember whether use up or lowercase and it's confusing just use the XML it stays the same top first few lines are always the same it's an XML at the media link and even bet you'd give it the MOV file extension and embedded just like any QuickTime movie and that gives you the advantage of being able to add some other things now some of the extra plug-in features are going to work with a streaming movie but most of them will question the question is he gentlemen saw earlier in XML files you would drag and drop under quicktime player that would turn into a movie file that has a that was a media skin basically quicktime is moving towards XML XML is the data format that's going to conquer the world we thought it was mp3 we were wrong its XML basically more and more as we go forward you'll find that you can export anything from any any format into XML and then import it into any compatible version so what's happening here is this is a QuickTime xml and we're saying the embed so we're giving it the embed tag we're saying okay this is the QuickTime media link here's the source if instead of QuickTime media Lincoln it's a QuickTime media skin we would give it some image files click on has all kinds of growing list of XML importers so basically you will be able to pass all kinds of things as we go into the future to quicktime as xml and so the syntax will be very similar but the actual parameter specifically be a little different for skin you'll want to give it an image file in a math file a drag region for a movie you'll just give it a URL okay embedding streams in a web page using reference movie have pretty much talked about that you open the stream you save it as a self-contained movie and it's just a wrapper for URL it works great the bonuses you can then edit the movie to add things like the chapter list and let me show you some other things you can add your streams there again I don't have time to go into the techniques and I don't mean to cheat you that way that I think it's worth seeing some things here's a yeah this is a QuickTime movie it's got a media skin so it doesn't look like a QuickTime movie it looks like its own application and when we play it we've got quicktime dr here so obviously this is uh this gets the media types of don't stream i can interact with it i can drag it around I can drive myself crazy with it but I can also place an audio but here we've got in player with a lot of things that are even more interesting arguably than exact one of those amazing Michael shaft productions would just blows your mind every time well yeah you can mix things with stream so streaming is great and non streaming is great and mixing them is really here's something a little bit you don't have to be something a little more understated okay the question is how do you really do this and the answer is you open the streaming track in quicktime player and then save it it's self-contained movie now you've got a streaming movies and then you can open that in quicktime player and edit it just as you would any other movie to add flash ads sprites it's just one more media type that you're mixing in and this media type is a streaming track which is just basically a wrapper around a URL and here's wilco there's a really nice high quality mpeg-4 playing and again you see your player doesn't have to be doesn't have to be loud or abrasive if it can be just you know really attractive and there's some really nice ones coming out now so it's it's a nice thing to do and let me see if I can ok that's the recorded stream what I just told you live streams are a little different and I will show you that now ok pre-recorded stream we just talked about that when you add a media to stream you can either add it or you can add scaled if you use quicktime player pro it basically add scale to take the duration of the thing i've selected and add i want to add a still image to a streaming audio i add scale they select the whole streaming audio and add this image for the duration of the audio for live streams it's a little trickier I wonder if I have a live stream i can open here i think i do i'm going to try to show you this the first I'm going to explain it just in case I can't show you you're going to open the stream in quicktime player and save it but now you've got a pointer to a live stream live stream doesn't have unknown duration quicktime doesn't know how long it is or where you are in the stream is just the eternal now so you have to disable the streaming track in order to do any editing because editing is time-based and that's the trick if you use quicktime player pro if using another tool you know it may be very simple if they open this live stream and have this media and it just works I think live stage just hides all that from you if you're trying to do it in quicktime player pro you know for thirty dollars then you have to jump through some hoops but you basically the thing is you disable the streaming track and that will get your time slider back bringing your other media ad scaled to the whole duration and then re-enable you're alive track and i'll try to show you that now this is the is where the demo gets off into some interesting areas okay right ok and school mixing ok think I'll try ok ok listen guinea live stream here [Music] now as you can see there's no time slider in the control because we don't know what the story is with that we don't know what time it is how long it is we can't skate backwards because it's live we can't skip forward to supplies but if I go into the movie whether the edit okay let me do it command J get information here's the movie information and it has one track which is a streaming track and that's all it has it's in queue design to its classical music lovely alright and what I'm going to do now is I'm going to disable that track put enable track menu and say here are not along your navel thank you now you see we have a time slider so now if I want to open ok here's what radio move here's a something that looks like a radio and I'll extract track from it and the other picture sounds good strike that that's good ok now I have an image it has the duration of it's really long ok cool ok so copy that I hit tamanna let me do it so you can see copy and I just when you copy with nut with nothing selected it copies the image that you shame okay I didn't need to save that go back here and now select all edit has scaled okay and now I believe I can re-enable the streaming track right and now I have an image the food duration is more or less eternal right along and so here I've basically added a picture to a live stream it was little tricky i had to turn in disable it then re-enable it a good slider me knockin toxicol this glue sup man hi but obviously the principle here is pretty straightforward if you have a live radio station you want to have it playing with the image of your radio station or the song is being played you don't want to have it just playing in the player you can mix live streams with non streaming media and the book goes into great detail about other ways to do that is there a QuickTime call to swap tix there is live sprite actions that you can use to swap things you can have it as part of the movie yes there are ways to make the image change with what's being broadcast let's see do I have a player that does that okay okay now i think we've kind of gone over why you extreme vs fast start embedding streams in the web page using source and QT source text movies reference movies pre-recorded the live streams any questions but we just tell us all right we're on the same page this is going good we have three and three and a half minutes so are ya I just real quickly you if if we had a if I have a live stream going like that and i want to put indexes for scene change with the question he asked about changing the picture your standard like change the album art for the further thing but you want to do a live stream like off a radio station not a sequence concatenated mp3 files how would you approach that what i would do is i would get channel storm which is an application that does just that it's a live studio in software and quicktime supports this but you can't do it easily from quicktime broadcaster you need a little bit more sophisticated application that can say send an event stream mix this current basically you're sending life what you're doing is you're streaming video as well as audio it's just your your video has a very low bandwidth gun is that's the short answer and you could also send text with URLs if you wanted to load up a web page at that point yeah for streaming trex saw streaming movie can you add can you stream gauge math tricks can you add excuse eh rent checks hrf track yes hrf track streams actually still you can add an h RF track to a streaming movies where you can stream the href track and an href track for those of you who don't know is a text track which consists of a series of URLs but it's a QuickTime text track so these these URLs arrive at a certain time and basically it says when I get to this point in the movie load this URL and let me yeah let me show you that over here this little demo of it something like that and this is worth seeing it's kind of cute few shows all the work doesn't look from me let's try this one okay welcome to the audio tour this is an example of the talking web tour it combines an audio track and an href track the hrs track loads HTML pages into the top frame synchronized to the narration the tour is controlled by the audio movie playing in the frame at the bottom of the page you can pause the audio movie at any time to explore links in the upper frame ok so this is live HTML it's being driven by an HP ref track in the movie which is unexpected I think we have a bug to report to Apache ago open this an exploder and here's a tricky thing that browse through sometimes do it's actually downloading the movie from the hard disk to a cache on the hard disk that's another reason why you might sometimes want to use QT source don't use browser if you're distributing large movies on a CD and you find that you just try to open the movie the browser thinks that the movie is coming from the web because it's not you know really very intelligent sometimes so it's trying to load this high bandwidth movie from the disk put into a disk cache play it out of the disk cache basically doing three times the work it needs to do and if it's a high-bandwidth movie it can show for take a very long time so if you use QT source don't use browser that avoids that bring the sound back up so this is this movie plays along the sample content for chapter 3 bus to move so that's just to show you a little bit of some of the power of a cover of a page right track other questions are these examples on the website some of them are on the website they are all on the CD that comes with the book and I'm putting more of them on the website all the time the new addition there's a third edition with QuickTime 61 now and 63 and a couple weeks we're just we're repping the CD as we go along and we'll be posting updates on the web you can order it now in the Morgan Calculon booth here at the show they'll give you twenty percent off and free shipping I think it's expected next week or couple weeks two weeks okay real soon um similar to the last thing that you showed are you able in the skins to embed like HTML web functionality kind of like a little mini browser if you will inside of the skin that interacts with the movie kind of the way this movie interacted with the page yes the short answer is yes and we're out of time thank you very much [Applause] you