Erika Ehrli - Adventures with Office Products & Technologies
MSDN & TechNet: Releasing Office, SharePoint, Exchange & Lync Centers and content for developers and IT professionals.

Want a video blog?

Want a video blog?

  • Comments 16

Videos are great eye candy for Web sites and blogs are the latest .com most popular content. So now imagine having them together. According to WIKIPEDIA, a blog that includes video is better known as Vlog and vlogging is the latest trend in blogging.

The reason is simple: a lot of people love videos. It's a pleasure watching something funny or learning tricks while watching and listening to a demo. You are seeing and listening to the world and it's just taking what you can read somewhere a step further.

Watching Webcasts, trying out Virtual Labs or downloading Screencasts will help you to reduce your learning curve for new technologies and MSDN is on top of it. The same happens with blogs. If you post code samples to your blog, you might consider trying to record a demo as a video and post it. Readers will get a better experience because they will get to see what the code is doing.

I have been doing some research and here are some tips I want to share in case you are interested in exploring the concept.

To start creating my own videos and I needed two things:

  1. The tools:

    I just got my license for Camtasia (and I promise nobody is paying me for the free marketing). I did my benchmark exercise to evaluate this software along with some others, and Camtasia offered the features I needed. You can consider it as a good option if you are planning to start recording demos. Of course once you record the video, you need to post it to a server so everyone can watch it.

  2. The code for embedding the videos:

    So here's the deal. You can have different video formats, such as:

  • AVI video files
  • Macromedia Flash (SWF) movie files
  • Windows Media (WMV) streaming media file
  • QuickTime (MOV) movie files
  • Custom production files

 

I am interested in working with WMV files and using Windows Media Player client to embed videos into Web pages. Fortunately, there's and ActiveX control (WMPlayer.OCX) that you can use through script. Bad news is some blog sites will not allow you to run scripts and you will be limited to use HTML. One thing you can do is create an html page, host it in a different server (a lot of bloggers do the same with images) and use an IFrame to pull the video page to your blog. Here is some sample code that you can use to embed videos into HTML pages:

<html>
<head>
    
<title>Render Video</title>
</head>
<body>
    
<!-- This is the code you need. -->

    
<script language="JavaScript">

var WMP7;

if
(window.ActiveXObject)
{
    WMP7 
= new ActiveXObject("WMPlayer.OCX.7");
}
else if (window.GeckoActiveXObject)
{
     WMP7 
= new GeckoActiveXObject("WMPlayer.OCX.7");
}

// Windows Media Player 7 Code
if ( WMP7 )
{
     
document.write ('<OBJECT ID=MediaPlayer ');
     document
.write (' CLASSID=CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6');
     document
.write (' standby="Loading Microsoft Windows Media Player components..."');
     document
.write (' TYPE="application/x-oleobject" width="400" height="400">');
     document
.write ('<PARAM NAME="url" VALUE="http://download.microsoft.com/download/5/7/1/57139364-d7af-4c18-9ce3-5149a3a727ca/EC304_Friend.wmv">');
     document
.write ('<PARAM NAME="AutoStart" VALUE="false">');
     document
.write ('<PARAM NAME="ShowControls" VALUE="1">');
     document
.write ('<PARAM NAME="uiMode" VALUE="mini">');
     document
.write ('</OBJECT>');
}

// Windows Media Player 6.4 Code
else
{
     
//IE Code
     
document.write ('<OBJECT ID=MediaPlayer ');
     document
.write ('CLASSID=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95 ');
     document
.write ('CODEBASE=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715 ');
     document
.write ('standby="Loading Microsoft Windows Media Player components..." ');
     document
.write ('TYPE="application/x-oleobject" width="400" height="400">');
     document
.write ('<PARAM NAME="FileName" VALUE="http://download.microsoft.com/download/5/7/1/57139364-d7af-4c18-9ce3-5149a3a727ca/EC304_Friend.wmv">');
     document
.write ('<PARAM NAME="AutoStart" VALUE="false">');
     document
.write ('<PARAM NAME="ShowControls" VALUE="1">');

     
//Netscape code
     
document.write ('    <Embed type="application/x-mplayer2"');
     document
.write ('        pluginspage="http://www.microsoft.com/windows/windowsmedia/"');
     document
.write ('        filename="http://go.microsoft.com/?linkid=5519355"');
     document
.write ('        src="http://download.microsoft.com/download/5/7/1/57139364-d7af-4c18-9ce3-5149a3a727ca/EC304_Friend.wmv"');
     document
.write ('        Name=MediaPlayer');
     document
.write ('        ShowControls=1');
     document
.write ('        ShowDisplay=1');
     document
.write ('        ShowStatusBar=1');
     document
.write ('        width=400');
     document
.write ('        height=400>');
     document
.write ('    </embed>');

     document
.write ('</OBJECT>');
}

    
</script>

</body>
</html>

If you use the previous code and an IFrame, videos in your blog can look like this:

This KB article has code samples to embed videos using VBScript or Jscript and here are some useful resources for working with the Windows Media Player object model and downloading the latest version:

Happy Vlogging!

~Erika

Leave a Comment
  • Please add 3 and 2 and type the answer here:
  • Post
Page 1 of 2 (16 items) 12