Publishing Video on the Internet: How to Play Movies in TypePad
Publishing Video on the Internet: How to Play Movies in TypePad
I get a couple of emails a week from people asking how hard it is to play movies in TypePad.
Answer: It's not very hard at all, once you've shot the movie, edited it down to a reasonable length, compressed it so it serves at under 600 kilobits per second, uploaded it to a show more...
Correct answer: It can be a lot of work until you've done it often enough that you have a process in place to help you.
I can't write everything in a single post you need to know about publishing video on the web, but I'd like to help with what I thought was the hardest part: coding the HTML.
I'm going to share the HTML I use to play movies in my TypePad posts. First, there are some caveats. The code that I present here assumes the following:
That you've shot, edited, and compressed a movie into .wmv format so it plays at about 600 kilobits per second in Windows Explorer, and the movie is 300 pixels high and 400 pixels wide. It also assumes you've uploaded the movie to a server, a necessary step, since it won't play for someone else while it's on your computer. You can use the FILES tab in the CONTROL PANEL tab of TypePad to upload your finished .wmv movie into your TypePad account.
The code I use follows. You can copy and paste it, and change it to suit your needs. Remember to paste the code into the EDIT HTML window of your TypePad NEW POST. Copy everything from the first <p> to the last </p>. I've colored the code to explain some of the HTML features I use. My explanation follows the code. The code is real in the sense that it is exactly the code I used to play the movie on Lance Armstrong posted just before this one.
OK. Ready? Here's the code:
<p>
<span style="color: #ffffff;">vlog vlogging video quicktime wmv mov mpeg lance armstrong blood doping urine testing tour de france l'equipe cycling
</span>
</p>
<p>
<span style="color: #660099;">
<strong>PLEASE NOTE: There are a few moments worth of buffering before the video starts. </strong>
</span>
</p>
<p></p>
<p>
<center>
<object id="WinMedia" type="video/x-ms-wmv" height="346" width="400"><param value="http://www.62ndmarketing.com/AGKVideo/AGK20050827.wmv" name="FileName" /><param value="0" name="AutoStart" /><param value="1" name="ShowControls" />
</object>
</center>
</p>
<p>
<span style="color: #660099;">
<strong>To play the video, click on the START (>) button on the control bar above. Requires Windows Media Player for the PC or Mac, and a cable, DSL, or LAN. If the video doesn’t play when you click the START button, you may need to download Windows Media Player for your computer at:
</strong>
</span>
</p>
<p>
<center>
<span style="color: #669900;">
<strong>
<a href="http://www.microsoft.com/windows/windowsmedia/download/default.asp?displang=en" target="_blank">Windows Media Player Download Center
</a>
</strong>
</span>
</center>
</p>
Now for the explanation.
For the code colored in red: These are meta tags. You can't see them on the post because I've colored the text white to match the AGK background. These are important for search engines to find since they don't know what your saying in your video. In order to do the same thing on your post, you'll have to match your background color and insert the six letter/number code where I have "ffffff'" which is the HTML code for white. "000000" is black. In my posts you'll also see "660099" which is the purple that matches the AGK color scheme. You can find your background color by selecting your TypePad DESIGN tab and clicking CHANGE THEME.
Fore the code colored in blue: This is the code that calls the Windows Media Player object from your viewers desktop. If they don't have Windows Media Player on their computer they won't be able to play your movie. They'd have to download it first. No worries, it's free. You can't mess with too much code in this segment. You'll notice that the height of the movie is 46 pixels larger than the assumed size I told you about up above. The extra 46 pixels is to acommodate the WMP control bar that shows up at the bottom of the video. If you publish a video that's a different size, remeber to add the 46 pixels, otherwise your movie will look squished. You'll also have to change the URL of where your video is located. Mine happens to be located at another server I use (62ndmarketing). If you've uploaded your video file to your TypePad account, right click the filename, and drag down to COPY SHORTCUT. You can then paste that address into the code above.
The code colored in green: This redirects the viewer to the Microsoft page to download a copy of Windows Media Player 10, in case they don't already have it installed on their computer.
I hope this answers your questions. If not, feel free to email me and let me know.
show less...