Want a video blog?


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

Comments (16)

  1. I’ve been creating video demonstrations for some time now, but recently I’ve decided to try and spruce

  2. MSDNArchive says:

    What a great post – thanks for writing this up Erika!  I agree that Camtasia is the best tool for doing this.

  3. I think screencasts and video blogs are an exciting way to show off new product capabilities. Others

  4. Very cool. Gotta love Iframes. Unfortunately for me won’t work on a WSS V3 blog as it even strips out the Iframe code.

  5. Ladyboy says:

    This good, I looking how put on my blog website, but I just begginer about make website, soon I want putting camera me, follow everyday around Thailand for like big brother, funny, soory bad english thank you.. Ladyboy Kat

  6. Hi from England

    Just as an example, we’ve tried to create a simple do it yourself TV Channel.

    It’s mainly aimed at businesses, but we’d love to attract the creative industries as well, such as artists, musicians, dancers etc.

    I don’t know if you allow the embed tag, but I’ll give it a try.

    Thanks

    <embed src="http://www.tvbuz.com/store/21/black_player.swf&quot; flashvars="playlist=http://www.tvbuz.com/store/21/videos.xml&quot; width="320" height="240" pluginspage="http://www.macromedia.com/go/getflashplayer&quot; type="application/x-shockwave-flash" scale="exactfit"></embed>

  7. freda says:

    In my blog, i want to introduce some films which i most like to bloggers.At one time, i want to convert a dvd movie to avi format movie, i find the conversion tool very hard, at last, i find a lot of tool in the website <a href="http://www.qweas.com/"&gt;

    <b>Qweas</b></a>. So, i want to share the tools with you.

  8. MSDNArchive says:

    Your right about Camtasia, I’ve played with many freebees and they don’t scratch the surface of what this product does. It is kinda flacky on Vista though. :(

  9. Max R. says:

    Hello! Very interesting. Thank you.

  10. Interesting, but an important factor is how well video content is encoded. I have been experimenting with this a little &lt;a href="http://www.wind-storm.com"&gt;>here&lt;/a&gt;

  11. freda says:

    Has anyone look at qweas(http://www.qweas.com/) how do you think of it?

  12. matar_mt says:

    <a href= http://index2.koliom.com >classic chevy tachometer</a> <a href= http://index1.koliom.com >beviesandbuttheadcartoon</a> <a href= http://index5.koliom.com >amc movies pleasure island</a> <a href= http://index3.koliom.com >single girl poems</a> <a href= http://index4.koliom.com >appropriate age for a child to use an adult treadmill</a>

  13. Olgunka-nc says:

    <a href= http://index5.gopati.com >island fiber glass pools</a> <a href= http://index2.gopati.com >honolulu movie theaters</a> <a href= http://index1.gopati.com >peanut butter pops</a> <a href= http://index3.gopati.com >muldoonassociates</a> <a href= http://index4.gopati.com >pics of blondes in langerie</a>

  14. Olgunka-nc says:

    <a href= http://index5.gopati.com >island fiber glass pools</a> <a href= http://index2.gopati.com >honolulu movie theaters</a> <a href= http://index1.gopati.com >peanut butter pops</a> <a href= http://index3.gopati.com >muldoonassociates</a> <a href= http://index4.gopati.com >pics of blondes in langerie</a>

  15. Olgunka-nc says:

    <a href= http://index5.gopati.com >island fiber glass pools</a> <a href= http://index2.gopati.com >honolulu movie theaters</a> <a href= http://index1.gopati.com >peanut butter pops</a> <a href= http://index3.gopati.com >muldoonassociates</a> <a href= http://index4.gopati.com >pics of blondes in langerie</a>

  16. garry-mu says:

    <a href= http://index1.baba-h.ru >����� ���� ����</a> <a href= http://index2.baba-h.ru >����� ����������� ��� ����</a> <a href= http://index3.baba-h.ru >���������� �������� �������</a> <a href= http://index4.baba-h.ru >������ �����</a> <a href= http://index5.baba-h.ru >����� ���� ������� ���������</a>