Incorporando o Windows Media Player para todos os navegadores
https://stackoverflow.com/questions/164
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Nós estamos usando WMV vídeos em um site interno e estamos incorporando-os em sites.Isso funciona muito bem no Internet Explorer, mas não no Firefox.Encontrei maneiras de fazê-lo funcionar no Firefox, mas ele para de funcionar no Internet Explorer.
Ainda não queremos usar o Silverlight, especialmente porque não podemos ter certeza de que todos os clientes executarão o Windows XP com o Windows Media Player instalado.
Existe algum tipo de código universal que incorpora o WMP no Internet Explorer e no Firefox, ou precisamos implementar alguma detecção de agente de usuário e fornecer HTML diferente para navegadores diferentes?
Solução
O seguinte funciona para mim no Firefox e no 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>
Outras dicas
Posso sugerir o Plug-in de mídia jQuery?Fornece código incorporado para todos os tipos de vídeo, não apenas WMV e faz detecção de navegador, mantendo todas aquelas instruções switch/case confusas fora de seus modelos.
Use o seguinte.Funciona no Firefox e no 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 em 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 tem um artigo interessante sobre este problema: Tchau, tchau, incorporação.Vale a pena ler sobre como ela atacou esse problema, bem como como lidar com o conteúdo do QuickTime.
Você poderia usar comentários condicionais para fazer com que o IE e o Firefox fizessem coisas diferentes
<![if !IE]>
<p> Firefox only code</p>
<![endif]>
<!--[if IE]>
<p>Internet Explorer only code</p>
<![endif]-->
Os próprios navegadores ignorarão o código que não deve ser lido.
A melhor maneira de implantar vídeo na web é usando Flash - é muito mais fácil de incorporar de forma limpa em uma página da web e pode ser reproduzido em mais ou menos qualquer combinação de navegador e plataforma.A única razão para usar o Windows Media Player é se você estiver transmitindo conteúdo e precisar de um gerenciamento de direitos digitais extraordinariamente forte, e mesmo assim os provedores estão começando a usar o Flash mesmo para estes.Veja o iPlayer da BBC para um excelente exemplo.
Eu sugiro que você mude para o Flash mesmo para uso interno.Você nunca sabe quem precisará acessá-lo no futuro, e isso lhe dará a melhor compatibilidade futura possível.
EDITAR - 20 de março de 2013.Interessante como essas velhas questões ressurgem de vez em quando!Quão diferente é o mundo hoje e como tudo isso parece antiquado.Eu não recomendaria uma rota somente Flash hoje de forma alguma - a melhor prática hoje em dia provavelmente seria usar HTML 5 para incorporar vídeo codificado H264, com um substituto de Flash conforme descrito aqui: http://diveintohtml5.info/video.html
Codificar vídeo em flash é realmente muito fácil com o ffmpeg.Você pode usar um comando para converter praticamente qualquer formato de vídeo, o ffmpeg é inteligente o suficiente para descobrir o resto e usará todos os processadores da sua máquina.Invocá-lo é fácil:
ffmpeg -i input.avi output.flv
O ffmpeg adivinhará a taxa de bits desejada, mas se desejar especificar uma, você pode usar a opção -b, então -b 500000 é 500kbps, por exemplo.Há muitas opções, é claro, mas geralmente consigo bons resultados sem muitos ajustes.Este é um bom lugar para começar se você estiver procurando por mais opções: opções de vídeo.
Você não precisa de um servidor web especial para exibir vídeos em flash.Eu me saí bem simplesmente enviando arquivos .flv para um servidor web padrão e vinculando-os a um bom reprodutor swf, como jogador de fluxo.
WMVs são adequados se você tiver certeza de que todos os seus usuários sempre usarão [uma versão recente e atualizada do] Windows apenas, mas mesmo assim, o Flash costuma ser mais adequado para a web.O player é extremamente personalizável e pode ser controlado com javascript.
Encontrei um bom artigo sobre usando o WMP com Firefox no MSDN.
Com base no artigo do MSDN e depois de fazer algumas tentativas e erros, descobri que usar JavaScript é melhor do que usar comentários condicionais ou tags "EMBED/OBJECT" aninhadas.
Criei uma função JS que gera objetos WMP com base em determinados argumentos:
<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>
Então usei essa função escrevendo algumas marcações e JS embutido como estes:
<div id='wmpHolder'></div>
<script type="text/javascript">
window.addEventListener('load', generateWindowsMediaPlayer('wmpHolder', 240, 320, 'http://mysite.com/path/video.ext'));
</script>
Você pode usar jQuery.ready em vez de evento de carregamento de janela para tornar os códigos mais compatíveis com versões anteriores e entre navegadores.
Testei os códigos no IE 9-10, Chrome 27, Firefox 21, Opera 12 e Safari 5, no Windows 7/8.
Encontrei algo que realmente funciona tanto no FireFox quanto no IE, no site da Elizabeth Castro (graças ao link deste site) - tentei todas as outras versões aqui, mas não consegui fazê-las funcionar nos dois navegadores
<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>
Confira o site dela: http://www.alistapart.com/articles/byebyeembed/ e a versão com o classid na tag do objeto inicial
