Walker News

Windows Media Player: How To Embed WMV File In HTML Code?

Thanks to many photo/video hosting sites available for free (but restricted to certain rules), e.g. Flickr and YouTube, everyone has an easier way to share their happiness captured in digital media files over the Net.

Some buddies, however, would like to share them entirely on their personal weblogs (thank to WordPress and Web 2.0 that have made it possible).

OK, embedding pictures in HTML and show the photos inline on a webpage is easy as usual. But, it needs more typing to embed video in HTML and stream the video content inline on a webpage.

Embedded image/video VS Inline image/video

In brief, “embedded image/video” present an URL or HTML link to the media file that might invoke a download process for the target file, a new browser window to display the media file, or invoke a third party program (non-browser application) to open the media file.

Then, “inline image/video” means web browser understand how to open and display the media file inside the same browser window, in line of the text surrounding it.

How to embed Windows Media Video/WMV file in HTML code and stream the video content inline on a webpage?

Windows Media Video/WMV file sample:
http://walkernewsdownload.googlepages.com/HP-iPaq-614.wmv

Embedded WMV file:

The code:
<a href="http://walkernewsdownload.googlepages.com/HP-iPaq-614.wmv">HP iPAQ Business Navigator</a>

The result:
HP iPAQ Business Navigator

Inline WMV file:

The sample of code:
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="480" height="360" codebase="http://www.microsoft.com/Windows/MediaPlayer/">
<param name="Filename" value="http://walkernewsdownload.googlepages.com/HP-iPaq-614.wmv">
<param name="AutoStart" value="true">
<param name="ShowControls" value="true">
<param name="BufferingTime" value="2">
<param name="ShowStatusBar" value="true">
<param name="AutoSize" value="true">
<param name="InvokeURLs" value="false">
<embed src="http://walkernewsdownload.googlepages.com/HP-iPaq-614.wmv" type="application/x-mplayer2" autostart="1" enabled="1" showstatusbar="1" showdisplay="1" showcontrols="1" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,0,0" width="480" height="360"></embed>
</object>

The result of the sample code:

Note: You might need to download and install Windows Media Player plugin/add-on to play inline Windows Media Player files.



Howto, Internet, Dummy Guide, Guide, Howto, HTML, Tutorial, Weblog, Webpage, Windows Media Player, Windows Media Video, WMP, WMV, Wordpress


» Favicon: How To Create A Website Icon For A Blog?
» WordPress: Adds wp-caption-text To CSS File For Image Caption Styling
» How To Change WordPress Image Caption Text Style To Superscripts?
» How To Edit And Rewrite Post Slug / Permalink In WordPress 2.5?
» Update WP_TITLE To Display Blog Name On The Right
» Windows Live Messenger Does Not Display Music Playing In Windows Media Player
» How To Insert Multiple Images In WordPress 2.6 Without Using Shortcode?

Custom Search

« Video Guide: How To Show Hidden System Files In Windows Vista?
» WordPress 2.6: What Does The Commenter IP Tells?
  1. [...] Windows Live Messenger is not showing or displaying title of song played in Windows Media Player, i.e. none of the MSN contacts can see what song you’re listening [...]

  2. Angel March 21st, 2009 9:28 AM

    Hi ,
    I have done “copy & Paste” this code on my sample page, but its worked only once, That was FLV player.
    Media player is not play

  3. Walker March 21st, 2009 11:51 PM

    Please update the code with another WMV file as the one in the code hosted in Google Pages will not be available after exceeding the granted bandwidth :-(

  4. hiuyu May 15th, 2009 4:36 PM

    very useful tutorial~!
    thank you.