Compartilhar via

Want a video blog?

  • Artigo

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="https://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=https://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="https://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="https://www.microsoft.com/windows/windowsmedia/"');
document.write (' filename="https://go.microsoft.com/?linkid=5519355"');
document.write (' src="https://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

  • Anonymous
    October 12, 2006
    I've been creating video demonstrations for some time now, but recently I've decided to try and spruce

  • Anonymous
    October 17, 2006
    What a great post - thanks for writing this up Erika!  I agree that Camtasia is the best tool for doing this.

  • Anonymous
    October 17, 2006
    I think screencasts and video blogs are an exciting way to show off new product capabilities. Others

  • Anonymous
    October 20, 2006
    Very cool. Gotta love Iframes. Unfortunately for me won't work on a WSS V3 blog as it even strips out the Iframe code.

  • Anonymous
    October 29, 2006
    The comment has been removed

  • Anonymous
    November 01, 2006
    The comment has been removed

  • Anonymous
    January 14, 2007
    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/"> <b>Qweas</b></a>. So, i want to share the tools with you.

  • Anonymous
    February 10, 2007
    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. :(

  • Anonymous
    May 09, 2007
    Hello! Very interesting. Thank you.

  • Anonymous
    May 18, 2007
    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;

  • Anonymous
    June 04, 2007
    Has anyone look at qweas(http://www.qweas.com/) how do you think of it?

  • Anonymous
    June 21, 2008
    The comment has been removed

  • Anonymous
    July 03, 2008
    <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>

  • Anonymous
    July 03, 2008
    <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>

  • Anonymous
    July 03, 2008
    <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>

  • Anonymous
    April 05, 2009
    <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>