Creating a Playlist For Windows Media Player With JavaScript

[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?

[Jim Land]

Re: Creating a Playlist For Windows Media Player With JavaScript

"Tony" <t3projects@gma il.comwrote in news:1163125520 .444743.265720
@k70g2000cwa.go oglegroups.com:

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?


Have you tried Googling (playlist javascript "windows media player") ?

One of the first results is:
"ASX-O-Matic is a HTML/Javascript generator for ASX playlists to be used
with Windows Mediaplayer."

[cwdjrxyz]

Re: Creating a Playlist For Windows Media Player With JavaScript


Tony wrote:

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:40 0px; height:309px">
<param name="src" value="http://www.cwdjr.info/movie/cancanvbr.wvx"
valuetype="ref" />
<param name="showcontr ols" value="1" valuetype="data " />
<param name="showstatu sbar" 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.../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.

[Tony]

Re: Creating a Playlist For Windows Media Player With JavaScript

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.currentP layList.appendI tem(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(movie Index)
{
var movieToPlay = Player.currentP layList.item(mo vieIndex);
Player.URL = movieToPlay.sou rceURL;
//Tried the line below instead of the one above and it throws a pretty
weird error.
//Player.controls .playItem(movie ToPlay);
}

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.

[Randy Webb]

Re: Creating a Playlist For Windows Media Player With JavaScript

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

Tony wrote:

>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:

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?

--
Randy
Chance Favors The Prepared Mind
comp.lang.javas cript FAQ - http://jibbering.com/faq
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Tony]

Re: Creating a Playlist For Windows Media Player With JavaScript

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

[cwdjrxyz]

Re: Creating a Playlist For Windows Media Player With JavaScript


Randy Webb wrote:

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

Tony wrote:

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:

>
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.

[cwdjrxyz]

Re: Creating a Playlist For Windows Media Player With JavaScript


Tony wrote:

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.currentP layList.appendI tem(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(movie Index)
{
var movieToPlay = Player.currentP layList.item(mo vieIndex);
Player.URL = movieToPlay.sou rceURL;
//Tried the line below instead of the one above and it throws a pretty
weird error.
//Player.controls .playItem(movie ToPlay);
}
>
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...canWMVtest.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.

[Tony]

Re: Creating a Playlist For Windows Media Player With JavaScript

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: t3projects@gmai l.com

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 .requestMediaAc cessRights('ful l');

// 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.currentP layList.appendI tem(mediaItem);
}

// To play the movie in the play list we create a function to load the
movie
function LoadMovie(movie Index)
{
var movieToPlay = Player.currentP layList.item(mo vieIndex);

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

// Just for kicks we can add a timer that will show the seconds pasted
in the movie
timer =
window.setInter val("document.g etElementById(' currentPosition ').innerHTML
= Player.controls .currentPositio nString",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="LoadM ovie(1); return false;">Load Second
Movie</a>


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

[cwdjrxyz]

Re: Creating a Playlist For Windows Media Player With JavaScript


Tony wrote:

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: t3projects@gmai l.com
>
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 .requestMediaAc cessRights('ful l');
>
// 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.currentP layList.appendI tem(mediaItem);
}
>
// To play the movie in the play list we create a function to load the
movie
function LoadMovie(movie Index)
{
var movieToPlay = Player.currentP layList.item(mo vieIndex);
>
// Check to tried to reload this movie
if(movieToPlay. sourceURL != currentMovie)
{
currentMovie = movieToPlay.sou rceURL;
Player.controls .playItem(movie ToPlay);
}
else
{// We are playing the current movie
// If the player was paused we play it
if (3 != Player.playStat e)
{
Player.controls .play();
}
}
>
// Just for kicks we can add a timer that will show the seconds pasted
in the movie
timer =
window.setInter val("document.g etElementById(' currentPosition ').innerHTML
= Player.controls .currentPositio nString",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.

<!-- 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="LoadM ovie(1); return false;">Load Second
Movie</a>
>
>
This allows you to continously play the play list items from anywhere
in the list.

[Tony]

Re: Creating a Playlist For Windows Media Player With JavaScript

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.

[cwdjrxyz]

Re: Creating a Playlist For Windows Media Player With JavaScript


Tony wrote:

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.microso ft.com/activex/controls/mplayer/en/nsmp2inf.cab#Ve rsion=6,4,7,111 2"
standby="Loadin g Microsoft Windows Media Player components..."
type="applicati on/x-oleobject">
<PARAM NAME="FileName" VALUE="Station1 .asx">
<PARAM NAME="ShowContr ols" VALUE="1">
<PARAM NAME="ShowDispl ay" VALUE="1">
<PARAM NAME="ShowStatu sBar" VALUE="1">
<PARAM NAME="AutoSize" VALUE="1">
<Embed type="applicati on/x-mplayer2"
pluginspage="ht tp://www.microsoft.c om/windows/windowsmedia/download/AllDownloads.as px/"
filename="Stati on1.asx"
src="Station1.a sx"
Name=MediaPlaye r
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.

[VK]

Re: Creating a Playlist For Windows Media Player With JavaScript


cwdjrxyz wrote:

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.c om/group/comp.lang.javas cript/msg/896a73f47ae1ed8 9>

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

[Tony]

Re: Creating a Playlist For Windows Media Player With JavaScript

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.wm v" />
</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

[Tony]

Re: Creating a Playlist For Windows Media Player With JavaScript

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.