last year I was asked (albeit last minute!) if I'd like to contribute to a book tentatively called Videoblogging Hacks so I wrote up the following rather quickly and sent it off. I'd been playing with creating html links and href tracks previously and I think I'd mentioned it on the videoblogging yahoogroups list. anyway, the book was published and is now available from various online stores.
the book is called Videoblogging and the authors names are Jay Dedman, Joshua Paul. I received a copy and had a quick look through it on my last trip home to Sydney - it's a very throrough book! so grab a copy if you get the chance.
my section was cut/edited quite a bit. I was surprised it made it all. so below is what I sent through - I need to find the images and post/links them also. it's a useful reference for me also, but most of the info below is already available on the internet.
I did find it hard to locate information at the time, so this was a way of bringing it altogether in one place as a reference.
attached are the doc and rtf versions - hopefully the images show up in them. I can't see them here on the mac but perhaps I don't have the correct viewer installed.
there's a couple of other good books on videoblogging also along with the one mentioned above :
Videoblogging by Jay Dedman, Joshua Paul
Secrets of Videoblogging by Michael Verdi, Ryanne Hodson, Diana Weynand, and Shirley Craig
( this one's available on safari techbooks online if you have a login there )
Videobloggin g for Dummies by Stephanie Cottrell Bryant
---
Creating Clickable Hyperlinks in QuickTime video movies.
-- Kath O'Donnell
Everybody knows that html links, or hyperlinks make the internet go 'round. Wouldn't it be cool to include clickable links in the video files you create and publish also. Think of the possibilities! Depending on what your video content is, the links could enhance the viewers experience whilst watching your video and allow them to gain more information or visit your homepage once they've finished watching your video. Clickable links turn your video file into an interactive video.
Including hyperlinks in your video using Quicktime is a simple step involving adding a text track and HREF codes or adding a HREFTrack, but surprisingly few people use this feature. More advanced options include being able to display the clicked link into specified html frames or windows, or even sending JavaScript code or parameters to JavaScript scripts on your website. SMIL movie files can also be used to create links, though if you decide to use this method, you need to be aware of the different ways SMIL files can be played on a computer ie it may be played in a non-QuickTime Player so could behave differently to what you expect. For this reason, this guide concentrates on creating clickable links using text tracks in QuickTime PRO.
To create a hyperlink in your Quicktime movie, you'll need to create a Text Track in the movie, then modify the text and include the url and hyperlink codes. Here's a step by step guide to show you how this is done. The instructions below are using Quicktime for Microsoft Windows XP, so if you're using a Mac, you'll need to use the corresponding Apple keys/menus. If you're using other versions of Microsoft Windows, adjust as appropriate also. This example in this guide adds a html link to a short video which then opens the videoblogging yahoogroups mail list page in the viewer's web browser.
This example will take you through each step in detail.
Once you've followed this procedure once or twice you'll be able to fly through the steps without needing to read all the explanations and minor details.
The attached word document and rtf document outline these instructions also. (the images are clearer in the document versions. These are also attached to this article or use the links here.
Step 1 : Create a text track in your QuickTime video movie
1.1 Create a plain text file, add some text and save it using an appropriate filename eg texttrack.txt (Example 1)
1.1.1 Open Windows Explorer and navigate to the directory you wish to save the file
1.1.2 Right click using your mouse, select "New" - "Text Document"
1.1.3 Give the file a name. Make sure you keep the .txt file extension
Note: if you save the file as textrack.mov and try to open it in QuickTime automatically you may receive an error, so it's best to save it using a .txt extension.
Example 1 - create a plain text file
Step 2 : Convert the plain text file to a QuickTime text track and export to a new file
2.1 Open your new text file in QuickTime
2.1.1 Select the file in Windows Explorer if it's not already selected
2.1.2 Right click on the file using your mouse and click "Open With". Select QuickTime Player from the list of applications if it is already listed, or click "Choose Program" and select QuickTime Player from the list, or browse to the QuickTime application if you cannot see it in the list of applications.
Note: for default Microsoft Windows QuickTime installations, QuickTime should be found in C:\Program Files\QuickTime. Select the QuickTimePlayer.exe application file.
2.1.3 Once the text track is open in QuickTime, it should look similar to Examples 2a-2c. The first line of your text should be displayed in the QuicktTime movie at time position 00:00:00 (Example 2a)
2.1.4 Don't worry if you cannot view the text at this stage. This is most likely due to the text colour being the same colour as the background. You can fix this in a later step.
2.1.5 Congratulations! You've just created a QuickTime text movie. Now it's time to jazz it up a bit.
2.2 If you like, you can play the QuickTime text movie as you normally would play a QuickTime video movie. It will display each line of text from your plain text file (if colours are correct) at different time positions in the file.
2.3 Try resizing the QuickTime window. See how the text resizes cleanly without aliasing effects? (Example 2d) This is one of the biggest benefits of using text tracks in QuickTime rather than inserting text images. Reduced filesizes are another benefit, as well as the ability to turn on or off the text track and select a different text track (similar to selecting a foreign language subtitle text track on your tv) (Example 2e)
Example 2a - start of text movie
Example 2b - 2 seconds into the text movie
Example 2c - 4 seconds into the text movie
Example 2d - resizing QuickTime Player without losing text quality
Example 2e - Text track properties
2.4 Export the text movie in Quicktime format
2.4.1 Click on the File menu, then click Export or press Ctrl+E
2.4.2 Select the appropriate directory to save the file and type in a filename. It's a good idea to use a different name to the plain text file you created in the previous step so that you still have that file to refer to if required.
2.4.3 In the Export field, ensure "Text to Text" is selected
2.4.4 If this is the first time you are exporting a text track, click on Options and ensure the "Show Text, Descriptors, and Time" radio button is selected, then click OK to save your option settings. (Example 3) If you have performed this procedure before, your previous options should have been saved last time you did this if you're using "Most Recent Settings" in Use field, but it never hurts to check again.
2.4.5 Click Save to save the text track file
Example 3 - Text Export Settings - Options window
Example 4 - Text Export Settings
Step 3 : Modify your text track as required using appropriate QuickTime Text Descriptors
3.1 Open the QuickTime text track in your text editor (Example 5).
3.1.1 Insert a Carriage Return character (ie press Enter on your keyboard) if you want to reposition the text so you can see all the codes.
3.1.2 Be careful not to delete the last line containing the timecode of the end of the movie and the blank line below it. Some versions of QuickTime need the blank line at the end of the file, so you may have problems playing the file if you remove this.
3.1.3 There are many codes which can be used in the file. It is a good idea to visit the QuickTime Text Descriptors page for information on the available codes.
http://www.apple.com/quicktime/tutorials/textdescriptors.html
3.1.4 For this example, we'll leave the colours, font types and sizes as they are for now, but you can experiment with your own files as required. Open/Play the file in QuickTime to view what your changes look like.
3.1.5 For this example, we'll change timecode positions slightly, so the text "Want to find out more about videoblogging?" will be displayed at the start of the text movie, then 2 seconds into the text movie the url will be displayed. We'll change the total duration of the text movie to 4 seconds ie replace the 8 second entry with 4 seconds and delete unused timecode positions. (Example 6) Adjust your text timecode positions as required.
Example 5 - Initial Quicktime
3.1.6 If we were to add this text movie as it is to a video movie, it would display as white text over black background and we would not see the actual images of the video movie. ie it would display as text -> video -> text -> video depending on the timecode position we inserted the text track into. This may be the effect you are after for certain videos, but in this example, we'll make the text display using a transparent background so the tex is overlayed on top of the video so you can still see the video movie whilst the text is displayed. ie the movie will play as text+video -> video -> text+video -> video -> text+video -> video.
3.1.7 To use transparent background text, insert the {keyedText:on} code into your file. (Example 6).
3.1.8 If you play the file in QuickTime at this stage, you won't see the transparent background text effect of this yet until you add the text track movie to a video movie. We'll do this in a later step then you can come back and adjust the text track if required.
Step 4 : Add the hyperlink tags to the url to make it clickable
The HREF & endHREF tags are used to specify the url similar to the tags used in html. There are a few types of hyperlinks which can be included in a QuickTime movie depending on the location of the QuickTime player (eg embedded in a webpage, or playing via an external application).
Examples of these are:
4.1 Clickable link which opens in a new browser window - Clickable text
4.2 HREFTrack where whole video is clickable and displayed in a targeted frameset or window
4.3 Clickable HREFTrack which instead of using a URL, triggers a JavaScript function in the current HTML page or which passes JavaScript code or parameters to a script
This guide will provide detailed instructions for option 4.1 with basic information and urls to check if you're interested in creating 4.2 & 4.3 types of links.
4.1 Clickable link which opens in a new web browser - Clickable text
To create a clickable hyperlink that opens the url in a browser window, use the following instruction (Example 6)
{ HREF:http://groups.yahoo.com/group/videoblogging }Click here to visit the Videoblogging discussion list...{ endHREF }
4.1.2 Note: the curly brackets {} are used to surround the HREF tags and a colon : is used between the HREF and the actual url
4.1.3 If you were to play this file in QuickTime now, if would look like Example 7
4.1.4 This is the simplest method of including hyperlinks. One disadvantage is that it can cause clutter on your desktop and take the viewer away from the video movie but is useful in many scenarios, including watching video in a standalone player whilst connected to the internet.
Example 6 - a QuickTime text track with hyperlink. Text displayed with transparent background.
Example 7 - text hyperlink which opens url in new browser window
4.2 HREF Tracks - making the whole video screen clickable instead of just having a text link
If you're viewing the video movie on a webpage or system which is using framesets, there is another option which can be used to display the movie in targeted named frame. In this case, you would embed your video player in one frame, then use an adjacent or upper or lower frameset to display the linked url. This is useful as both the video and linked page are displayed on the same page so the viewer can still watch the video whilst seeing the extra information.
The whole screen becomes clickable rather than just the text link.
QuickTime supports this function via the optional targeted "T" frameset instruction. The format of the url instruction is slightly different than plain clickable urls.
For example, use the following instruction to display the clicked video in an existing, targeted frame or window called "urlframe"
< http://groups.yahoo.com/group/videoblogging > T < urlframe >
Ensure there's no spaces between curly brackets {}. Ensure the T is capitalised. Ensure the url and targeted frame name are between <> brackets.
To convert the text track to a HREFTrack, you'll need to open the Movie Properties window and rename the text track to HREFTrack. Type this code exactly as specified here as it is case sensitive and won't work if not named correctly. Uncheck the HREFTrack so it is not visible.
An HREFTrack is a hidden track - it doesn't display text but instead the whole video window is clickable.
You can schedule changing links by changing the links against different times in the text track that you just created (now HREFTrack).
Close the Movie Properties window, then save the file.
Other options are available such as "A" for automatic urls
( A < http://groups.yahoo.com/group/videoblogging > T < urlframe > ), and T< myself >
( < http://groups.yahoo.com/group/videoblogging >T< myself >)
to open the url in the current QuickTime file.
This can be used to play consecutive movies in the current QuickTime player. If a movie is embedded into a webpage, the T instruction can be used to force the movie to play in an external QuickTime Player application rather than the webpage.
Refer to http://www.apple.com/quicktime/tutorials/hreftracks.html for more details.
4.3 To create a clickable HREFTrack which instead of using a URL, triggers a JavaScript function in the current HTML page or which passes JavaScript code or parameters to a script, replace the URL in example for section 4.2 with the JavaScript code or .js parameter to be passed.
Refer to http://www.apple.com/quicktime/tutorials/hreftracks.html for more details on this option also.
Step 5 : Add your QuickTime text movie which now includes the clickable hyperlink to your video movie.
5.1 Open your text movie containing the clickable link you just created if it's not already open
5.2 Select the whole text movie by clicking Edit menu, then Select All or by pressing Ctrl+A
5.3 Copy the whole text movie to the clipboard by clicking Edit menu, then Copy or by pressing Ctrl+C
5.4 Open your video file in QuickTime Player.
5.5 Move the timecode input marker position where you want the text track to be inserted. For this example, we'll insert the text at 2 seconds after the start of video.
5.6 Paste your text track into the video movie by clicking Edit menu, then Add to Selection and Scale, or by pressing Ctrl+Alt+Shift+V
5.7 Play your video to confirm text links are working and text & links are displayed when you are expecting them to. Your video will look similar to Example 9a-9c. Note the text is overlayed over the video.
5.8 The positioning of the text may require adjusting - this can be done by inserting blank lines in the text track and recombining it with the video movie. You may also want to adjust colours, typefaces, text box size at this stage also.
Example 9a - first pass text + video movie, start of video
Example 9b - first pass text + video movie, 2 seconds into the movie : first piece of text displayed
Example 9c - first pass text + video movie, 4 seconds into the movie - the url link is displayed (until end of movie)
5.9 If it is not correct, you'll need to delete the text track you just inserted (Example 10) by clicking Window menu, then Show Movie Properties or Ctrl+J, select the Text Track and click Delete from the menu. Save the movie after deleting the text track.
Example 10 - Movie Properties - prior to deleting text track which needs modification
5.10 Edit the text track as in previous steps, then reinsert the text track using step 5.6. Then repeat these steps until you're happy with the final result.
5.11 A quicker method is to paste the modified text track into the video movie and if it's not correct, press Ctrl-Z to Undo. This will save you deleting text tracks each time, but it is handy to know how to do this.
You will get into the swing of things if you have the text file open, make your change, open it in QuickTime, select all, copy, paste into the video file using Add to Selection and Scale, then undo in the video file and repeat as required.
(Note: Movie Properties window is also where you can select different tracks if you had multiple tracks in your movie file)
5.12 Example 11 shows the final text track instructions used in this movie example. Examples 12a-12c show the final example movie
Example 11 - final text track
Example 12a - final video + text movie : start of movie
Example 12b - final text + video movie - displayed text
Example 12c - final text + video movie - clickable url
Step 6 : Save your file and publish
6.1 That's it! Congratulations, you're finished. You should now have a Quicktime video with text track and clickable text.
Upload to the internet as you normally would and confirm it still works once published.
References and more information
http://www.apple.com/quicktime/tutorials/textdescriptors.html
http://www.apple.com/quicktime/tutorials/hreftracks.html
Google searches on QuickTime clickable links, QuickTime HREF, QuickTime SMIL should supply more examples and references.
--
]]>
Video makers, media activists, software developers and artists from 15 countries across the Asia-Pacific will be gathering in Sukabumi, West Java from May 19-25 for an online video skills camp. The goal of the camp is to bring together open source software programmers, video makers and media activists to develop the strategic use of online video distribution for social justice and media democracy.
]]>
