Embedding Windows Media Player for all Browsers

Question

Hello,

we are using WMV Videos on an internal sites, and we are embedding them into web sites. Now, this works quite good on Internet Explorer, but not on Firefox. I've found ways to make it work in Firefox, but then it stops working in Internet Explorer.

We do not want to use Silverlight just yet, especially we can be sure that all clients will be Windows XP with installed Windows Media Player. I just wonder: Is there some sort of Universal Code that embeds WMP into both IE and Firefox, or do we need to implement some user-agent-detection and deliver different HTML for different Browsers?

Answer 1

You could use conditional comments to get IE and Firefox to do different things

<![if !IE]>
<p> Firefox only code</p>
<![endif]>

<!--[if IE]>
<p>Internet Explorer only code</p>
<![endif]-->

The browsers themselves will ignore code that isn't meant for them to read.

Answer 2

The best way to deploy video on the web is using Flash - it's much easier to embed cleanly into a web page and will play on more or less any browser and platform combination. The only reason to use Windows Media Player is if you're streaming content and you need extraordinarily strong digital rights management, and even then providers are now starting to use Flash even for these. See BBC's iPlayer for a superb example.

I would suggest that you switch to Flash even for internal use. You never know who is going to need to access it in the future, and this will give you the best possible future compatibility.

Answer 3

I thought about Flash before, but the Problem with flash is the cost of the Encoder and Streaming Server. The WMV Encoder is free, and the Streaming Server is just included in Windows 2003, so there is simply no justification.

I also found the Flash Encoders i've tried to be really bad. The Adobe Flash Video Encoder does not seem to do Multi-Threading or 2-Pass and it can't read all videos. On2 Flix Pro is unstable to the point it's useless, and ffmpeg's VP6 Encoder did not produce a good quality at acceptable Bitrates.

Maybe H.264 is a choice for the future as there are good encoders for it, but that still leaves out the Streaming Server License Cost.

So in short: While Flash has a lot of Advantages in terms of Deployment, I found it a chore on the content-production side, so i'll want to stay with WMV which already works, only the Browser implementation is a bit more complicated as I do not want to use Silverlight just yet.

Answer 4

Well, on the processing end we use Cleaner to great success, and I have not heard of any problems. But this may be a Mac only product. But in terms of serving there may be no need to use streaming of any sort. Do users need instant access to any part of the video? If not, progressive HTTP download should be absolutely fine.

Answer 5

This works for me in firefox and IE

<object id="mediaplayer" classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#version=5,1,52,701" standby="loading microsoft windows media player components..." type="application/x-oleobject" width="320" height="310">
<param name="filename" value="./test.wmv">
     <param name="animationatstart" value="true">
     <param name="transparentatstart" value="true">
     <param name="autostart" value="true">
     <param name="showcontrols" value="true">
     <param name="ShowStatusBar" value="true">
     <param name="windowlessvideo" value="true">
     <embed src="./test.wmv" autostart="true" showcontrols="true" showstatusbar="1" bgcolor="white" width="320" height="310">
</object>

Answer 6

Encoding flash video is actually very easy with ffmpeg. You can use one command to convert from just about any video format, ffmpeg is smart enough to figure the rest out, and it'll use every processor on your machine. Invoking it is easy:

ffmpeg -i input.avi output.flv

ffmpeg will guess at the bitrate you want, but if you'd like to specify one, you can use the -b option, so -b 500000 is 500kbps for example. There's a ton of options of course, but I generally get good results without much tinkering. This is a good place to start if you're looking for more options: video options.

You don't need a special web server to show flash video. I've done just fine by simply pushing .flv files up to a standard web server, and linking to them with a good swf player, like flowplayer.

WMVs are fine if you can be sure that all of your users will always use [a recent, up to date version of] Windows only, but even then, Flash is often a better fit for the web. The player is even extremely skinnable and can be controlled with javascript.

Answer 7

@Grant

Many thanks, this works like a charm, both answers are truly great!

@rictic

Thanks, but when i last tried ffmpeg, the quality was bad for bitratess around 500 - 700k, because it could only do the old FLV Encoding, no VP6. Have not checked if this has changed as we already switched to WMV. You don't need a streaming server, but it allows to do some proper logging, user rights, bandwidth management etc. pp.

Answer 8

May I suggest the jQuery Media Plugin? Provides embed code for all kinds of video, not just WMV and does browser detection, keeping all that messy switch/case statements out of your templates.

Answer 9

Elizabeth Castro has an interesting article on this problem: Bye Bye Embed. Worth a read on how she attacked this problem, as well as handling QuickTime content.

Answer 10

It should be Microsoft's job to ensure cross-platform compatibility of its product. We should only embed the player. If Microsoft does that, it will re-conquer the player stage.

Answer 11

Use this.... works in FF and IE ' />

            <!-- BEGIN PLUG-IN HTML FOR FIREFOX-->
            <embed  type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
                src='<%= GetSource() %>' align="middle" width="600" height="500" defaultframe="rightFrame"
                 id="MediaPlayer2" />

and in JS function playVideo() { try{ if(-1 != navigator.userAgent.indexOf("MSIE")) { var obj = document.getElementById("MediaPlayer1"); obj.Play();

                }
                else
                {
                      var player = document.getElementById("MediaPlayer2");
                            player.controls.play();

                }
             }  
        catch(error) {
            alert(error)
  } 


     }

Answer 12

I recently worked through this and came up with an ASP.NET C#-based solution that worked for the following browsers (tested on XP): Internet Explorer 7, Firefox 3.0.10, Opera 9.64, Safari 4.0, Google Chrome 2.0 and Flock 2.5.

What it comes down to is writing a bit of server-side C# to generate one object tag syntax for IE and another one for "everyone else".

Here's a link to the full post with ASP.NET/C# source code and a live example: Multiple Browser Windows Media Player Object Tag

Answer 13

I have found something that Actually works in both FireFox and IE, on Elizabeth Castro's site (thanks to the link on this site) - I have tried all other versions here, but could not make them work in both the browsers

<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" 
  id="player" width="320" height="260">
  <param name="url" 
    value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" />
  <param name="src" 
    value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" />
  <param name="showcontrols" value="true" />
  <param name="autostart" value="true" />
  <!--[if !IE]>-->
  <object type="video/x-ms-wmv" 
    data="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" 
    width="320" height="260">
    <param name="src" 
      value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" />
    <param name="autostart" value="true" />
    <param name="controller" value="true" />
  </object>
  <!--<![endif]-->
</object>

Check her site out: http://www.alistapart.com/articles/byebyeembed/ and the version with the classid in the initial object tag

Answer 14

Cross browser solution that always works...

How to stream music or audio from your website: http://nunzioweb.com/streaming_audio-example.htm