Intégration de Windows Media Player pour tous les navigateurs
https://stackoverflow.com/questions/164
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Nous utilisons WMV vidéos sur un site interne et nous les intégrons dans des sites Web.Cela fonctionne plutôt bien sur Internet Explorer, mais pas sur Firefox.J'ai trouvé des moyens de le faire fonctionner dans Firefox, mais il cesse de fonctionner dans Internet Explorer.
Nous ne souhaitons pas utiliser Silverlight pour l'instant, d'autant plus que nous ne pouvons pas être sûrs que tous les clients exécuteront Windows XP avec Windows Media Player installé.
Existe-t-il une sorte de code universel qui intègre WMP à la fois dans Internet Explorer et Firefox, ou devons-nous implémenter une détection d'agent utilisateur et fournir un code HTML différent pour différents navigateurs ?
La solution
Ce qui suit fonctionne pour moi dans Firefox et Internet Explorer :
<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>
Autres conseils
Puis-je suggérer le Plugin multimédia jQuery?Fournit du code intégré pour tous les types de vidéos, pas seulement WMV et effectue la détection du navigateur, en gardant toutes ces instructions switch/case désordonnées hors de vos modèles.
Utilisez le suivant.Cela fonctionne dans Firefox et Internet Explorer.
<object id="MediaPlayer1" width="690" height="500" 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='<%= GetSource() %>' />
<param name="AutoStart" value="True" />
<param name="DefaultFrame" value="mainFrame" />
<param name="ShowStatusBar" value="0" />
<param name="ShowPositionControls" value="0" />
<param name="showcontrols" value="0" />
<param name="ShowAudioControls" value="0" />
<param name="ShowTracker" value="0" />
<param name="EnablePositionControls" value="0" />
<!-- 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" />
Et en JavaScript,
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)
}
}
Elizabeth Castro a un article intéressant sur ce problème : Au revoir Intégrer.Cela vaut la peine de lire comment elle a attaqué ce problème, ainsi que la gestion du contenu QuickTime.
Vous pouvez utiliser des commentaires conditionnels pour amener IE et Firefox à faire des choses différentes
<![if !IE]>
<p> Firefox only code</p>
<![endif]>
<!--[if IE]>
<p>Internet Explorer only code</p>
<![endif]-->
Les navigateurs eux-mêmes ignoreront le code qu’ils ne sont pas censés lire.
La meilleure façon de déployer une vidéo sur le Web consiste à utiliser Flash : il est beaucoup plus facile de l'intégrer proprement dans une page Web et peut être lu sur plus ou moins n'importe quelle combinaison de navigateur et de plate-forme.La seule raison d'utiliser Windows Media Player est si vous diffusez du contenu et que vous avez besoin d'une gestion des droits numériques extraordinairement solide, et même dans ce cas, les fournisseurs commencent maintenant à utiliser Flash, même pour ceux-ci.Voir iPlayer de la BBC pour un superbe exemple.
Je vous suggère de passer à Flash même pour un usage interne.Vous ne savez jamais qui aura besoin d’y accéder à l’avenir, et cela vous offrira la meilleure compatibilité future possible.
EDIT - 20 mars 2013.Intéressant de voir comment ces vieilles questions refont surface de temps en temps !À quel point le monde est différent aujourd’hui et à quel point tout cela semble daté.Je ne recommanderais en aucun cas une solution Flash uniquement aujourd'hui - la meilleure pratique de nos jours serait probablement d'utiliser HTML 5 pour intégrer une vidéo codée en H264, avec une solution de secours Flash comme décrit ici : http://diveintohtml5.info/video.html
L'encodage d'une vidéo flash est en fait très simple avec ffmpeg.Vous pouvez utiliser une seule commande pour convertir à partir de n'importe quel format vidéo, ffmpeg est suffisamment intelligent pour comprendre le reste et utilisera tous les processeurs de votre machine.L'invoquer est simple :
ffmpeg -i input.avi output.flv
ffmpeg devinera le débit binaire souhaité, mais si vous souhaitez en spécifier un, vous pouvez utiliser l'option -b, donc -b 500000 est de 500 kbps par exemple.Il existe bien sûr une tonne d'options, mais j'obtiens généralement de bons résultats sans trop de bricolage.C'est un bon point de départ si vous recherchez plus d'options : options vidéo.
Vous n'avez pas besoin d'un serveur Web spécial pour afficher une vidéo flash.J'ai très bien réussi en transférant simplement les fichiers .flv vers un serveur Web standard et en les reliant à l'aide d'un bon lecteur swf, comme joueur de flux.
Les WMV conviennent si vous pouvez être sûr que tous vos utilisateurs utiliseront toujours [une version récente et à jour de] Windows uniquement, mais même dans ce cas, Flash est souvent mieux adapté au Web.Le lecteur est même extrêmement skinnable et peut être contrôlé avec javascript.
J'ai trouvé un bon article sur utiliser le WMP avec Firefox sur MSDN.
Sur la base de l'article de MSDN et après avoir effectué quelques essais et erreurs, j'ai trouvé qu'il était préférable d'utiliser JavaScript plutôt que d'utiliser des commentaires conditionnels ou des balises "EMBED/OBJECT" imbriquées.
J'ai créé une fonction JS qui génère un objet WMP en fonction d'arguments donnés :
<script type="text/javascript">
function generateWindowsMediaPlayer(
holderId, // String
height, // Number
width, // Number
videoUrl // String
// you can declare more arguments for more flexibility
) {
var holder = document.getElementById(holderId);
var player = '<object ';
player += 'height="' + height.toString() + '" ';
player += 'width="' + width.toString() + '" ';
videoUrl = encodeURI(videoUrl); // Encode for special characters
if (navigator.userAgent.indexOf("MSIE") < 0) {
// Chrome, Firefox, Opera, Safari
//player += 'type="application/x-ms-wmp" '; //Old Edition
player += 'type="video/x-ms-wmp" '; //New Edition, suggested by MNRSullivan (Read Comments)
player += 'data="' + videoUrl + '" >';
}
else {
// Internet Explorer
player += 'classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" >';
player += '<param name="url" value="' + videoUrl + '" />';
}
player += '<param name="autoStart" value="false" />';
player += '<param name="playCount" value="1" />';
player += '</object>';
holder.innerHTML = player;
}
</script>
Ensuite, j'ai utilisé cette fonction en écrivant des balises et du JS en ligne comme ceux-ci :
<div id='wmpHolder'></div>
<script type="text/javascript">
window.addEventListener('load', generateWindowsMediaPlayer('wmpHolder', 240, 320, 'http://mysite.com/path/video.ext'));
</script>
Vous pouvez utiliser jQuery.prêt au lieu de événement de chargement de fenêtre pour rendre les codes plus rétrocompatibles et multi-navigateurs.
J'ai testé les codes sur IE 9-10, Chrome 27, Firefox 21, Opera 12 et Safari 5, sous Windows 7/8.
J'ai trouvé quelque chose qui fonctionne réellement à la fois dans FireFox et IE, sur le site d'Elizabeth Castro (grâce au lien sur ce site) - J'ai essayé toutes les autres versions ici, mais je n'ai pas pu les faire fonctionner dans les deux navigateurs.
<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>
Consultez son site : http://www.alistapart.com/articles/byebyeembed/ et la version avec le classid dans la balise d'objet initiale
