Sharing Videos Online

An email from a subscriber asked:

"A topic that would be of interest to me is how to incorporate this work into online personal websites/blogs or hosted sites that present stills and video.

best way to save, best sizes etc..........things to consider in selecting the material that presents best on these kinds of web sites

I would like one place to share with friends and family but want to only make one slide-show/movie that I can also use at home on my DVD players and PC's"

Yes... a great topic, but in just one newsletter I can only touch on the highlights of. I wish I had a magic formula or setting, a 'one size fits all' answer. I don't, which makes it an even better topic as there's more to explore. I'll start by rampling around a bit... let me know at the end which item(s) need to be gone into in more depth.

Take your home pictures, videos and music/audio, mix them together into stories and movies, and distribute them to relatives and friends. Everyone understands the concept. But, as Ross Perot says 'the devil is in the details'... and we have lots of details to learn. 

Many websites and posts show or discuss examples of success, but there are many people frustrated by the issues involved. Here's a sample.

It's a learning curve for all of us... what hardware and software to use, and how best to distribute our videos? As the waves of multimedia development keep rolling out, we have more choices every month, and more learning to do. The right answer today may not be appropriate next month.

In the past month I've added Photo Story 3 and a Creative Zen Portable Media Center to my software and hardware toolboxes, both of which are changing the way I approach video editing and distribution. Who knows what I'll get next month that will take me down a different path?

In this newsletter I'll overview the topic of distribution, focusing more about online choices rather than burning discs or outputting to digital tapes... or to my Zen.

... before getting into it, a few notes about some things going on...

Notices

• The new branch of the website for Photo Story 3 is now complete... with all 7 of the planned pages. In next week's newsletter, I'll review what I've learned about it over the first month since its release.

• My saved stories from PS3 go onto the Zen fine...

• The Editor-in-Chief of MaximumPC was very pleased with the 6-page (maybe less or more) tutorial that will be in the Winter special, on bookstands Dec 7th. It's distribution is only in the USA. Doing the article was an enjoyable experience, similar to doing this weekly newsletter. I'll be pursuing more things like it.

....on to the topic of the week

Summary

... start each project by thinking about

who your audience is  and  how will you get your movie to them?

 

• If a DVD disc is needed to play it on a TV, then round up your source files in the highest quality:  DV-AVI for video and 800x600 or higher pictures

 • It'll be easy for them to view, but more difficult for you to make and distribute.

 • If online viewing is suitable, then you should round up appropriately sized source files. DV-AVI size is overkill, and high quality 320x240 WMV files are fine. They are easy to make and distribute, and easy for them to view.

Maybe seek a middle road, something that works best for they and you.

Most of the time, saving and distributing various ways is actually the best for your audience... even if inconvenient for you.

Here's what I'll cover in this newsletter

• Capturing and Prepping Pictures - file sizes, resizing, formats. I use jpg files for my web pictures, sized such that 600 pixels is the largest dimension, and compressed at 80% quality for smaller files.  It's rare for one of my jpg images to run more than 100K in file size.

The smaller the graphics files, the quicker the page downloads. 

• Website space and uploading files - ISPs and online services. I've used both in the past but currently have more than enough space on my son's business server. Use what you have..

• Simple Links - No Website page is needed. Put the graphic, sound or video file on a server and provide a link to it. The WMA and WMV files work great that way.

Video files - I use 320x240 and keep the total bitrate in the range of 300-500 Mbps. It's a suitable quality for broadband users but the files are too large for dial-up users who need to go eat lunch or dinner and then go back to see the video. I've decided to cater to broadband users and use other methods to get videos to the dial-up viewers who can't enjoy them. I work with them on a case-by-case basis. 

The online videos on my Movie Maker website range from 22 KB in file size to 22 MB.... only the smallest ones play automatically when the page opens. Most of them have links for the viewer to choose.

• Website Pages - the next step beyond a simple link to an online file is a website... start with a single page on your ISP provided space, with a couple pictures and a few links.... and go from there. Once started, it's easy to keep expanding. My MM2 website started with a single page about "Acceleration and Codecs", and is now over 200 pages.

The essentials for a page are:

- Wallpaper - I make it with IrfanView
- Font - I use the tried and true Verdana unless I have a good reason to change
- Providing links to Graphics, Video and Audio Files... or other websites

• Automatic Playback in the Web Page itself - like Echo the owl on the Photo Story 3 intro page... an easy thing to include.

Capturing and Prepping Graphics

I use IrfanView's capture feature... for general purpose. It's always open and ready to take snapshots as I write my newsletters.

My rule of thumb is to save the captured images as JPG files at 80% quality... for smaller files. And keeping the biggest side of the image less than 600 pixels.... the above image is 504x386 pixels and 29K in size. This HTML formatted newsletter is just like a web page.

File sizes - the above one is 29K and the below is 60K... keep them below 100K by resizing, lowering the JPG compression quality setting, using fewer colors, cropping the real area of interest... whatever it takes.

If resizing, use IrfanView's Image > Resize feature after capturing and before saving.  

Website Space and Uploading Files - ISP, online service or someone else's website space.

Most ISP's provide some space for your online files and web pages. and provide a browser-based utility to get the files there. 

If you don't have enough space from your ISP, then you can use an online service that hosts web pages or files, or specific ones like Neptune that host videos.

Browser-based interfaces are often slow and deliberate, processing one file at a time. Maybe OK to start with, but not the easiest to update or upload a batch of new or changed pages, images, and video files.

An FTP (file transfer protocol) Connection is better in that you can batch upload the files. Check your ISP or service for specific info about the settings to use... and you need an ftp utility.

My favorite file management utility is Total Commander (http://www.ghisler.com/), which includes an FTP feature.

If I've updated 20 pages at a Barnes & Noble evening session, I want to upload all 20 at once and Total Commander lets me do it. 

You enter the site settings in the dialog window at the left. The Session name is whatever you want. The only entries needing info from your host are the Host name (port), your user name, and your password.

Transferring Files - connect to the website anytime you want to, using Total Commander's menu (NET > FTP Connect > pick the Session name > Connect).

The picture below shows you what I see when connected to my Movie Maker website. The website's folders and files are on one side of the working window, and my local copy of the same files are on the other side, it's simple to compare the two, select the files I want to upload, and do it as a single batch copy step - pressing the F5 key kicks it off.

One thing to be careful of is the case-sensitivity of some servers. You'll sometime have a file with a .jpg extension on your hard drive, and in the link of your web page... and wonder why the link doesn't work on the website. Sometimes the uploading changes the case from jpg to JPG, and you need to realign them by renaming the file or changing the case in the link.

 Always test your links after adding new ones or making changes. 

Simple Links - No Web Page Needed

If you upload an image or video file to a website, there's no need to have a web page... send the link in an email or instant message. For example, the video of the monkey editing movie on the Editing > Introduction page of my site can be gotten to by drilling down the site menu and clicking on the image of the monkey, or by clicking this direct link:

http://www.PapaJohn.org/PapaJohn/MM2/video/Editing.wmv

The important thing to know is that it's the same file in the same place that plays, no matter how you get to it.

Uploading the file once, and then providing links to it... in an instant message, an email or on web pages is often easier on the sender and receiver. The viewer decides if and when to see it, and no bounced emails because their mailbox is full.

Website Pages

Sometimes I get asked what software I use for my Movie Maker website. It starts with the code for the menu. Over 6 years ago I downloaded a freeware package called OmenTree, a javascript menu, which I've been using since...

If you want a copy of what I started with, I just put the zipped file on the server:

http://www.PapaJohn.org/PapaJohn/MM2/Downloads/omentree.zip

...from there I've tried whatever comes along - Front Page, Visual Studio, PhotosShop... and think about software such as Flash and Dreamweaver... but I keep going back to basics, tweaking the pages using Notepad, and copying an existing page to start a new one.

My goal is to provide lots of content via text and illustrate things with audio/video files made from Movie Maker and Photo Story. Other software might be more appropriate when creating your site.

Learning From Others - If you see a web page you like and wonder how they did it, right-click on the page (not a picture on the page... the text area is fine), and select 'View Source'. It'll show you the HTML code that you can copy/paste/tweak.

I'll illustrate some of the basics using the main page of my Movie Maker 2 site. The segment of code I'm looking at shows a couple of the basics:

Wallpaper - I made it with IrfanView by opening my boat/castle on the island logo, picking up the color scheme by cropping a thin horizontal slice, and then resizing it to 1500 pixels wide by 20 pixels high.

The WallpaperMM2.jpg file is 3.4 K in size, nice and small for downloading. The browser treats it as a horizontal stripe, putting it at the top and then repeating the pattern over and over until the window is full.

Font - No need to reinvent the wheel - the Verdana font I specify first is traditionally the one considered easiest to read on websites... I use Verdana in my newsletters also, and use the same background file to align the style between my site and newsletter. 

Here's the typical font command line I have in the web pages:

<font COLOR="#000000" face="Verdana, Arial, Helvetica, sans-serif" size="3">

The color of all zeros is black. Here's an online color calculator if you need one: http://www.colorschemer.com/online.html 

The first pririty for the font type is Verdana... if it's not available. try Arial, then Helvetica, and finally sans-serif. If none of them are available, the browser will use the default for the computer setup... or the user has specified the font to use so it'll ignore your settings....

Embedding Graphics, Video Files and Links that go beyond the Simple ones

Here's part of the Living Projects > Wedding branch of my site. Clicking on either the link or the picture will play the video, which is in the website folder as the web page (HTML file).... here's the segment of the page followed by the HTML code for it. Two lines of code, one for the lead-in sentence with the link, and the other for a picture used as a link.

Here's how to read the code:

• <p align="right"> - starts a new paragraph that is right justified

• <a target="_blank" href="DancingQueen.wmv"> - the blank target means to open up a new browser window instead of opening the referenced file in the same window.

After opening a new window the command tells it to play the wmv video, which needs to be in the same working folder as the web page (or you need to include the path to it if it's in another folder or on another website... it doesn't have to be on the same site).

• <b> starts bolt text, and </b> ends the bolding.  

• <a starts the command to create a link... to a picture, video, or audio file, or to another web page. The page can be on any server on the internet, not just the site that the website is on.

• <img src= the souce file for the picture shown and used as the link... the HTML width and height settings are in pixels and override the actual size of the image. The border is a black frame in pixel size (none in this case). The h and v space is the amount of free space in pixels to leave around the image, so text or other things don't bump up right next to it. The alt is the alternate name to give the viewer if the picture file isn't available... maybe a case sensitivity mismatch.

 <p  align="right">
The <a target="_blank" href="DancingQueen.wmv"><b>'Dancin' Queen'</b></a>.... was a fun one, and shows that imprompu things can happen!!!!

<p  align="right"><a target="_blank" href="DancingQueen.wmv"><img src="52P-DancingQueen.jpg" width="440" height="330" border="0" hspace="10" vspace="10" alt="Dancing Queen"></p></a>
<p>

Playback in Windows Media Player

When the viewer selects a video link... the simple link or one of the web page links, the Windows Media Player (or other default player like IrfanView's mulitmedia player) will open, the file will start downloading, and as soon as enough data has been downloaded, it'll start playing.

A WMV file will start playing before it's fully downloaded. In the above picture, I've pointed to the progress points on the player... having played 18 seconds of the video at this point, the total amount of data downloaded so far is about 1/4 of the file. The download is currently about a minute ahead of the playback.

This wedding video is a good one to note the considerable differences between dial-up and broadband connections. With my cable modem connection and a fast connection, this video starts playing about 5 to 10 seconds after I click on the link, and the download progress stays comfortably ahead of the playing. 

The parents of the bride have a dial-up phone connection in a neighborhood with older phone lines. For them to view this video, it takes over 2 hours to download it fully before it starts playing. And I know from experience that if they want to see it a second time, they'll close the viewer and hit the link on the website again.... and it'll take another 2+ hours to download it a second time.

You might have all kinds of suggestions for the couple with the dial-up connection, but it's part of the reality of today's setups. They are running Windows XP... and they get to choose the kind of setup they want for it. My goal is to give them an easy and pleasant viewing experience.

I burn an occasional data CD with a full set of website files on it - including the videos in WMV format, so they can run the full wedding website... but run it off the CD instead of the internet.

.... and we're going to dinner with the couple tonight.. all the wedding videos are on the Zen. You with broadband can enjoy them on the Living Projects > Wedding branch of my website. You with slow dial-up connections can take me to dinner another night and I'll show them to you on the Zen. :)

Playback in the Web Page itself

I don't have the above movie setup to play in a window on the webpage itself. I use those rarely and carefully, making sure the file is a relatively small one.... one example is the Echo the owl sample on the Photo Story 3 > Intro page. It's a 590K wmv file, and here's the code used to embed it. The dynsrc (dynamic source) is the key:

<p><img dynsrc="video/PS3-Sample-Echo.wmv" width="320" height="240" border=5 hspace=10 vspace=10 loop="99" alt="PS3 Sample - Echo" align="right"></p>

In this case the video file isn't in the same folder as the web page... it's in a subfolder named video. See in the code how to handle it when organizing that way.

File size dictates how big a file to use. If you put it into the page, it'll automatically start downloading when you open the page. Anything larger than 1 MB should be a link for the viewer to choose if and when to use.

Closing

You can have anything from a single file on a website to a complex site with lots of web pages and files.

My Movie Maker 2 website currently has 720 files on one server that total 629 MB, and a couple hundred MB of files on another.  

• graphics: 3 BMP, 64 GIF, 20 ICO, 215 JPG, 11 PNG
• web pages and special stuff: 1 CSS, 2 CLASS, 230 HTML, 1 JS
• audio/video: 9 WMA, 150 WMV
• downloads: 7 PRX, 6 ZIP, 1 RTF

website traffic as measured in the flow of data is running about 15 GB per month... some services charge be the space used and others by traffic.

You can make good use of an older computer as a server. My son's server that hoses a dozen websites including mine has a Pentium II 400 Mhz CPU.

I didn't address "... want to only make one slide-show/movie that I can also use at home on my DVD players and PC's...". That's asking a lot. The world of TV viewing is oriented around MPEG-2 files for DVDs. The world of computer-based viewing is best served by the new version 9 WMV files.

You can make the one project in Movie Maker 2, but you'll have to save the project into different formats (WMV and DV-AVI) and then do conversions to get the movies to where they need to go.... and that all depends on who your audience is.

My attempts to satisfy all viewers with a single rendered file have ended up compromising things such that none of them were satisfied, and I wasn't either. If quality is high, file sizes and download times are high. If you give them something speedy, they complain about the quality.

I didn't touch on using the Encoder to pack a number of different video files into a single WMV file and set it up on a streaming server... that's beyond the basics.... maybe in a future newsletter.

I look forward to comments and discussion about this and other newsletters on the forums at:

www.windowsmoviemakers.net/forums/

 

Have a great week... PapaJohn

 

Movie Maker 2 - www.papajohn.org
Photo Story 2 - www.photostory.papajohn.org
Photo Story 3 - a branch of - www.papajohn.org

Products and Services

 

I'm involved in many things that support the users of Movie Maker and PhotoStory, and adding more daily. Here's a list of what is available to the public. Some are free and others are reasonably priced.

Books and Magazines:

Movie Maker 2 - Do Amazing Things (with its online companion on www.papajohn.org)

Movie Maker 2 - Zero to Hero (with support on the Friends of Ed forum at http://friendsofed.infopop.net/2/OpenTopic)

MaximumPC's winter quarterly special - tutorial 'Make a Killer Flick with Movie Maker 2'. It'll hit newsstands on December 7th and be there for 3 months. 

 

Websites:  

Movie Maker 2 - www.papajohn.org - 3 goals: to help you solve problems, be the online companion to the Do Amazing Things book, and provide a detailed tutorial for using Photo Story 3.

PhotoStory 2 - www.photostory.papajohn.org - a full tutorial about using it. It's not a problem-solving site.  

PhotoStory 3 - www.papajohn.org - there's a new major branch at the bottom of it, with 7 pages that are now complete.

 Online Support - Forums, Channels and Newsgroups  

I'm a regular on many online forums and newsgroups, the main ones being:

Movie Maker 2 and PhotoStory 2 forums at www.windowsmoviemakers.net/forums/

 

 

Movie Maker 2 forum at SimplyDV.com

 www.simplydv.co.uk/simplyBB/viewforum.php?f=21

 

Windows XP Movie Maker newsgroup at microsoft.public.windowsxp.moviemaker

Photo Story 2 newsgroup  microsoft.public.plus

Photo Story 3 newsgroup  microsoft.public.windowsxp.photos

Weekly Newsletter:

Movie Maker 2/PhotoStory 2 newsletter. The annual subscription is $20 and the link to subscribe is on the main page of my Movie Maker website at:

www.papajohn.org

 

Tentative topics for upcoming newsletters (always subject to change):

#29 - Follow-up issue about Photo Story 3... what's been learned about it since its release a month ago

#30 - open

#30 - open

Older newsletters (more than 6 issues ago) are archived by Rob Morris at:

http://www.windowsmoviemakers.net/PapaJohn/Index.aspx

Software:

Transition Maker 2 (TM2) - a utility to make the ultimate in personal and custom transitions for Movie Maker 2:  

www.PapaJohn.org/PapaJohn/MM2/TM2

TM2 is a joint effort by Patrick Leabo, the programmer, and myself.

 I routinely beta test the Pixelan packages and think very highly of their people and products: Their SpiceFX packages of additional transitions and effects for Movie Maker 2 are available at:

 www.pixelan.com/mmp/intro.htm

ProDAD's Adorage package for Movie Maker 2 is available at:

http://esd.element5.com/product.html?cart=1&productid=542813&affiliateid=200000336

 Other fee-based services:

 

If you can't save a movie because your project has become too complex, e-mail it to me and I'll divide it into manageable sub-projects for you, and provide detailed instructions to render the parts and assemble them into your final movie. $49.95 - for details, see the sidebar on the Problem Solving > Can't Save a Movie page of  

www.papajohn.org

Movie Maker 2/Photo Story 2 training and support services start at $50 per hour - email me at PapaJohn@CharterMi.net and I'll help you determine your needs, and work with you to plan and implement them.

Wedding website/video packages start at $2,500 + travel expenses. See www.jill-mark.papajohn.org for a sample.