wmv files linked to embedded wmv player

TheApprentice

09-02-2010, 08:39 PM

I have been searching for an answer to this pretty much all day... I'm fed up. Can someone help?

I want to be able to open wmv videos in an embedded windows movie player using javascript. Something identical to what you will find here: http://www.hunlock.com/blogs/Everything_You_Ever_Needed_To_Know_About_Video_Embedding#quickIDX2...go down to the heading :'How to make a video select list'.

I am trying to emulate this but for wmv files and windows media player rather than for flsh files. I have tested this on one link and it does not open. i just get a black media screen and nothing.

Here's my code:

Here's the script within the head tag:

<script type="text/javascript">function playVideo(sourceId, targetId) { if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);} if (typeof(targetId)=='string')
{targetId=document.getElementById(targetId);} targetId.innerHTML=sourceId.innerHTML; return false;}</script>

Here`s the link:

<a href="#" onclick='return playVideo("selectdemo1","videoPlayback")'>
video 1</a>

and here's the embedding and the play back code (The play back area is within the same page as the link):

div id="selectdemo1">
<OBJECT id='mediaPlayer' width="450" height="445"
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'>
<param name='fileName' value="\\HOC\AdminPrivate\FS08U\TurgeL\Documents\Site Web\videos\Add_Documents.wmv">
<param name='animationatStart' value='true'>
<param name='transparentatStart' value='true'>
<param name='autoStart' value="false">
<param name='showControls' value="true">
<param name='loop' value="false">
<EMBED type='application/x-mplayer2'
pluginspage='http://microsoft.com/windows/mediaplayer/en/download/'
id='mediaPlayer' name='mediaPlayer' displaysize='4' autosize='-1'
bgcolor='darkblue' showcontrols="true" showtracker='-1'
showdisplay='0' showstatusbar='-1' videoborder3d='-1' width="450" height="445"
src="http://servername/\\\\HOC\\AdminPrivate\\FS08U\\TurgeL\\Documents\\Site Web\\videos\\Add_Documents.wmv&autoplay=1" autostart="false" designtimesp='5311' loop="false">
</EMBED>
</OBJECT>

</div>
</div>

Please help meeeeeeeeeeeeeeeeeeee!:eek:

TheApprentice

09-02-2010, 08:42 PM

Sorry, I wanted to clarify that the 'selectdemo1' div is wrapped into a 'videoPlayback' div...<div id="videoPlayback">. I forgot to include it in my code up there.

Sciliano

09-02-2010, 08:47 PM

Apprentice:

Use this for .wma, .wmv, .mp3, .wax and .wvx.

Cross browser. Change the width and height, to suit.

You must specify the complete path, when testing.

<!DOCTYPE HTML>
<html>
<head>
<title>Cross Browser Media Player with Select List and .wax Playlist</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

// Local folder was used for testing
// Change to the media files path on your site, or local machine;
var mediaPath = "c:/Documents and Settings/ABC.SELF-C18DAAD6BD/Desktop/My Site/media/";

/* ********* Do not edit below this line ************* */

var mediaFileName = "";
var playerEmbedStr = '\<embed type="application\/x-mplayer2" width="325" height="52" showstatusbar="1" enablecontextmenu="false" src="mediaFileName"\>\<\/embed>';

function swapMedia(nSong,nContainer){

var activePlayerStr = playerEmbedStr.replace("mediaFileName", mediaPath + nSong);
nContainer.innerHTML = activePlayerStr;
self.focus();
}

function init(){

document.forms[0]['songList'].onchange = function()
{
if (this.value != "")
{
swapMedia(this.value,document.getElementById('playerContainer'));
}
}
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
<style type="text/css">

body {background-color: #fffacd; margin-top: 60px;}
form {width: 350px; margin-left: auto; margin-right: auto; margin-top: 25px;}
select {width: 325px;}
#playerContainer {width: 350px; margin-left: auto; margin-right: auto;}

</style>
</head>
<body>
<div id="playerContainer">
<embed type="application/x-mplayer2" width="325" height="45">
</embed>
</div>

<form action="">

<select name="songList">
<option value=""> Choose a Song </option>
<option value="play_list_1.wax"> Play All </option>
<option value="song1.mp3"> Don Henley - Heart of the Matter </option>
<option value="song2.mp3"> Jackson Browne - The Pretender </option>
<option value="song3.mp3"> Lucinda Williams - World Without Tears </option>
</select>

</form>
</body>
</html>

This is the playlist, .wax file:

<asx version = "3.0">
<entry>
<ref href = "c:/Documents and Settings/MJH.SELF-C18DAAD6BD/Desktop/My Site/media/song1.mp3"/>
</entry>
<Entry>
<ref href = "c:/Documents and Settings/MJH.SELF-C18DAAD6BD/Desktop/My Site/media/song2.mp3"/>
</entry>
<entry>
<ref href = "c:/Documents and Settings/MJH.SELF-C18DAAD6BD/Desktop/My Site/media/song3.mp3"/>
</entry>
</asx>

The playlist file must be in the same folder as the media files.

TheApprentice

09-07-2010, 02:26 PM

Sciliano,

Thanks for caring. I appplied your instructions with care but it's not happening. Here's my code if you can help further. Ignore the videoIndex div:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="file://HOC/AdminPrivate/FS08U/TurgeL/Documents/Site%20Web/CSS/contentLayOut.css" />
<link rel="stylesheet" type="text/css" href="file://HOC/AdminPrivate/FS08U/TurgeL/Documents/Site%20Web/CSS/contentStyles.css" />
<link rel="stylesheet" type="text/css" href="../../../../CSS/indexLayOut.css" />
<script type="text/javascript">

// Local folder was used for testing
// Change to the media files path on your site, or local machine;
var mediaPath = "\\HOC\AdminPrivate\FS08U\TurgeL\Documents\Site Web\videos\Add_Documents.wmv";

/* ********* Do not edit below this line ************* */

var mediaFileName = "";
var playerEmbedStr = '\<embed type="application\/x-mplayer2" width="325" height="340" showstatusbar="1" enablecontextmenu="false" src="mediaFileName"\>\<\/embed>';

function swapMedia(nSong,nContainer){

var activePlayerStr = playerEmbedStr.replace("mediaFileName", mediaPath + nSong);
nContainer.innerHTML = activePlayerStr;
self.focus();
}

function init(){

document.forms[0]['songList'].onchange = function()
{
if (this.value != "")
{
swapMedia(this.value,document.getElementById('playerContainer'));
}
}
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script></head>

<body>

<div id="videoIndex" style="margin: 0; width: 775px">
<table style="background-image: url('../images/titlebg_olive.gif'); width: 770px; border-style: none">
<tr>
<td colspan="3" class="style1">Legalims -- Vidéos</td>
</tr>
<tr>
<td class="style2">
<p class="style3"><strong>
<a href="#" onclick='return playVideo("selectdemo1","videoPlayback")'>
Créer un modèle de document</a></strong></p>
</td>
<td class="style2">
<p class="style3"><strong>Document</strong></p>
</td>
<td class="style2">
<p class="style3"><strong>Modification d'un avis juridique<br />
(historique)</strong></p>
</td>
</tr>
<tr>
<td class="style2">
<p class="style3"><strong>Créer un avis juridique</strong></p>
</td>
<td class="style2">
<p class="style3"><strong>Recherche de documents (contenu)</strong></p>
</td>
<td class="style2">
<p class="style3"><strong>Modification d'une action</strong></p>
</td>
</tr>
<tr>
<td class="style2">
<p class="style3"><strong>Affichages personnalisées</strong></p>
</td>
<td class="style2">
<p class="style3"><strong>Créer les taux horaires de<br />
la prochaine année du Barreau</strong></p>
</td>
<td class="style2">
<p class="style3"><strong>Transfert d'une requête</strong></p>
</td>
</tr>
<tr>
<td class="style2">
<p class="style3"><strong>Supprimer et restaurer<br />
un avis juridique</strong></p>
</td>
<td class="style2">
<p class="style3"><strong>Liste principale</strong></p>
</td>
<td class="style2">
<p class="style3"><strong>Affichage des rapports</strong></p>
</td>
</tr>
</table>
</div>
<div id="videoPlayback">
<div id="playerContainer">
<embed type="application/x-mplayer2" width="325" height="340">
</embed>
</div>

<form action="">

<select name="songList">
<option value=""> Choose a Song </option>
<option value="playlist.wax"> Play All </option>
<option value="Add_Documents.wmv"> Video 1 </option>
<option value="Add_Documents.wmv"> Video 2</option>
<option value="Add_Documents.wmv"> Video 3 </option>
</select>

</form>
</div>

</body>

</html>

Here's the playlist.wax file code which I took care to save in the same folder as the videos:

<asx version = "3.0">
<entry>
<ref href = "\\HOC\AdminPrivate\FS08U\TurgeL\Documents\Site Web\videos\Add_Documents.wmv"/>
</entry>
<Entry>
<ref href = "\\HOC\AdminPrivate\FS08U\TurgeL\Documents\Site Web\videos\Add_Documents.wmv"/>
</entry>
<entry>
<ref href = "\\HOC\AdminPrivate\FS08U\TurgeL\Documents\Site Web\videos\Add_Documents.wmv"/>
</entry>
</asx>

TheApprentice

09-09-2010, 04:53 PM

Let's start that from scratch I guess...

As I mentionned earlier, I have been searching for a way to open wmv videos in an embedded windows movie player using javascript.

I found some code on another site and tried to apply but it is still not working. Can someone help? Can someonte tell me and show me where I am wrong with my code, what I am missin?

Cheers

Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">

// Here you should add the first video URL.
function PlayVideo1 ()
{
MediaPlayer.URL = "file:\\HOC\AdminPrivate\FS08U\TurgeL\Documents\Site Web\videos\Add_Documents.wmv";
}

// Here you should add the second video URL.
function PlayVideo2 ()
{
MediaPlayer.URL = "file:\\HOC\AdminPrivate\FS08U\TurgeL\Documents\Site Web\videos\reports.wmv";
}

</SCRIPT>

</head>

<body>

<div id="videoIndex" style="margin: 0; width: 775px">
<table style="background-image: url('../images/titlebg_olive.gif'); width: 770px; border-style: none">
<tr>
<td colspan="3" class="style1">Legalims -- Vidéos</td>
</tr>
<tr>
<td class="style2">
<p class="style3"><strong>
<a href ="onclick = PlayVideo1()">Créer un modèle de document</a></strong></p>
</td>
<td class="style2">
<p class="style3"><strong><a href="onclick= PlayVideo2()" >Créer un modèle de documentDocument</a></strong></p>
</td>

..............

</table>
</div>
<div id="videoPlayback">
<div id="playerContainer">

<object id="MediaPlayer" classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components..."width="300" height="350" type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112" style="width: 475px; height: 436px">
<param name="src" value="file:\\HOC\AdminPrivate\FS08U\TurgeL\Documents\Site Web\videos\Add_Documents.wmv">
<param name="autoplay" value="false">
<param name="controller" value="true">
<param name="bgcolor" value="#FFFFFF">
<embed src="file:\\HOC\AdminPrivate\FS08U\TurgeL\Documents\Site Web\videos\Add_Documents.wmv" autostart="false" loop="false" width="300" height="42"
controller="true" bgcolor="#FFFFFF"></embed>
</object>

</div>

</div>

</body>

</html>

TheApprentice

09-09-2010, 05:33 PM