为所有浏览器嵌入Windows Media Player
我们在内部站点上使用WMV视频,并将其嵌入到网站中。这在Internet Explorer上效果很好,但在Firefox上效果不好。我已经找到了使其在Firefox中运行的方法,但是随后它在Internet Explorer中停止了工作。
我们暂时不希望使用Silverlight,尤其是因为我们不能确定所有客户端都将在安装Windows Media Player的情况下运行Windows XP。
是否存在将WMP嵌入到Internet Explorer和Firefox中的某种通用代码,还是我们需要实现一些用户代理检测并为不同的浏览器提供不同的HTML?
解决方案:
我们可以使用条件注释来使IE和Firefox做不同的事情
<![if !IE]> <p> Firefox only code</p> <![endif]> <!--[if IE]> <p>Internet Explorer only code</p> <![endif]-->
浏览器本身将忽略并非旨在阅读的代码。
在Web上部署视频的最佳方法是使用Flash,将其清晰地嵌入到网页中几乎可以轻松得多,并且可以或者多或者少地在任何浏览器和平台组合上播放。使用Windows Media Player的唯一原因是,如果我们正在流式传输内容,并且需要非常强大的数字版权管理,那么即使现在提供商也开始为此使用Flash。有关出色的示例,请参阅BBC的iPlayer。
我建议我们即使内部使用也要切换到Flash。我们永远都不知道将来会有谁需要访问它,这将为我们提供最佳的将来兼容性。
编辑2013年3月20日。
这些老问题不时浮出水面,很有趣!今天的世界有多么不同,这一切看起来如何过时。我不建议今天采用任何一种仅采用Flash的路由,这几天的最佳实践可能不是使用HTML 5嵌入H264编码的视频,而是使用Flash后备,如此处所述:http://diveintohtml5.info/video.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>
使用ffmpeg编码Flash视频实际上非常容易。我们可以使用一个命令来转换几乎任何视频格式,ffmpeg足够聪明,可以找出其余的视频格式,并且它将使用计算机上的每个处理器。调用很容易:
ffmpeg -i input.avi output.flv
ffmpeg会猜测我们想要的比特率,但是如果我们想指定一个比特率,则可以使用-b选项,例如,-b 500000是500kbps。当然有很多选择,但是我通常不会花很多时间就能得到很好的结果。如果我们正在寻找更多选择:视频选项,那么这是一个不错的起点。
我们不需要特殊的Web服务器即可显示Flash视频。通过将.flv文件推送到标准Web服务器,并使用优质的swf播放器(例如flowplayer)链接到这些文件,我做得很好。
如果我们可以确定所有用户始终仅使用Windows的[最新,最新版本],则WMV很好,但是即使那样,Flash仍然通常更适合于Web。该播放器甚至是非常可换肤的,并且可以使用javascript进行控制。
我可以建议使用jQuery Media Plugin吗?提供不仅适用于WMV的各种视频的嵌入代码,还可以进行浏览器检测,从而将所有凌乱的switch / case语句保留在模板之外。
伊丽莎白·卡斯特罗(Elizabeth Castro)对此问题发表了一篇有趣的文章:Bye Bye Embed。值得一读的是她如何解决此问题以及如何处理QuickTime内容。
使用以下内容。它可以在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) } }
我在Elizabeth Castro的网站上找到了实际上在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的版本