Streaming Learning Center Where Streaming Professionals Learn to Excel
Related Articles
Introduction
The March, 2007 issue of Event DV included an article entitled Dare to Stream: Deliver Your Wedding and Event Videos Online. In the article, I focused on the encoding side of the equation; choosing a codec and encoding parameters. Briefly, the article recommended using multiple formats, QuickTime and Windows Media at a minimum, with Flash as a third option, especially if your site has lots of other Flash design elements. This article discusses your alternatives for distributing these videos once encoded and uploaded to your web site, from simple to complex.
While I tried to keep this discussion as non-technical as possible, I had to make some assumptions going in. First, I assumed that you, or someone who works with you, knows how to upload a video to your web site, usually via FTP. If you know this much, you can upload files and distribute them from your server.
The next two options involve creating links in a web page. This requires no knowledge of HTML, the lingua franca of the web, but you do need to know how to add content to your web pages. The third alternative involves adding embedded videos to your web page. Here, at least a high level knowledge of HTML will be helpful, but if you can copy and paste text strings and follow simple instructions, you should be able to get the job done.
I made several other assumptions while writing. First, that you’re working with a regular web server, not a streaming server. Second, that security isnot a primary concern, and in fact, you want the broadest possible audience to see your videos. Finally, that you’re posting a relatively small volume of videos to your web site and while efficiency is always nice, you’re not concerned with automating the process.
One note of caution before getting started. The phrase “there are many ways to skin a cat” resonates when it comes to adding streaming content to a web site. There are many different alternatives for adding streaming video to a web page, and tools for getting it done, each with a unique range of options and strengths and weaknesses. I’ve tried to show the simplest, easiest and least expensive techniques, but by no means are they exclusive.
The First Step
Whatever technology you choose, or techniques you use, uploading videos to your web site is always the first step. I use consumer program WS_FTP Home from Ipswitch, which costs under $40, and has proved sufficient for my needs. Note that although your authoring tool will likely have an FTP facility to upload web pages and content, it’s always been essential for me to have a separate program for file managements, for uploading files, finding them once uploaded, and renaming files, as well.
Figure 1: You’ll need a separate FTP program; I use WS_FTP Home from Ipswitch.
Before uploading your videos, create a separate folder with a memorable name like demotape, which I use for my site. As with all things web, don’t leave any spaces in the name (hence demotape, rather than demo tape, though demo_tape would work just as well), since your browser will replace the space with %20, which looks unprofessional and can obviously be confusing. To make things simple during any hand coding, I try to use small (as opposed to capital letters) for all files and folders, and I recommend that you do the same. Specifically, if you capitalize the first letter of your video file, and don’t capitalize it in the link, the browser won’t find it, which can lead to hours of totally wasted debugging time.
Alternative 1: Email the URL
Once the files are safely on your site, you can simply email the URL to your client or prospect. You can make the URL clickable (depending upon the security settings of the email client) within the email by sending an HTML message (rather than plain text), then highlighting the link, right clicking, and choosing Hyperlink.
Figure 2. Adding a hyperlink to a web address in an email in Microsoft Outlook.
Rather than typing the URL from scratch in the window that appears, access the file in your browser and then copy the link into the Hyperlink address line. This double-checks that the content gremlins haven’t somehow hosed your content, and makes sure that you send the right link. When the client clicks on the link, their default player for this type of content should open and play the file, just as if they had double clicked the file on their hard drive using Windows Explorer or Macintosh Finder.
This approach may assuage customers whose videos you’re using, since they won’t be accessible to the general riff raff on the web. On the other hand, it also limits those who can view your videos, and may eliminate you from consideration for prospects who do much of their buying triage based upon demo videos readily available on the web. So let’s move to the next level of access and complexity.
Adding a Link on a Web Page
Let’s talk for a moment about the difference between linking and embedding. Linking to a video file means that playback will appear either in a separate web page or a separate player. Embedding means that the file will play within a defined window on the web page. Figure 3 shows the difference.
Figure 3 – a video embedded on the left, and linked to on the right. Always a good idea to put file size next to the link, so the viewer knows they may be waiting awhile.
There are pluses and minuses to both approaches. Embedded videos give you a known, controllable look, and allows you to integrate video into your overall site design, especially when using Flash. Since the remote viewer generally sees the page with the player right away; they recognize that “something” is happening. In contrast, if you link to a player, depending upon the browser used by the remote viewer, the entire file my download before the player appears, which can be confusing.
On the other hand, embedded videos take up lots of space, making it challenging to present more than one or two videos without taking up gobs of screen real estate. That’s why it’s fairly common for sites like DL.TV or Blue Core Media (www.bluecoremedia.com), both shown in the previous article, presenting one embedded Flash video with links to multiple other alternatives. Embedding video is also more challenging technically, though I present several very easy alternatives below.
Linking allows you to pack more demo alternatives into the same real estate. Note that with Windows Media, and to a lesser extent QuickTime, you can either open up the video in a separate player, or open another web page with an embedded player. This would allow you to present multiple links on a page, yet still display each video in an embedded environment.
More specifically, if you link directly to a Windows Media file, most browsers will open the Windows Media player to play the file. With QuickTime, if you link directly to a QuickTime file, the default behavior is to open a web page with an embedded QuickTime player that will load and play the file. There are workarounds, but they’re beyond the scope of this article. I include a reference to advanced QuickTime scripting below.
With Flash, your linking options are different. Note that when you produce Flash video files, you can produce in one or two file types, FLV and SWF. The FLV file is video only, and needs a special type of player that’s not widely distributed. For this reason, unless your client or prospect is a Flash developer, you shouldn’t link directly to FLV files.
In contrast, SWF files typically link to an FLV file, provide playback controls, and are played via the widely distributed Flash Player, but only within an HTML web page. You can embed an SWF file into a web page, as we’ll cover below, but you can only link to a separate web page with an embedded player, not directly to the SWF. Since Flash creates that HTML page for you when publishing your SWF file, you simply link to the HTML document, not the SWF.
Linking Mechanics
Once you understand exactly what you want to do, creating the link itself is simple. Select the text or image that will contain the link, then insert the hyperlink. In FrontPage 2003, you open this dialog by right clicking and choosing Hyperlink. Then, you insert the URL of the target file, either the media file directly, or another web page, and set the link.
Figure 4 – when linking to another web page, be sure to open a new window.
When linking to another web page, be sure to find the control that lets you open this in a separate window, which is the Target Frame dialog shown in Figure 4. Otherwise, your browser will switch from the video selection page to the new page, and if your remote viewer mistakenly closes the window after playing the video, they’ll have to open up a separate window and navigate back to your site. Better to open all videos in a separate page, so your web site stays available.
Embedded Players
Embedding video can either be easy or hard, depending upon the format and tool that you’ve chosen. Let’s start by looking at the HTML syntax that embeds a file into a web page. By way of background, to embed the video file, you need to copy and paste this text into your HTML editor at the location where you want the link to appear.
The code looks a touch scary, but we’re going to fly at the 50,000 foot level, so stay with me. First, understand that few, if any web developers actually create this syntax by hand; they either formulate them in a WYSIWIG authoring program or copy and paste them from other sources, and customize as necessary.
Figure 5 – HTML code for embedding a QuickTime compatible MP4 file into a web page.
Second, note the presence of both OBJECT and EMBED syntax, which is critical, because both “tags” must be included in your embedded links to ensure compatibility with different browsers on both Macintosh and Windows platforms. That’s because Internet Explorer on the Windows Platform uses ActiveX controls to play videos while virtually all other browsers, including Internet Explorer on the Macintosh, use the Netscape Embed technology.
Interestingly, but sadly not surprisingly, Microsoft FrontPage generates only Object tags when creating links to Windows Media files, which means virtually all other browsers simply won’t see the links to those Windows Media files. Long story short, if you are copying and pasting HTML syntax generated from other sources, make sure they contain both Object and Embed tags.
Where to go to get these tags? You have multiple options. The best place to start is at the University of California, San Francisco web site (http://cit.ucsf.edu/embedmedia/step1.php), where the college created the “Embedded Media HTML Generator” shown in Figure 6.
Figure 6 – UC SF will create all HTML for you; you just need to copy and paste.
You put in the basics shown, follow the bouncing wizard, and the system will automatically create the code you need to embed the selected file into your web page (and in fact created the code shown in Figure 5). I use the system extensively and have only a couple of caveats. First, the system places the embedded file into a table, which conflicted with my site design. I worked around this by copying and pasting only the content that started with <OBJECT> and ended with (/OBJECT), none above or below.
The second problem I experienced is that when I paste the code into FrontPage, it adds a number of spurious characters that throw off the syntax (which didn’t happen in Dreamweaver). This feels idiosyncratic to FrontPage, and I was able to work around the problem by first pasting the text into Notepad, then copying from Notepad to FrontPage.
The other issue is that the Flash-related syntax created by the UC SF doesn’t display the player controls in the skin I selected when I created the SWF in Flash. Fortunately, there’s an easy solution here; since Flash creates both SWF and HTML files when you publish your SWF, you can simply copy the tagging syntax from the HTML file to add to your web page.
To be painfully clear, when I created the link to the Flash content as described above, I linked to the HTML page. When I embedded the Flash file into my web page, I copied the linking syntax from the HTML page into my web page. To view this code, you can simply load the HTML file into a browser, then click View > Source (for Internet Explorer) or something similar if using a different browser.
That’s your backup plan if UC SF ever pulls their HTML generator. Just find a site that presents their embedded videos in roughly the same way as you would like to, then view the source HTML and copy what you need. Beware of tags that refer to Java or Javascript, since that’s totally different ballgame, but if the language contains only the object and embed syntax you should be able to make it work.
Downloading Your iPod File
If you’re making an iPod compatible version of your video available to your prospect or client, you have at least two options. You can link to it as described above, open the QuickTime Player to view the file, and advise the viewer to right click and choose “Save as Source” to save the file to the location of their choice (see Figure 3). Otherwise, you can encode the video in a zip file, and upload and link to the zip file in your web page. Zipping the file won’t decrease the file size much, if at all, but links to zip files automatically start downloading when clicked by the remote viewer, which is the desired action.
Test, Test, Test
The last caveat is that you should test your uploaded video files on as many platforms as possible. It’s especially critical that you test on computers other than that used to create the HTML, since your code may mistakenly link to content available on that computer, but not on the web. In addition, be sure to test on Macs using both the Safari and popular Firefox browser. You can check my work at www.doceo.com/sample_videos.html.
Other Resources:
Flash Developer Center, http://www.adobe.com/devnet/flash/video.html
Introduction To HTML Scripting Guide for QuickTime, http://developer.apple.com/documentation/QuickTime/Conceptual/QTScripting_HTML/index.html
Windows Media Knowledge Center; http://www.microsoft.com/windows/windowsmedia/knowledgecenter/default.aspx
