Creating a Playlist For Windows Media Player With JavaScript

T

Tony

I'm working on project that plays movies using Windows Media Player and
I'm controlling everything with JavaScript. Per the client I only need
to support IE 6 or greater which happens to make things a bit easier.

What I need to do is create a playlist and play it using JavaScript. I
keep on getting close but not close enough to play the dang files. Has
anyone done this before and can shed some light on what worked for them?
 
C

cwdjrxyz

Tony said:
I'm working on project that plays movies using Windows Media Player and
I'm controlling everything with JavaScript. Per the client I only need
to support IE 6 or greater which happens to make things a bit easier.

What I need to do is create a playlist and play it using JavaScript. I
keep on getting close but not close enough to play the dang files. Has
anyone done this before and can shed some light on what worked for them?

If your playlist is to be the same every time with one video played
after the other in sequence, your job will be easy and you need not
limit to IE 6 + browsers.

The WMP will play a few types of videos, with .wmv being the most
common. This can use a wvx playlist file to play videos in sequence.
For example the below object is used to play the WMV:

<div style="text-align:center">
<object data="http://www.cwdjr.info/movie/cancanvbr.wvx"
type="video/x-ms-wvx" style="width:400px; height:309px">
<param name="src" value="http://www.cwdjr.info/movie/cancanvbr.wvx"
valuetype="ref" />
<param name="showcontrols" value="1" valuetype="data" />
<param name="showstatusbar" value="1" valuetype="data" />
<param name="autostart" value="0" valuetype="data" />
<param name="volume" value="0" valuetype="data" />
<param name="PlayCount" value="1" valuetype="data" />
</object>
</div>

Notice this uses the .wvx playlist file. A .wvx file has an XML
structure and looks like:

<ASX VERSION="3.0">
<ENTRY>
<REF HREF="http://www.cwdjr.info/movie/CanCanvbr.wmv" />
</ENTRY>
</ASX>

I just put in one video, but you can add as many as you wish using the
same entry-ref-/entry structure as above. The reference points to the
location of the actual .wmv video files.

Now if you want to change around the sequence in which the videos are
played(say allow the viewer to select a play list from several video
choices) you have more of a problem. The WMP is not easy to control
with script if the code is to validate and play on most modern
browsers. However, if you are interested in IE browsers only, as you
state, then you likely can find information concerning scripting the
WMP somewhere on the Microsoft developers site - at least it was there
a few years ago. I wiil not use such code, but many will.

An example of a working page that uses the above mentioned technique is
at http://www.cwdjr.info/broadbandMedia/formatsOB/cancanWMV.php . The
page is designed for broadband with a bit rate of about 2 Mbps. It
likely will work at much lower rates, but the buffering time will then
become excessive until enough is downloaded to allow streaming to start
without having to stop somewhere to catch up with loading. At least the
player will indicate the progress of buffering so that you know the
video is downloading.
 
T

Tony

The problem is that I have a list of menu items that have a function
attached to the onclick event handler that will load that movie, or
rather play it from the playlist that I created. So lets say I have an
object with the id of "Player" that is the Windows Media Player.

I read in the documentation online from Microsoft's MSDN website that
if I went something to the effect of:

// Create an array of the movie titles. The ".wmv" will be appended
later when looping
wmvs = new Array();
wmvs[0] = 'theFirstMovie';
wmvs[1] = 'theSecondMovie';

// Loop through the wmv array and place the movie into the Player's
playlist
for(var index = 0; index <= wmvs.length; index++)
{
wmvMovie = wmvs[index]+'.wmv';
mediaItem = Player.newMedia(wmvMovie);
Player.currentPlayList.appendItem(mediaItem);
}

Then that should have worked and then I would play the movie using a
function that retrieves the movie by the index from the param that was
passed in and then play the movie.

function PlayMovie(movieIndex)
{
var movieToPlay = Player.currentPlayList.item(movieIndex);
Player.URL = movieToPlay.sourceURL;
//Tried the line below instead of the one above and it throws a pretty
weird error.
//Player.controls.playItem(movieToPlay);
}

That should work but for some reason it's not. I know I gotta be off by
something. I have spent my day googling for this solution and I haven't
really found anything close to it. So maybe I might eventually figure
this out and when I do I'll post it back to this forum so we have it
documented. The reason I'm not using the asx playist file or whatever
it's called is due to the fact that I need to play a specific file and
then continously play from that index onward. So I appologize for not
providing more of a background in the begining.
 
R

Randy Webb

cwdjrxyz said the following on 11/10/2006 2:25 AM:
If your playlist is to be the same every time with one video played
after the other in sequence, your job will be easy and you need not
limit to IE 6 + browsers.

The WMP will play a few types of videos, with .wmv being the most
common. This can use a wvx playlist file to play videos in sequence.
For example the below object is used to play the WMV:

I don't have videos to test with, but, does the WMP play videos out of
an .m3u file the way it does sound files? It's a simple text file with
the name of each file on a single line. With sound files, it plays them
in order:

musicFile1.mp3
musicFile2.mp3
musicFile3.mp3


Does that work with videos?
 
T

Tony

That might be a solution however, does it let me pick WHERE in the
playlist I want to start?
 
C

cwdjrxyz

Randy said:
cwdjrxyz said the following on 11/10/2006 2:25 AM:

I don't have videos to test with, but, does the WMP play videos out of
an .m3u file the way it does sound files? It's a simple text file with
the name of each file on a single line. With sound files, it plays them
in order:

musicFile1.mp3
musicFile2.mp3
musicFile3.mp3


Does that work with videos?

The WMP will play from a .m3u playlist as well as a . wvx and .wax
playlists. However when one has several players, one must configure
each for the types of files it will and will not attempt to play or you
may get unexpected results. I have the WMP, Real, QT, Winamp, and Flash
players installed. To get all of these to behave properly on 8 browsers
is no small task, as many of the players will play file types that
others also will. The WMP plays mostly Microsoft formats. The Real
player of course plays Real formats including .ram and .rpm playlists,
but it also plays some of the Microsoft formats, but probably not a
Microsoft .wvx playlist. The QT player also plays several formats in
addition to QT .mov. The Winamp player plays a huge number of audio
formats and many more audio plugins can be easily added to it such as
..ape and .flac. Recent versions of it also play a few video formats. In
my case, I select to send .wvx and .wax playlists to the WMP. I send
..m3u playlists to the Winamp. The media format war is now more
complicated than the old browser wars ever were. Rightly, or wrongly,
the providers of media players are convinced there is much money to be
made in selling media downloads, so they are glad to give you the
players for free. At least in the case of Apple, they indeed have sold
many millions of downloads.
 
C

cwdjrxyz

Tony said:
The problem is that I have a list of menu items that have a function
attached to the onclick event handler that will load that movie, or
rather play it from the playlist that I created. So lets say I have an
object with the id of "Player" that is the Windows Media Player.

I read in the documentation online from Microsoft's MSDN website that
if I went something to the effect of:

// Create an array of the movie titles. The ".wmv" will be appended
later when looping
wmvs = new Array();
wmvs[0] = 'theFirstMovie';
wmvs[1] = 'theSecondMovie';

// Loop through the wmv array and place the movie into the Player's
playlist
for(var index = 0; index <= wmvs.length; index++)
{
wmvMovie = wmvs[index]+'.wmv';
mediaItem = Player.newMedia(wmvMovie);
Player.currentPlayList.appendItem(mediaItem);
}

Then that should have worked and then I would play the movie using a
function that retrieves the movie by the index from the param that was
passed in and then play the movie.

function PlayMovie(movieIndex)
{
var movieToPlay = Player.currentPlayList.item(movieIndex);
Player.URL = movieToPlay.sourceURL;
//Tried the line below instead of the one above and it throws a pretty
weird error.
//Player.controls.playItem(movieToPlay);
}

That should work but for some reason it's not. I know I gotta be off by
something. I have spent my day googling for this solution and I haven't
really found anything close to it. So maybe I might eventually figure
this out and when I do I'll post it back to this forum so we have it
documented. The reason I'm not using the asx playist file or whatever
it's called is due to the fact that I need to play a specific file and
then continously play from that index onward. So I appologize for not
providing more of a background in the begining.

I have hacked my code so that it now will respond to events using
javascript. See
http://www.cwdjr.info/broadbandMedia/formatsOB/cancanWMVtest.php with a
comment in the code. I am not for sure exactly what you are doing, but
you might have to write a player object for each of your videos to give
you as much control as you want. Anyway you should be able to use
events such as mouse family ones, onclick etc with the code now. The
code works on recent versions of IE6, Opera, Firefox, SeaMonkey,
Mozilla, and Mozilla. The frog in the example I give responds to
mouseover.

Bear in mind that scripting media players is another world, is nearly a
branch of hacking, and that something can fail at a new upgrade. For
example, the WMP has the byte size of 3 or 4 small browsers such as
Firefox or Opera. I doubt if any one person knows all of the details
about how the WMP works, and it likely was designed by a committee. If
you do script Media players, you should always check you pages after
every new player update. I had several pages fail when the WMP was
first introduced several years ago. These pages used a complicated
Microsoft set of scripts to detect the WMP version, and these scripts
failed after the 10 upgrade. Since then, I stay away from scripting
media players as much as possible.
 
T

Tony

I was creating a Playlist using JavaScript and populating it on the
fly. Here's what I did to accomplish this. Remeber...I was only doing
this for IE, this probably won't work on FireFox.

/***************************************************************************************************
Author: Tony Bianco
Usage: You can use this but please have the heart to give me credit I
worked my ass to get this.
Email: (e-mail address removed)

If you have any questions then keep it to the post...if it just can't
wait then email me.
***************************************************************************************************/
//USE THIS IN AN EXTERNAL JS FILE
// 'Player' is the id of the media object.

// tell Media Player to request full media access rights
Player.settings.requestMediaAccessRights('full');

// Create an Array for the names of the media files
wmvs = new Array();
wmvs[0] = 'movie1';
wmvs[1] = 'movie1';
wmvs[2] = 'movie1';

// Populate the playlist
for(var index = 0; index <= wmvs.length; index++)
{
// we will add 'wmv/' and '.wmv' to the list
wmvMovie = 'wmv/' + wmvs[index]+'.wmv';
mediaItem = Player.newMedia(wmvMovie);
Player.currentPlayList.appendItem(mediaItem);
}

// To play the movie in the play list we create a function to load the
movie
function LoadMovie(movieIndex)
{
var movieToPlay = Player.currentPlayList.item(movieIndex);

// Check to tried to reload this movie
if(movieToPlay.sourceURL != currentMovie)
{
currentMovie = movieToPlay.sourceURL;
Player.controls.playItem(movieToPlay);
}
else
{// We are playing the current movie
// If the player was paused we play it
if (3 != Player.playState)
{
Player.controls.play();
}
}

// Just for kicks we can add a timer that will show the seconds pasted
in the movie
timer =
window.setInterval("document.getElementById('currentPosition').innerHTML
= Player.controls.currentPositionString",1000);
}

<!-- HTML FILE -->
<!--
*************************************************************************************
Now if we were to use this on our HTML page we would create the object
and
if we didn't want controls on the page then we would use the param
uiMode
and set it "none". This allows us to set up our own custom controls.
***************************************************************************************
-->

<object id="Player" width="640" height="480"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="uiMode" value="none" />
</object>
<!-- include your external js code from above AFTER the object tag it
works better here -->

<!-- Now we want a link to load that movie so we do this to play the
second movie -->
<a href="#" onlclick="LoadMovie(1); return false;">Load Second
Movie</a>


This allows you to continously play the play list items from anywhere
in the list.
 
C

cwdjrxyz

Tony said:
I was creating a Playlist using JavaScript and populating it on the
fly. Here's what I did to accomplish this. Remeber...I was only doing
this for IE, this probably won't work on FireFox.

/***************************************************************************************************
Author: Tony Bianco
Usage: You can use this but please have the heart to give me credit I
worked my ass to get this.
Email: (e-mail address removed)

If you have any questions then keep it to the post...if it just can't
wait then email me.
***************************************************************************************************/
//USE THIS IN AN EXTERNAL JS FILE
// 'Player' is the id of the media object.

// tell Media Player to request full media access rights
Player.settings.requestMediaAccessRights('full');

// Create an Array for the names of the media files
wmvs = new Array();
wmvs[0] = 'movie1';
wmvs[1] = 'movie1';
wmvs[2] = 'movie1';

// Populate the playlist
for(var index = 0; index <= wmvs.length; index++)
{
// we will add 'wmv/' and '.wmv' to the list
wmvMovie = 'wmv/' + wmvs[index]+'.wmv';
mediaItem = Player.newMedia(wmvMovie);
Player.currentPlayList.appendItem(mediaItem);
}

// To play the movie in the play list we create a function to load the
movie
function LoadMovie(movieIndex)
{
var movieToPlay = Player.currentPlayList.item(movieIndex);

// Check to tried to reload this movie
if(movieToPlay.sourceURL != currentMovie)
{
currentMovie = movieToPlay.sourceURL;
Player.controls.playItem(movieToPlay);
}
else
{// We are playing the current movie
// If the player was paused we play it
if (3 != Player.playState)
{
Player.controls.play();
}
}

// Just for kicks we can add a timer that will show the seconds pasted
in the movie
timer =
window.setInterval("document.getElementById('currentPosition').innerHTML
= Player.controls.currentPositionString",1000);
}

<!-- HTML FILE -->
<!--
*************************************************************************************
Now if we were to use this on our HTML page we would create the object
and
if we didn't want controls on the page then we would use the param
uiMode
and set it "none". This allows us to set up our own custom controls.
***************************************************************************************
-->

<object id="Player" width="640" height="480"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="uiMode" value="none" />
</object>

The above is an ActiveX object for the WMP. IE supports it, unless you
turn ActiveX off. Other than slight modifications of the IE browser
such as the MSN browser, most browsers do not support ActiveX. There
have been some plugins you can add to some of the Mozilla family
browsers for ActiveX support of the WMP, but few likely have downloaded
these. Thus I do not see any reason to use such a limited script unless
you are on a network where everyone has IE browsers. Some add an embed
path within the ActiveX object to be taken by browsers that do not
support ActiveX. In your case, that might or might not work. In any
event embed is invalid html and will give several validation errors at
the W3C validator. I have not checked if your code works for IE or
other browsers with ActiveX support, because you do not provide a demo
page. If your approach meets your needs, fine. However it may not meet
the needs of some others who want their page to work properly on most
recent browsers that have the WMP installed.
 
T

Tony

First off to clarify things once more....at the top of the post it says
the client only wants this for IE. When you said "embed" what were you
talking about exactly. And yes that code works perfectly fine in IE.
It's the finished code.
 
C

cwdjrxyz

Tony said:
First off to clarify things once more....at the top of the post it says
the client only wants this for IE.

Perhaps, but it seems to me that one should write code that will work
on most recent browsers, as most websites do. The next client may not
be so easy to satisfy.
When you said "embed" what were you
talking about exactly. And yes that code works perfectly fine in IE.
It's the finished code.

When you ask this question, it leads me to believe you have little
experience with video. Using an embed path within the ActiveX object is
by far the most common, although invalid, method for including browsers
that do not support ActiveX. Just a glance at the code of a few video
sites, or a trip to the Microsoft developer site can produce this
common code. An example from Microsoft is:

<OBJECT ID="MediaPlayer" WIDTH=320 HEIGHT=240
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"
standby="Loading Microsoft Windows Media Player components..."
type="application/x-oleobject">
<PARAM NAME="FileName" VALUE="Station1.asx">
<PARAM NAME="ShowControls" VALUE="1">
<PARAM NAME="ShowDisplay" VALUE="1">
<PARAM NAME="ShowStatusBar" VALUE="1">
<PARAM NAME="AutoSize" VALUE="1">
<Embed type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/windows/windowsmedia/download/AllDownloads.aspx/"
filename="Station1.asx"
src="Station1.asx"
Name=MediaPlayer
ShowControls=1
ShowDisplay=1
ShowStatusBar=1
width=320
height=240>
</embed>
</OBJECT>

This will produce many validation errors at the W3C html validator,
because embed has never been part of official W3C code. However it
works on many browsers that do not support ActiveX. I will not use such
invalid tag soup, but that does not seem to bother Microsoft.
 
V

VK

cwdjrxyz said:
The WMP will play from a .m3u playlist as well as a . wvx and .wax
playlists. However when one has several players, one must configure
each for the types of files it will and will not attempt to play or you
may get unexpected results.

Also all these players on a page are ActiveX controls which means that
they are under the Eolas patent limitations: they are not activated
(thus not scriptable) until the first user interaction (hardware
prodiced click). This limitation is built-in in all players. The most
common way to bypass this limitation (so start to script the object
right away) is by using document.write. See
<http://groups.google.com/group/comp.lang.javascript/msg/896a73f47ae1ed89>

Also Gecko users like to watch movies too :) so they should be covered
as well by GeckoActiveXObject extra branch.
 
T

Tony

You guys have me curious on a few things...

For the wvx file do the references to the WMVs need to be absolute
paths. So lets say I have a version for the web and another version for
a CD and another version for having the promo piece installed on their
local drive, what would I need for the path. Could I just do something
like:

<asx version="3.0">
<entry>
<ref href="movie1.wmv" />
</entry>
</asx>


Also the thing I hate about creating the playlist through JavaScript is
that you have to request media access rights. So would this be the case
with using WVX file?

Here's what I'm thinking...I'll use the WVX file for the "Play All"
button and then I'll have the invdividual movies load through a command
that just loads that movie into the player...OR would I get a conflict
cause I'm already using the WVX file for the "Play All" button?

- Tony
 
T

Tony

WOOT WOOT! The WVX file is working with relative paths. Is there a way
where I don't have to include the param tag:
<param name="src" value="wmv/playList.wvx" valuetype="ref" />

--OR--
Is there a way to set that param tag through JavaScript? It seems as
though I only need that param tag for the "Play All" button and not the
other movies.
 
C

cwdjrxyz

Tony said:
WOOT WOOT! The WVX file is working with relative paths. Is there a way
where I don't have to include the param tag:
<param name="src" value="wmv/playList.wvx" valuetype="ref" />

--OR--
Is there a way to set that param tag through JavaScript? It seems as
though I only need that param tag for the "Play All" button and not the
other movies.

I believe I have read somewhere that you should include the complete
URL rather than the relative one for playlists, but they often will
work with a relative one. I would stay on the cautious side and include
the complete URL. Media is full of little nasty surprises that only
occur under certain special conditions.

If you are still using the ActiveX WMP object that works only on IE and
a few closely related browsers, then instructions for scripting the
parameters, if possible, should be somewhere on the Microsoft developer
sites. So far I have had no need to do this, so I have not researched
this. You can spend a vast amount of time looking up something at that
developer site unless you get lucky in your selection of search words.
 
T

Tony

OMG...you have no idea! That site is so hard to find things. But you
just gotta navigate to the Windows Media Player SDK and then go from
there to explore the object model.

Back to the subject. I have it now so that the Play All button works.
When you click on a movie and load the specific movie (that is also
referenced in the playlist) it will play, but if I click back on the
"Play All" button then it won't start from the begining. How do I get
it to start back to the begining of the WVX file?
 
V

VK

Tony said:
OMG...you have no idea! That site is so hard to find things. But you
just gotta navigate to the Windows Media Player SDK and then go from
there to explore the object model.

Back to the subject. I have it now so that the Play All button works.
When you click on a movie and load the specific movie (that is also
referenced in the playlist) it will play, but if I click back on the
"Play All" button then it won't start from the begining. How do I get
it to start back to the begining of the WVX file?
OMG...you have no idea! That site is so hard to find things. But you
just gotta navigate to the Windows Media Player SDK and then go from
there to explore the object model.

Back to the subject. I have it now so that the Play All button works.
When you click on a movie and load the specific movie (that is also
referenced in the playlist) it will play, but if I click back on the
"Play All" button then it won't start from the begining. How do I get
it to start back to the begining of the WVX file?

AFAICT you are facing two problems:
1) If you want your control to start playing something automatically
(w/o user interacting with player interface) then you need an Eolas
workaround for any player made over the last year - that includes WMP
11. Otherwise the control will not be activated by default. The way to
work around was already suggested.

2) Advanced Stream Redirector (ASX) file cannot be "virtually"
generated out of HTML form values. All you can do is i) switch current
playlist to another one and ii) navigate by the current playlist using
Previous / Next commands and GetCurrentEntry / SetCurrentEntry where
get/set are positive integer values indicating current position in the
current list.

This way your original idea (if I read it properly) of something like
WMPObject.Playlist[1] = "CoolMovie.wvx"; WMPObject.Play(1);
cannot be accomplished by definition.

That also eliminates the possibility to port the solution on a CD.

What you can do is on form submit switch current playlist to something
like "asx_gen.cgi?formElement=value" where asx_gen.cgi would return
properly formatted ASX playlist with Content-Type "video/x-ms-asf".
 
V

VK

VK said:
This way your original idea (if I read it properly) of something like
WMPObject.Playlist[1] = "CoolMovie.wvx"; WMPObject.Play(1);
cannot be accomplished by definition.

That also eliminates the possibility to port the solution on a CD.

What you can do is on form submit switch current playlist to something
like "asx_gen.cgi?formElement=value" where asx_gen.cgi would return
properly formatted ASX playlist with Content-Type "video/x-ms-asf".

Though I maybe put IMHO all around :) WMP interfaces and security
settings changed so many times since 6.4 that it's a mess everyone can
dig out everything if looking long enough. And all the spiced atop by
MediaBar interfaces.

So anyway - IMHO.
 
T

Tony

Actually VK the code I posted earlier works with JavaScript appending
the Playlist. And there's a setting that allows you to choose if auto
start works. It's Player.settings.autoStart = [true|false]

The only thing is that it requires that you have media access rights.
So I was looking into the wvx file to see if I could get a playlist
working there. It works...but I'm running into some errors and right
now I'm so tired as I have been working 3 straight days with very very
little sleep that I'll post my solution. In 7 hours I have to have it
working. Until then...I'm pulling my hair out cause if a little error
and I can't figure out where to track it down. It's gotta be simple and
easy to fix. They always are.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top