网页内嵌多媒体播放器小结

内嵌 Windows Media
对于 Windows 用户，需要安裝 Windows Media Player 7 以上的版本，Windows Media Player 6 不支持 WMV/WMA，推荐安装 Windows Media Player 10。对于非 Internet Explorer 用户，还需要安装Windows Media Player Plug-in for Netscape Navigator。
对于 Mac OS X 用户，需要 Windows Media Player 9 for Mac OS X，对于 Mac OS 8.1-9x，需要安装Windows Media Player 7.1 for for Mac OS 8.1-9x。
对于 Linux 以及 FreeBSD、Solaris 等 Unix 系统用户，需要 VLC media player及其浏览器插件或者 MPlayer 及其浏览器插件。VLC media player 0.80 及其以上的版本支持 WMV/WMA。

代码一
<object width="420" height="360" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="filename" value="http://vod.ujn.edu.cn/movies%2Fasf%2F%B6%AC%CC%EC%C1%B5" />
<embed width="420" height="360" type="application/x-mplayer2" src="http://vod.ujn.edu.cn/movies%2Fasf%2F%B6%AC%CC%EC%C1%B5%B8"></embed>
</object>
代码二
<object width="420" height="360" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="http://vod.ujn.edu.cn/movies%2Fasf%2F%B6%AC%CC%EC%C1%B5%B" />
<embed width="420" height="360" type="application/x-mplayer2" src="http://vod.ujn.edu.cn/movies%2Fasf%2F%B6%AC%CC%EC%C1%B5%B8%E"></embed>
</object>

分析
这两段代码的区别主要是针对 Internet Explorer 的。这两段代码使用了两个不同的 Media Player 对象，第一个是 MediaPlayer.MediaPlayer，第二个是 WMPlayer.OCX。这两个 ActiveX 对象都是针对 Internet Explorer 的，因此它们不影响 Firefox、Opera 等浏览器。这两个对象在 Internet Explorer 上的显示效果是不一样的，第一个对象的显示效果跟在 Windows 上的 Firefox、Opera 内的显示效果是一样的，而第二个对象在 Internet Explorer 上的显示效果是采用 Windows Media Player 本身的皮肤效果，如果安装了 Windows Media Player 10，采用第二种写法，在 Internet Explorer 上将会看到 Windows Media Player 10 那种晶莹剔透的皮肤效果。
Firefox 不支持 object 中 classid 属性，只支持 type 属性，而如果发现 object 有 classid 属性以后，它将不理会 object，而只执行 embed。而对于 Opera ，它既支持 object，又支持 embed，但是因为 embed 是嵌入到 object 中的，如果它能正确识别 object，它就不再理会 embed，如果它不能识别 object，则执行 embed。因此它不会显示两个播放器。而 Internet Explorer 则只识别 object 中的 classid 属性。因此在 object 中，我们不需要指定 type 属性。
对于 embed 标签，我们指定它的 type 为 application/x-mplayer2，在安装了 Windows Media Player 的系统上，它对应于所有 Windows Media Player 能识别的类型，因此你可以任意指定 asf，asx，wmv，wma，avi，mp3 等类型的媒体，而在没有 Windows Media Player，却安装了 VLC media player（或 MPlayer）的系统上，它对应于所有 VLC media player（或 MPlayer）能识别的类型，Windows Media Player 支持的媒体类型 VLC media player（或 MPlayer）均能支持，甚至 VLC media player（或 MPlayer）支持的媒体类型比 Windows Media Player 更多，因此上面这种写法是完全支持多平台多浏览器的。
对于上面两个不同的 ojbect，指定播放文件的参数是不一样，第一个是用 filename 来指定，第二个是用 url 来指定。而 embed 中指定播放文件的参数是 src，虽然用 filename 也可以，但是 src 更标准一些。
embed 中的文件名必须是完整的 url 路径，否则 VLC media player 不能正确识别，另外要对文件路径进行 url 编码，否则如果文件路径中如果有中文或者其他非英文文字的话，在非 Internet Explorer 浏览器中也无法正确识别。不要对 “协议://域名/” 部分进行 url 编码，否则所有的浏览器都不能识别。

对文件路径进行 url 编码，在 php 中可以使用 rawurlencode 函数，在 asp 中可以使用 Server.URLencode 函数。

内嵌 RealPlayer (RealMedia)

代码一
<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="420" height="310">
    <param name="src" value="link.php?link=rtsp%3A%2F%2Fvod%2Eujn%2Eedu%2Ecn%2F%D0%C2%D4%FA%CA%A6%C3%C3%2F1%2Erm" />
    <param name="controls" value="Imagewindow" />
    <param name="console" value="clip1" />
    <param name="autostart" value="true" />
    <embed src="link.php?link=rtsp%3A%2F%2Fvod%2Eujn%2Eedu%2Ecn%2F%D0%C2%D4%FA%CA%A6%C3%C3%2F1%2Erm" type="audio/x-pn-realaudio-plugin" autostart="true" console="clip1" controls="Imagewindow" width="420" height="310">
    </embed>
</object>
代码二
<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="420" height="44">
    <param name="src" value="link.php?link=rtsp%3A%2F%2Fvod%2Eujn%2Eedu%2Ecn%2F%D0%C2%D4%FA%CA%A6%C3%C3%2F1%2Erm" />
    <param name="controls" value="ControlPanel" />
    <param name="console" value="clip1" />
    <param name="autostart" value="true" />
    <embed src="link.php?link=rtsp%3A%2F%2Fvod%2Eujn%2Eedu%2Ecn%2F%D0%C2%D4%FA%CA%A6%C3%C3%2F1%2Erm" type="audio/x-pn-realaudio-plugin" autostart="true" console="clip1" controls="ControlPanel" width="420" height="44">
    </embed>
</object>

分析
embed 的 src 属性里指定的路径不需要是完整的 url，相对路径就可以了，而且也不一定是 rpm 后缀的文件，因此上面的代码中，src 中指定的是一个程序 link.php，而这个程序的结果就是一个 rpm 格式的文件，因此它能够被正确的播放。这个 link 程序很简单，它只是把传入的参数 link 以文件内容的形式返回就行了。
虽然 embed 的 src 属性不需要完整的 url，但是 link.php 的参数 link 是需要实际媒体的完整 url 的，并且参数 link 要以 url 编码形式进行编码，否则 RealPlayer 插件不能够识别带有非英文的路径。但是返回的 rpm 文件内容中的 url 无需编码了，RealPlayer 能够识别 rpm 文件内容中的非英文编码的路径，如果你实在不放心，也可以对它进行 url 编码，但是仍然不要对 “协议://域名/” 部分进行 url 编码，否则 RealPlayer 插件就不能识别了。
PHP 程序中的 $_GET 中的变量，如果 php 配置文件中 magic_quotes_gpc 设为 true 的话（默认配置），它会对某些特殊字符加上反斜杠，这样做是为了避免数据库注入漏洞，但这里我们不写数据库，因此这里我们需要根据 magic_quotes_gpc 的状态来判断是否去掉多出来的反斜杠。否则输出的文件内容可能是错误的。
link.php
<?php
echo (get_magic_quotes_gpc() ? stripslashes($_GET['link']) : $_GET['link']);
?>
如果是ASP的话，则用以下代码
link.asp
<%=Request("link")%>

内嵌 Quicktime

内嵌 Flash

让内嵌多媒体通过 XHTML 验证

embed 标签从来都不是 HTML 标准中的标签，因此 XHTML 中也没有它。W3C 推荐使用的是 object 标签，但用法却不是 Internet Explorer 那种用 classid 来区分控件类型，而是采用 type 来指定 MIME 类型。现在的 Mozilla、Firefox 和 Opera 都支持这种用法，虽然 IE 目前的版本也支持这种用法，不过很可惜的是，IE 还是有 bug，那就是只有全部下载完毕才能播放。而且还不是所有的情况下都能用。在某些 IE 浏览器上还显示空白。所以单纯用 W3C 推荐的 object 标签用法还是不够的。但是可以作一下变通，如果是用户浏览器是 IE 的话，我们就用 IE 的 object 的用法，如果是其他浏览器，就采用 W3C 的用法。这样就可以两全其美了。例子如下：
<style type="text/css">
.mozilla {
display:block;
}
</style>


<object
data="flashdatei.swf"
type="application/x-shockwave-flash"
height="275"
width="256"
class="mozilla">
<param name="autoplay" value="true">
</object>

其实就是把 embed 替换成了 object，而且位置也从 IE 的 object 中移出来了。embed 标签里的 src 属性在 object 中变成了 data 属性。而 firefox 等非 IE 浏览器因为不认识 <!–[if IE]> 标签，所以其中的部分都当作注释忽略了。而 IE 因为执行了 <!–[if IE]> 中的内容，所以 firefox 中可以识别的那个 object 因为 css 被重新定义而被隐藏了。

posted @ 2011-03-25 12:45 潜水鱼阅读(894) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

holy shit

潜水鱼

网页内嵌多媒体播放器小结

holy shit on foot