How to post videos to your web site - a primer for non-techies

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


Comments (29)

Said this on 3-4-2009 At 03:06 pm
What, no mention of Silverlight, Jan?
Said this on 4-28-2010 At 02:56 am

Very useful Article! Thanks a lot for given this...

Said this on 5-21-2010 At 09:45 am

I was very pleased to find this site.I wanted to thank you for this great read!! I definitely enjoying every little bit of it and I have you bookmarked to check out new stuff you post.

Said this on 5-25-2010 At 06:54 am
Thank you, I'm glad you find the content useful.

Kindest regards,

Jan Ozer
Said this on 5-26-2010 At 08:28 am

Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful.

Said this on 5-27-2010 At 06:40 am
I'm glad you found the information useful - thanks for taking the time to write.

Jan
Said this on 6-3-2010 At 09:38 pm

Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful.

Said this on 6-30-2010 At 01:43 am

Great Blog, full of information! and so many SEO!

Said this on 8-4-2010 At 02:49 am

Thanks for the great post. It reminds me that I have to bring more structure in to my blogging

Said this on 8-4-2010 At 07:18 am

Glad you found it useful. thanks for the visit.

Jan

Said this on 8-12-2010 At 01:52 am

You have mention good post above I really enjoy the information. I wish to come again on your site in future

Said this on 8-12-2010 At 07:43 am

Thank you for your kind comment, and please do come back.


Jan

Said this on 9-3-2010 At 03:38 am

I happen to enter your blog with the help of google search. To my sheer luck I got what I was searching for. Thankx

Said this on 9-3-2010 At 07:22 am

I'm glad you found what you were looking for; thanks for letting me know.

Jan

Said this on 9-25-2010 At 04:13 am

Good information in your post, I saw a report on a site last week about this same thing and since I am getting married in four weeks and the timing couldn’t have been better! thnks for the post!

Said this on 10-20-2010 At 09:40 pm

Nice post. This post is different from what I read on most blog. And it have so many valuable things to learn. Thank you for your sharing.

Said this on 10-21-2010 At 07:20 am

Thanks for coming by - I'm glad that you found it useful.

Jan

Said this on 11-29-2010 At 07:25 am

Hey there, just wanted to say that I appreciate and thank you for this nice post. Looking forward to the next one, I’m sure it will be just as nice.

Jan Ozer
Said this on 11-29-2010 At 10:42 pm
I'm glad you found it useful. Thanks for taking the time to write such a nice note.

Jan
Said this on 12-4-2010 At 01:02 pm

Thx for sharing things like this information. I found this advice ideal helpful. And that is a wonderful article. Return To go over Some even more.

Said this on 12-11-2010 At 04:47 am

have already been visiting your blog for three days. absolutely love what you posted.

Jan Ozer
Said this on 12-11-2010 At 10:09 am
Thanks! Tell all of your friends.

:-)

Jan
Said this on 12-30-2010 At 08:51 am

Definitely, what a fantastic website and educative posts, I surely will bookmark your site.Best Regards!

Said this on 12-30-2010 At 12:51 pm

Glad you find it useful - thanks for taking the time to write.

Jan

Said this on 1-31-2011 At 09:30 am

Amazingly website, I like how your page looks!

Said this on 2-27-2011 At 10:30 pm

Your home is valueble for me. Thanks!

Jan Ozer
Said this on 3-3-2011 At 12:22 pm

Thank you. I'm glad you found the information useful.

Jan

Said this on 3-4-2011 At 08:26 am

You've got a splendid way of writing which I find exquisite! I just want it's not the last time when I've found so great info on this topic. That is great, quite useful information and beautiful design you've got here!

Jan Ozer
Said this on 3-4-2011 At 10:46 am

Hey, thanks, appreciate the kind words, I'm blushing. Glad you're enjoying the site.

Thanks again.

Jan

Post a Comment
* Your Name:
* Your Email:
(not publicly displayed)
Reply Notification:
Approval Notification:
Website:
* Security Image:
Security Image Generate new
Copy the numbers and letters from the security image:
* Message: