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
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...
• 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
... start each project
by thinking about
who your audience
is and how will you get your movie
• 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
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
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
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.
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.
- 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
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:
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
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
If you want a copy of what I started with, I just put the
zipped file on the server:
...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.
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
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:
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:
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
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.
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>
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
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.
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
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:
Have a great week...
Movie Maker 2 -
Photo Story 2 -
Photo Story 3 - a branch of -
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
its online companion on
Movie Maker 2 - Zero to Hero (with support on the Friends
of Ed forum at
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.
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 -
- a full tutorial about using it. It's not a problem-solving site.
PhotoStory 3 -
- there's a new major branch at the bottom of it, with 7 pages that are now complete.
Support - Forums, Channels and Newsgroups
I'm a regular on many online forums and newsgroups, the main
Movie Maker 2 and PhotoStory 2 forums at
Movie Maker 2 forum at SimplyDV.com
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
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:
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:
Transition Maker 2
(TM2) - a utility to make the ultimate in personal and custom transitions for Movie Maker
TM2 is a joint effort by Patrick Leabo, the programmer, and
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:
ProDAD's Adorage package for Movie Maker 2 is available at:
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
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.