为所有浏览器embeddedWindows Media Player
我们在内部网站上使用WMVvideo,并将其embedded到网站中。 这在Internet Explorer上运行得很好,但在Firefox上却不行。 我已经find了使它在Firefox中工作的方法,但是随后在Internet Explorer中停止工作。
我们不想使用Silverlight,特别是因为我们不能确定所有客户端都将运行安装了Windows Media Player的Windows XP。
是否有某种将WMPembeddedInternet Explorer和Firefox的通用代码,还是需要实现一些用户代理检测,并为不同的浏览器提供不同的HTML?
以下在Firefox和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>
我可以build议jQuery媒体插件 ? 为各种video提供embedded代码,而不仅仅是WMV,并进行浏览器检测,将模糊的开关/案例陈述保留在模板之外。
使用以下内容。 它适用于Firefox和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" />
而在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) } }
伊丽莎白·卡斯特罗有一个有趣的文章关于这个问题: 再见了embedded 。 值得一读她如何攻击这个问题,以及处理QuickTime的内容。
在networking上部署video的最好方法是使用Flash – 将其干净地embedded到网页中会更容易,并且可以在或多或less的浏览器和平台上进行组合。 使用Windows Media Player的唯一理由是,如果您要传输内容,而且需要非常强大的数字版权pipe理,即使这样,即使提供商也开始使用Flash。 看BBC的iPlayer就是一个很好的例子。
我build议你切换到Flash甚至内部使用。 你永远不知道谁将来需要访问它,这将给你最好的未来兼容性。
编辑 – 2013年3月20日。有趣的是,这些旧的问题不时重演! 这个世界今天有多么不同,以及如何看待这一切。 今天我不会推荐一个仅限于Flash的路由 – 现在最好的做法可能是使用HTML 5来embeddedH264编码的video,这里描述的是Flash fallback: http : //diveintohtml5.info/video.html
您可以使用条件注释让IE和Firefox做不同的事情
<![if !IE]> <p> Firefox only code</p> <![endif]> <!--[if IE]> <p>Internet Explorer only code</p> <![endif]-->
浏览器本身会忽略不适合他们阅读的代码。
使用ffmpeg编码flashvideo实际上非常简单。 您可以使用一个命令来转换几乎所有的video格式,ffmpeg足够聪明,可以将剩余的video转换出来,并且可以使用机器上的每个处理器。 调用它很容易:
ffmpeg -i input.avi output.flv
ffmpeg会猜测你想要的比特率,但是如果你想指定一个,你可以使用-b选项,例如-b 500000
就是500kbps。 当然有很多的select,但是我通常没有太多修补就能得到好的结果。 如果你正在寻找更多的select,这是一个很好的开始: video选项 。
您不需要特殊的Web服务器来显示Flashvideo。 我只是简单地将.flv文件推到一个标准的Web服务器上,然后用一个好的swf播放器(如stream水游戏)将它们链接到它们上。
如果你可以确定所有的用户总是使用[最新版本的] Windows,WMV就没有问题,但即使如此,Flash通常更适合于networking。 玩家是非常skinnable,可以用JavaScript来控制。
我发现一篇关于在MSDN上使用Firefox的WMP的好文章。
根据MSDN的文章,在做了一些试验和错误之后,我发现使用JavaScript比使用条件注释或嵌套的“EMBED / OBJECT”标签更好。
我做了一个JS函数,根据给定的参数生成WMP对象:
<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>
然后我通过编写一些标记和内联JS来使用这个函数:
<div id='wmpHolder'></div> <script type="text/javascript"> window.addEventListener('load', generateWindowsMediaPlayer('wmpHolder', 240, 320, 'http://mysite.com/path/video.ext')); </script>
您可以使用jQuery.ready而不是窗口加载事件来使代码更向后兼容和跨浏览器。
我在Windows 7/8上通过IE 9-10,Chrome 27,Firefox 21,Opera 12和Safari 5testing了这些代码。
我发现了一些在Firefox和IE上都有效的东西,在伊丽莎白·卡斯特罗的网站上(感谢这个网站上的链接) – 我已经在这里尝试了所有其他的版本,但是不能让它们在浏览器
<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>
检查她的网站: http : //www.alistapart.com/articles/byebyeembed/和在初始对象标签中的classid的版本