Incorporamento di Windows Media Player per tutti i browser
Domanda
Stiamo usando WMV video su un sito interno e li stiamo incorporando nei siti web.Funziona abbastanza bene su Internet Explorer, ma non su Firefox.Ho trovato il modo di farlo funzionare in Firefox, ma poi smette di funzionare in Internet Explorer.
Per ora non vogliamo utilizzare Silverlight, soprattutto perché non possiamo essere sicuri che tutti i client utilizzino Windows XP con Windows Media Player installato.
Esiste una sorta di codice universale che incorpora WMP sia in Internet Explorer che in Firefox oppure dobbiamo implementare qualche rilevamento dell'agente utente e fornire HTML diverso per browser diversi?
Soluzione
Quanto segue funziona per me in Firefox e 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>
Altri suggerimenti
Posso suggerire il Plug-in multimediale jQuery?Fornisce codice di incorporamento per tutti i tipi di video, non solo WMV ed esegue il rilevamento del browser, mantenendo tutte quelle complicate istruzioni switch/case fuori dai tuoi modelli.
Utilizza il seguente.Funziona con Firefox e 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" />
E in 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 ha un articolo interessante su questo problema: Ciao ciao incorpora.Vale la pena leggere come ha affrontato questo problema e come ha gestito i contenuti QuickTime.
È possibile utilizzare i commenti condizionali per fare in modo che IE e Firefox facciano cose diverse
<![if !IE]>
<p> Firefox only code</p>
<![endif]>
<!--[if IE]>
<p>Internet Explorer only code</p>
<![endif]-->
I browser stessi ignoreranno il codice che non è destinato a leggere.
Il modo migliore per distribuire video sul Web è utilizzare Flash: è molto più semplice incorporarlo in modo pulito in una pagina Web e verrà riprodotto più o meno su qualsiasi combinazione di browser e piattaforma.L'unico motivo per utilizzare Windows Media Player è se stai trasmettendo contenuti in streaming e hai bisogno di una gestione dei diritti digitali straordinariamente forte, e anche in questo caso i provider stanno iniziando a utilizzare Flash anche per questi.Vedi iPlayer della BBC per un esempio superbo.
Suggerirei di passare a Flash anche per uso interno.Non sai mai chi avrà bisogno di accedervi in futuro e questo ti darà la migliore compatibilità futura possibile.
EDIT - 20 marzo 2013.Interessante come queste vecchie domande riemergano di tanto in tanto!Quanto è diverso il mondo oggi e quanto tutto questo sembra datato.Oggi non consiglierei in alcun modo un percorso solo Flash: la migliore pratica al giorno d'oggi sarebbe probabilmente quella di utilizzare HTML 5 per incorporare video codificati H264, con un fallback Flash come descritto qui: http://diveintohtml5.info/video.html
Codificare video flash è in realtà molto semplice con ffmpeg.Puoi utilizzare un comando per convertire praticamente da qualsiasi formato video, ffmpeg è abbastanza intelligente da capire il resto e utilizzerà tutti i processori della tua macchina.Invocarlo è facile:
ffmpeg -i input.avi output.flv
ffmpeg indovinerà il bitrate che desideri, ma se desideri specificarne uno, puoi utilizzare l'opzione -b, quindi -b 500000
è 500kbps per esempio.Naturalmente ci sono un sacco di opzioni, ma generalmente ottengo buoni risultati senza troppi armeggi.Questo è un buon punto di partenza se stai cercando più opzioni: opzioni video.
Non hai bisogno di un server web speciale per mostrare video flash.Ho fatto tutto bene semplicemente spingendo i file .flv su un server web standard e collegandoli con un buon lettore swf, come flowplayer.
I WMV vanno bene se puoi essere certo che tutti i tuoi utenti utilizzeranno sempre [una versione recente e aggiornata di] Windows, ma anche in questo caso Flash è spesso più adatto per il Web.Il lettore è anche estremamente personalizzabile e può essere controllato con Javascript.
Ho trovato un buon articolo su utilizzando WMP con Firefox su MSDN.
Basandomi sull'articolo di MSDN e dopo aver eseguito alcune prove ed errori, ho scoperto che l'utilizzo di JavaScript è migliore rispetto all'utilizzo di commenti condizionali o tag "EMBED/OBJECT" nidificati.
Ho creato una funzione JS che genera oggetti WMP in base a determinati argomenti:
<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>
Quindi ho utilizzato quella funzione scrivendo alcuni markup e JS in linea come questi:
<div id='wmpHolder'></div>
<script type="text/javascript">
window.addEventListener('load', generateWindowsMediaPlayer('wmpHolder', 240, 320, 'http://mysite.com/path/video.ext'));
</script>
Puoi usare jQuery.pronto invece di evento di caricamento della finestra per rendere i codici più compatibili con le versioni precedenti e cross-browser.
Ho testato i codici su IE 9-10, Chrome 27, Firefox 21, Opera 12 e Safari 5, su Windows 7/8.
Ho trovato qualcosa che funziona effettivamente sia in FireFox che in IE, sul sito di Elizabeth Castro (grazie al collegamento su questo sito) - Ho provato tutte le altre versioni qui, ma non sono riuscito a farle funzionare in entrambi i browser
<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>
Controlla il suo sito: http://www.alistapart.com/articles/byebyeembed/ e la versione con il classid nel tag oggetto iniziale