FAQ: Page d'aide Windows Media

News 2009: Microsoft pousse sa nouvelle technologie Silverlight: The Official Microsoft Silverlight Site
Avant, Windows media ne faisait que de la vidéo, maintenant Silverlight fait vidéo et interactivité, comme son concurrent direct Flash.

Silverlight supporte les fichiers wmv9 de windows media (container asf .wmv) mais supporte aussi le codec H264 et AAC (container .mp4) comme Quicktime et flash;
pour créer une page web utilisant la technologie Silverlight (plus complexe mais plus puissante), vous pouvez utiliser Dragdrop 3.4 qui encode dans ce format automatiquement.

vous pouvez néanmoins toujours utiliser la seule technologie windows media, cette page y est dédiée:


Voici une page pour vous aider dans l'utilisation de la technologie Windows Media:

Pages d'aide microsoft: Windows Media Help & Support
et
MSDN Library Archive


Détection du plugin Windows Media pour Internet Explorer et Mozilla:

Code:

 <script language="JavaScript">

    var browser;
    var real = false;

    if (document.all) {

        browser = "Microsoft Internet Explorer";

    }
    else if (document.layers) {

        browser = "Netscape Communicator";

    }
    else if (document.getElementById) {

        browser = "Netscape 6 or newer";

    }
    else {

        browser = "Other than Netscape or IE.";

    }

    var wminst = false;

    var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false; // true if we're on ie
    var isWin = (navigator.appVersion.indexOf("Windows") != -1) ? true : false; // true if we're on windows
    if(isIE && isWin){ // don't write vbscript tags on anything but ie win

        document.write('<SCR' + 'IPT LANGUAGE=VBScript\> \n');
        document.write('on error resume next \n');
        document.write('wminst =
        IsObject(CreateObject("MediaPlayer.MediaPlayer.1"))');
        document.write('</SCR' + 'IPT\> \n'); // break up end tag so it doesn't end our script

    }

    if (browser=="Netscape Communicator" || browser=="Netscape 6 or newer") {

        numPlugins = navigator.plugins.length;
        for (i = 0; i < numPlugins; i++) {

            plugin = navigator.plugins[i];
            if (plugin.name.indexOf("Windows Media Services")!=-1) {

                wminst=true;

            }

        }

    }

    document.write("<center>Browser: <b>"+browser+"</b><br><br>");
    document.write("Operating system: <b>"+navigator.platform+"</b><br><br>");
    document.write("Windows Media Player installed: <b>"+wminst+"</b></center>");

</script>

//detect player version on IE
<OBJECT classid=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95

    codeBase=#Version=6,4,5,715 height=1 id=WMP64 width=1></OBJECT>

<OBJECT classid=CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6

    codeBase=#Version=7,0,0,1954 height=1 id=WMP7 width=1></OBJECT>

<SCRIPT language=VBScript>

    <!--
    On error resume next
    WB_DWM52 = (IsObject(CreateObject("MediaPlayer.MediaPlayer.1") ) )
    WB_DWM64 = (WMP64.FileName="")
    WB_DWM79 = WMP7.versionInfo
    //-->

</SCRIPT>
<SCRIPT language=JavaScript>

    var WB_WM="undefined";
    if (document.all) {

        if( WB_DWM79 ) {WB_WM=WB_DWM79.slice(0,3);}
        else if( WB_DWM64 ) {WB_WM="6.4";}
        else if( WB_DWM52 ) {WB_WM="5.2";}
        else {WB_WM="undefined";}
        document.write('<hr width="90%"> Installed Windows Media Player Version: ' + WB_WM + '');

    }

</SCRIPT>

Créer une playlist (un fichier texte renommé en .asx) qui va lire des médias les uns après les autres:

Code:

<ASX version = "3.0">
   <TITLE>Simple ASX Demo</TITLE>
      <ENTRY>
         <TITLE>Xbox Fable Video</TITLE>
         <AUTHOR>Microsoft Corporation</AUTHOR>
         <Copyright >(c)2007 Microsoft Corporation</COPYRIGHT>
         <REF HREF = "xbox.wmv" />
      </ENTRY>
      <ENTRY>
         <TITLE>Vista Butterfly Video</TITLE>
         <AUTHOR>Microsoft Corporation</AUTHOR>
         <COPYRIGHT>(c)2007 Microsoft Corporation</COPYRIGHT>
         <REF HREF = "butterfly.wmv" />
     </ENTRY>
</ASX>

Contrôle du lecteur dans une page (des boutons images qui lancent une fonction javascript qui pilote l'objet vidéo):

Code:

 <table align="center" width="100%" cellpadding="4" border="0">
<tr>
<td>
<form action="" name="formular1"><font size="-1">
clip title:
<input type="text" name="clipTitel" size="30" readonly> <br>
author:
<input type="text" name="clipAuthor" size="30" readonly><br>
copyright:
<input type="text" name="clipCopyright" size="30" readonly>
</font></form>
</td>
<td width="280" align="center">

<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,5,715"
    standby="Loading Microsoft Windows Media Player components..."
    type="application/x-oleobject">
    <PARAM NAME="AutoStart" VALUE="True">
    <PARAM NAME="FileName" VALUE="mms://www.streaming-media.info/media/wm_demo.wmv">
    <PARAM NAME="ShowControls" VALUE="False">
    <PARAM NAME="ShowStatusBar" VALUE="False">
    <EMBED type="application/x-mplayer2"

        pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
        SRC="mms://www.streaming-media.info/media/wm_demo.wmv"
        name="MediaPlayer"
        width=320
        height=240
        autostart=1
        showcontrols=0>

    </EMBED>

</OBJECT>

<br>
<a href="#" onclick="document.MediaPlayer.Play()">Play</a>
<a href="#" onclick="document.MediaPlayer.Pause()">Pause</a>
<a href="#" onclick="document.MediaPlayer.Stop()">Stop</a><br>
<br></td>
<td>
<form action="" name="formular2"><font size="-1">
position:<br>
<input type="text" name="clipPosition" size="10" readonly> <br>
clip length:<br>
<input type="text" name="clipLength" size="10" readonly><br>
percent played:<br>
<input type="text" name="percPos" size="3" readonly><br>
play status:<br>
<input type="text" name="playerStatus" size="3" readonly>
</font></form>
</td></tr>
</table>

<script language="JavaScript">

    function startCheckPlayer() {

        window.setTimeout("checkPlayer()",1000);
        window.setInterval("checkPlayerStatus()",1000);

    }
    function checkPlayerStatus() {

        document.formular2.clipPosition.value = parseInt(document.MediaPlayer.currentPosition);
        document.formular2.playerStatus.value = document.MediaPlayer.PlayState;
        document.formular2.percPos.value = parseInt(document.MediaPlayer.currentPosition / document.MediaPlayer.duration*100);

    }
    function checkPlayer () {

        document.formular1.clipTitel.value = document.MediaPlayer.GetMediaInfoString(8);
        document.formular1.clipAuthor.value = document.MediaPlayer.GetMediaInfoString(9);
        document.formular1.clipCopyright.value = document.MediaPlayer.GetMediaInfoString(10);
        document.formular2.clipLength.value = parseInt(document.MediaPlayer.duration);

    }

</script>
<script language="JavaScript">
window.setTimeout("startCheckPlayer()",2500);
</script>

Pour créer des chapitres, et ensuite "sauter" de chapitre en chapitre:
- charger dans "windows media file Editor" ou "ASF indexer" (pack du codeur windows media gratuit)
- ajouter des markers et leur donner un nom ou un numéro
- utiliser une commande javascript dans la page hml pour sauter d'un chapitre à l'autre:
(code en 3 parties: l'objet vidéo, les boutons, le script javascript qui saute au chapitre)

Code:

<OBJECT ID="MediaPlayer1" width=160 height=182 
	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="http://webserver/path/your-file.asx">
  <PARAM NAME="ShowStatusBar" VALUE="True">
  <EMBED type="application/x-mplayer2" 
	pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/"
	SRC="http://webserver/path/your-file.asx"
	name="MediaPlayer1"
	width=160
	height=182
	ShowStatusBar=true>
  </EMBED>
</OBJECT>

<FORM Name="markerForm">
	<INPUT TYPE="button" VALUE="1" onClick="seekToMarker(1)">
	<INPUT TYPE="button" VALUE="2" onClick="seekToMarker(2)">
	<INPUT TYPE="button" VALUE="3" onClick="seekToMarker(3)">
	<INPUT TYPE="button" VALUE="4" onClick="seekToMarker(4)">
</FORM>

<SCRIPT LANGUAGE="JavaScript">
// This function receives an integer from the buttons above and resets the current 
//	position of the file to that marker.
function seekToMarker(iWhichMarker){
    if ((navigator.userAgent.indexOf("IE") > -1) && (navigator.platform == "Win32")) {
	// This is an error handler.  If the user tries to scan to a marker which doesn't
	//     exist, the player will pop an error message.  By using this code, we
	//     can create a custom error message.
	if (iWhichMarker <= document.MediaPlayer1.MarkerCount) {
		// This resets the current marker in the file.
		document.MediaPlayer1.CurrentMarker = iWhichMarker;
	} else {  
		alert("This Marker doesn't exist.");
	}
    } else {
	if (iWhichMarker <= document.MediaPlayer1.GetMarkerCount()) {
		document.MediaPlayer1.SetCurrentMarker(iWhichMarker);
	} else {
		alert("This Marker doesn't exist.");
	}

    }
}
</SCRIPT>

voici dans l'exemple suivant un fichier html complet mettant en oeuvre l'appel par javascript de fichier vidéo à charger dans le lecteur (pour proposer par exemple plusieurs vidéos en lecture sans changer de page et de lecteur vidéo:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<meta name="generator" content="Adobe GoLive">
		<title>Untitled Page</title>
	</head>

	<body bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">

		<table border="0" cellspacing="0" cellpadding="0" align="right" bgcolor="white" height="360">
			<tr height="2">
				<td width="4" height="2"></td>
				<td width="330" height="2"></td>
				<td width="10" height="2"></td>
			</tr>
			<tr height="305">
				<td bgcolor="white" width="4" height="305"></td>
				<td align="center" valign="middle" bgcolor="#F8F8F8" width="330" height="305">

				
				<object id="MediaPlayer1" width=320 height=305 classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" codebase="http://activex.microsoft.com/activex/controls/mplayer/%20en/nsmp2inf.cab#Version=6,4,5,715" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">
						<param name="enabled" value="true">
						<param name="volume" value="25">
						<param name="stretchToFit" value="true">
												<param name="AutoStart" value="true">
												<param name="url" value="http://www.teleriviera.com/autopress/center.asx">
												<param name="ShowControls" value="0">
												<param name="ShowStatusBar" value="False">
												<param name="uiMode" value="full">

												<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" url="http://www.teleriviera.com/autopress/center.asx" name="MediaPlayer1" width=320 height=305 autostart=1 showcontrols=0 stretchToTit="true" volume="25" enabled="true" uiMode="full" ShowStatusBar="false"> 
											</object>
				</td>
				<td bgcolor="white" width="10" height="305"></td>
			</tr>
			<tr height="32">
				<td width="4" height="32"></td>
				<td width="330" height="32">
					<div align="left">

						<table width="100%" border="0" cellspacing="2" cellpadding="0" align="center" height="24">
							<tr align="right" height="24">
								<td height="24">
									<div align="left">
										<a href="javascript:startvideo()"><img src="play_video.jpg" alt="" height="24" width="100" border="0"></a></div>
								</td>
								<td height="24">
									<div align="center">
										<a href="#" onclick="document.MediaPlayer1.controls.play()"><img src="play_r.gif" alt="" height="24" width="24" border="0"></a> <a href="#" onclick="document.MediaPlayer1.controls.pause()"><img src="pause_r.gif" alt="" height="24" width="24" border="0"></a></div>

								</td>
								<td height="24">
									<div align="right">
										<a href="#" onclick="parent.parent.bottom.MediaPlayer2.controls.pause()"><img src="stop_slides.jpg" alt="" height="24" width="100" border="0"></a></div>
								</td>
							</tr>
						</table>
					</div>
				</td>

				<td width="10" height="32"></td>
			</tr>
			<tr>
				<td width="4"></td>
				<td width="330">
					<div align="center">
						<img src="bull6.jpg" alt="" height="15" width="15" border="0"><img src="300k.jpg" alt="" height="21" width="125" border="0"><img src="sperateur-1.gif" alt="" height="20" width="73" border="0"><img src="56k.jpg" alt="" height="20" width="98" border="0"></div>
				</td>
				<td width="10"></td>

			</tr>
		</table>
		<p></p>
<script>
<!--
function startvideo ()
{
MediaPlayer1.URL ="video.asx";
MediaPlayer1.controls.pause();
}
//-->
</script>		
		
		
	</body>

</html>

Si vous désirez ajouter des sous-titres à vos films, vous pouvez utiliser un fichier SAMI (.smi à ne pas confondre avec le format smil .smi) qui porte le même nom que votre fichier média wmv, et qui va s'incruster à la demande à l'intérieur du player Windows Media:

Code:

<SAMI>
<HEAD>
<STYLE TYPE="text/css">
<!--
P {
font-size: 1em;
font-family: Arial;
font-weight: normal;
color: #FFFFFF;
background: #000000;
text-align: center;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 2px;
}
.ENUSCC { Name: English; lang: EN-US-CC; }
-->
</STYLE>
</HEAD>
<BODY>
<SYNC Start="0">
<P Class="ENUSCC">Premier sous-titre</P>
</SYNC>
<SYNC Start="1000">
<P Class="ENUSCC">Dernier sous-titre</P>
</SYNC>
<SYNC Start="2000">
<P Class="ENUSCC">&nbsp;</P>
</SYNC>
<SYNC Start="3000">
<P Class="ENUSCC">Un espace permet de terminer le sous-titre précédent</P>
</SYNC>
</BODY>
</SAMI>
 

A suivre...