`

网页内嵌播放器

阅读更多

原址:http://caoxiaoyong.spaces.live.com/blog/cns!9B30896AB1EAD025!178.entry
如果你不总是用 Windows 上的 Internet Explorer 来上网的话,你可能会注意到,许多网站上的视频点播之类的多媒体内容,你无法直接在 Internet Explorer 以外的其它浏览器中观看,比如明明已经安装了插件却提示缺少插件,或者什么都不提示出现空的框框,或者显示了播放器插件却始终连不上打不开之类的问题,而 在 Internet Explorer 上却能够正确的打开并播放。显然这不是由于网络不通或者媒体不存在造成的,而是由于网页内的代码有问题。你可能觉得这无关紧要,因为你已经习惯用 Internet Explorer 来浏览它们了;也可能你曾为此而头疼,如果你是一个 Linux 用户。可是不管怎么样,如果能在所有操作系统平台的所有浏览器上都能正常播放这些多媒体内容,总是一件好的事情。本文就是来解决这些问题的。

本文将介绍如何在网页中內嵌 Windows Media、RealPlayer、Quicktime 和 Flash 的完美方法。这些方法适用于 Windows、Linux、Mac OS X 等操作系统平台上的 Internet Explorer、Mozilla、Firefox、NetScape、Opera 等多种浏览器。

完美内嵌 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,并且安装了 VLC for Mozilla/Firefox 的插件。VLC media player 0.80 及其以上的版本支持 WMV/WMA。

实现代码:

  1. <object width="420" height="360" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
  2.     <param name="filename" value="http://vod.ujn.edu.cn/movies%2Fasf%2F%B6%AC%CC%EC%C1%B5%B8%E8%2Easf" />
  3.     <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%E8%2Easf"></embed>
  4. </object>

也可以用下面这段代码:

  1. <object width="420" height="360" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
  2.     <param name="url" value="http://vod.ujn.edu.cn/movies%2Fasf%2F%B6%AC%CC%EC%C1%B5%B8%E8%2Easf" />
  3.     <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%E8%2Easf"></embed>
  4. </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。因此它不会显示两个播放器。至少我是用的 8.5 版的 Opera 是这样的。而 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 的系统上,它对应于所有 VLC media player 能识别的类型,Windows Media Player 支持的媒体类型 VLC media player 均能支持,甚至 VLC media player 支持的媒体类型比 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)

客户端要求:

对于 Windows,Linux 和 Mac OS X,可以安装 Realplayer 播放器及其浏览器插件,也可以安装带有 RealPlayer 解码器及其浏览器插件的其他播放器,例如 Windows 上可以安装暴风影音

实现代码:

  1. <object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="420" height="310">
  2.     <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" />
  3.     <param name="controls" value="Imagewindow" />
  4.     <param name="console" value="clip1" />
  5.     <param name="autostart" value="true" />
  6.     <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">
  7.     </embed>
  8. </object>
  9. <br />
  10. <object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="420" height="44">
  11.     <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" />
  12.     <param name="controls" value="ControlPanel" />
  13.     <param name="console" value="clip1" />
  14.     <param name="autostart" value="true" />
  15.     <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">
  16.     </embed>
  17. </object>

link.php

  1. <?php
  2.   echo (get_magic_quotes_gpc() ? stripslashes($_GET['link']) : $_GET['link']);
  3. ?>

要点分析:

上面的代码实现了的效果是在任何安装了 realplayer 插件的浏览器上,都可以看到一个播放窗口和一个播放控制栏,并且媒体被自动加载播放。对于 object 一段,这里就不做详细解释了,因为它是针对 Internet Explorer 的,相信大部分写过这种代码的人都能看得懂。我们重点来说一下 embed 一段,它是针对 Firefox 和 Opera 等浏览器的。

大部分人在使用 Firefox 和 Opera 时经常会遇到一个问题,就是安装了 RealPlayer 及其浏览器插件以后,仍然不能观看嵌入到网页中的 rm 或 rmvb 流媒体,提示找不到插件,或者显示空白,或者显示了内嵌的播放器却不能播放,这是什么原因造成的呢?

如果你在 Firefox 和 Opera 的地址栏中键入:about:plugins ,可以看到你所安装的所有插件。不管你的系统里是否安装的是真的 RealPlayer 播放器,只要你看到下面的内容,

Windows

RealPlayer(tm) G2 LiveConnect-Enabled Plug-In (32-bit)
文件名: nppl3260.dll
RealPlayer(tm) LiveConnect-Enabled Plug-In
MIME 类型 描述 后缀 已启用
audio/x-pn-realaudio-plugin RealPlayer(tm) as Plug-in rpm

Linux

Helix DNA Plugin: RealPlayer G2 Plug-In Compatible
文件名: nphelix.so
Helix DNA Plugin: RealPlayer G2 Plug-In Compatible version 0.4.0.552 built
with gcc 3.2.0 on May 13 2005
MIME 类型 描述 后缀 已启用
audio/x-pn-realaudio-plugin RealPlayer Plugin Metafile rpm

就说明你已经安装好了 RealPlayer 的插件。不能够播放的原因就是他没有像我上面那样写代码。

从上面的插件信息里我们可以看到,RealPlayer 插件只提供了一种 rpm 格式的媒体类型可以播放,而其他诸如 rm,rmvb 等类型却好像没有提供支持。是这样吗?可以说是也可以说不是。

比如你如果在 embed 里指定 type 为 audio/x-pn-realaudio 类型,这个是正确的 mime 类型,但是你会发现你的浏览器将不能播放,而会让你安装插件,即使你已经安装了 RealPlayer 插件。因为 RealPlayer 插件不能识别这种正确的 mime 类型。

于是有的人认为只要指定 type 为 audio/x-pn-realaudio-plugin,然后后面直接指定 rm 或者 rmvb 等 RealPlayer 媒体类型的文件就可以了。是这样吗?也不是。这样做的话,你可以看到内嵌的播放器,但是你会发现播放器始终无法连接到服务器并播放你所指定的媒体。因为你 所指定的类型并不是 audio/x-pn-realaudio-plugin 所对应的类型。

于是有人说 RealNetworks 已经将非 IE 的浏览器给放弃了,其实这样说是不对的。虽然存在上面的种种情况,但那是因为那些编写网页代码的人没有理解 RealNetworks 的真正意图, RealNetworks 不但没有放弃在非 IE 浏览器中嵌入 RealMedia,反而是提供了一种通用的方式,让你可以所有浏览器中都能内嵌播放所有的 RealMedia。因为我的代码就能够如我所说的这样工作。

首先我们必须要先知道一件事情,那就是 rpm 是一种什么文件。从上面 Linux 上的插件的信息中我们可以得知,它是 RealPlayer 插件元文件(RealPlayer Plugin Metafile)。因此它不是媒体内容文件,更不是红帽的安装包文件。它里面的内容是实际媒体的位置信息(url)。这样我们就很容易理解 RealNetworks 为什么要这样做了,因为这样只要指定一种 type,就能够播放所有的 Real 媒体了。这不是很方便吗?

在这里需要注意的一点是,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 的状态来判断是否去掉多出来的反斜杠。否则输出的文件内容可能是错误的。

如果用 ASP,则不需这么麻烦,只需要一行代码就搞定了:

  1. <%=Request("link")%>

完美内嵌 Quicktime

客户端要求:

对于 Windows 用户和 Mac OS X 用户,安装相应版本的 QuickTime 播放器即可。Windows 版下载 QuickTimeinstaller.exe,Mac OS X 版下载 QuickTimeinstaller.exe

Windows 用户也可以安装暴风影音等带有 QuickTime 解码器和浏览器插件的其他播放器,例如暴风影音。

对于 Linux 以及 FreeBSD、Solaris 等 Unix 系统用户,需要 VLC media player,并且安装 VLC for Mozilla/Firefox 的插件。

实现代码:

  1. <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="420" height="360">
  2.     <param name="autoplay" value="true" />
  3.     <param name="src" value="mov%2F%B2%E2%CA%D4%2Emov" />
  4.     <embed src="mov%2F%B2%E2%CA%D4%2Emov" type="video/quicktime" autoplay="true" width="420" height="360">
  5.     </embed>
  6. </object>

要点分析:

QuickTime 格式的内嵌比较简单,像上面那样写就可以了,基本上没有什么要注意的地方。媒体路径 src 的值,可以是完整地址,也可以是相对地址,可以用 url 编码,也可以不编码,QuickTime 插件和 VLC 插件都能正确的支持,当然为了保险起见,最好还是采用 url 编码方式里写媒体路径。

虽然 embed 中指定的是 video/quicktime 类型,但是即使链接的媒体是 mp3 仍然能播放。对于 QuickTime 支持的其他类型的没有进行测试,但我想应该也是可以的。

完美内嵌 Flash

客户端要求:

安装你所使用的浏览器的 Flash 插件。

实现代码:

  1. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="420" height="320">
  2.     <param name="movie" value="flash/打电话记.swf" />
  3.     <param name="quality" value="high" />
  4.     <embed src="flash/打电话记.swf" quality="high" type="application/x-shockwave-flash" width="420" height="320"></embed>
  5. </object>

要点分析:

对于 Flash 似乎没什么好说的,因为这个用的很普遍。在这里写下来只是为了查阅方便,算是凑数吧。呵呵。

分享到:
评论

相关推荐

    vs网页内嵌播放器测试

    在IT行业中,网页内嵌播放器是Web开发中不可或缺的一部分,它允许用户在不离开当前网页的情况下观看视频或音频内容。本项目名为“vs网页内嵌播放器测试”,显然是一个基于C#语言,并使用Visual Studio(VS)进行开发...

    web网页内嵌播放器flowplayer3.2.15

    在网页内嵌播放器领域,Flowplayer 提供了丰富的自定义选项,允许开发者通过JavaScript API或者CSS来调整播放器的外观和功能。例如,你可以控制播放/暂停、进度条、音量、全屏模式等。此外,Flowplayer 还支持视频...

    浏览器网页内嵌Qt-C++播放器(可执行程序下载),支持软硬解码,支持音频,支持录像截图,支持多路播放等功能

    浏览器网页内嵌Qt-C++播放器(可执行程序下载),支持软硬解码,支持音频,支持录像截图,支持多路播放等功能。 下载后将网页index.html添加到浏览器显示,然后打开bin下的.exe可执行问题文件。

    浏览器网页内嵌Qt-C++播放器(源码工程下载),支持软硬解码,支持音频播放与音量调节、支持录像截图、支持多路播放、全屏操作等

    浏览器网页内嵌Qt-C++播放器(源码工程下载),支持软硬解码,支持音频播放与音量调节、支持录像截图、支持多路播放、全屏操作等。下载后将Web下的index.html添加到浏览器中显示,然后在qt下运行工程MediaPlayer即可...

    rtmp流网页播放器

    rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流...

    万能网页视频播放器源码

    【万能网页视频播放器源码】是一种网页端的视频播放解决方案,它允许用户通过输入视频流地址直接在网页上播放各种格式的视频,如FLV、MP4和SWF等。这种播放器的实现主要依赖于HTML、JavaScript以及可能的Flash技术。...

    闪雷影视管理平台2016.3.20.1200绿色版

    采用网页内嵌播放器的播放模式,支持目前网络上大多数主流媒体格式,轻松实现内网或外网在线点播。 闪雷影视管理平台的功能特色: 1.全自动下载更新电影,资源非常丰富 2.全自动电影分类存储,结构清晰,支持自定义...

    全功能多种网页播放器大集合

    网页播放器通常基于JavaScript、HTML5以及CSS3等技术,其中HTML5的`&lt;audio&gt;`和`&lt;video&gt;`标签为网页内嵌音频和视频提供了原生支持。但为了实现更丰富的交互功能,如播放/暂停控制、进度条、音量调节等,开发者通常会...

    web网页视频播放器.7z

    "web网页视频播放器.7z" 是一个包含网页内嵌视频播放代码的压缩包,它提供了在网页上展示视频的功能。下面将详细介绍这个主题,包括网页视频播放器的基本概念、工作原理以及常见的实现方式。 一、网页视频播放器的...

    jquery网页mp3播放器

    **jQuery网页MP3播放器**是一种在网页上实现音频播放功能的工具,它利用了流行的JavaScript库jQuery和其专用插件jPlayer。jPlayer是一款强大的、可定制的多媒体播放器,能够支持多种音频和视频格式,包括MP3,提供...

    网页视频播放器详解

    ### 网页视频播放器详解 在网页开发过程中,集成视频播放功能是十分常见的需求之一。本篇文章将深入解析两种常用的网页视频播放器代码,分别适用于不同的视频格式。通过这些示例,我们可以更好地理解如何在网页上...

    jQuery网页视频播放器源码

    首先,我们需要了解HTML5中的`&lt;video&gt;`元素,这是HTML5引入的新特性,用于在网页上内嵌视频。`jQuery_mediacode`源码可能就是基于这个元素构建的。基本的`&lt;video&gt;`元素结构如下: ```html Your browser does ...

    网页播放器(编写网页用)

    1. **HTML5 Media Elements**: HTML5引入了`&lt;audio&gt;`和`&lt;video&gt;`元素,使得网页可以直接内嵌音频和视频,不再依赖Flash等插件。开发者可以设置src属性来指定媒体文件的URL,同时可以添加控件属性(controls)以显示...

    网页音乐播放器

    1. **HTML5 Audio API**: HTML5引入了Audio元素,使得在网页中内嵌音频内容变得简单。Audio API提供了对音频播放、暂停、音量控制、缓冲等操作的接口,开发者可以通过JavaScript来控制音频的播放行为。 2. **...

    网页嵌套js播放器 谢谢详细信息详细信息

    网页嵌套JS播放器是一种常见的技术,用于在网站上实现视频播放功能。这种技术的核心是JavaScript,一种广泛使用的客户端脚本语言,它允许我们在浏览器端动态处理内容,包括播放视频。下面将详细介绍这一主题,以及...

    网页视频播放器代码大全汇总、常用网页播放器代码.docx

    网页视频播放器是互联网上广泛使用的技术,用于在网页中嵌入视频内容,提供用户在线观看体验。常见的网页播放器包括WMP(Windows Media Player)、RealOne Player以及Macromedia Flash Player等。这些播放器的核心...

    dewplayer网页音乐播放器

    Dewplayer是一款轻量级且易于使用的网页内嵌音乐播放器,它能够实现网页打开即自动播放音乐,使得用户在浏览网站的同时享受背景音乐,尤其适合个人博客、企业官网等场景。在本文中,我们将详细探讨Dewplayer的特性和...

    网页播放器代码全集

    网页播放器是网页中用于展示音频或视频内容的组件,它们通常通过内嵌代码实现,以便用户无需离开页面即可播放媒体文件。在本篇中,我们将深入探讨两种常见的网页播放器格式:.avi 和 .mpg,以及它们的内嵌代码参数。...

    flv网页播放器

    3. **HTML5 `&lt;video&gt;` 标签**:HTML5的`&lt;video&gt;`标签为网页内嵌视频提供了原生支持,它可以处理多种视频格式,包括FLV。通过设置不同的source源,可以确保浏览器选择最合适的格式进行播放。 4. **视频编码**:FLV...

    一个非常经典+漂亮+实用的嵌入网页播放器

    "一个非常经典+漂亮+实用的嵌入网页播放器"很可能指的是基于Flash技术的Dewplayer,它是一款广泛应用于网站的轻量级音乐或视频播放器。Dewplayer以其简洁的界面、易于集成和定制性而受到开发者和设计师的喜爱。 ...

Global site tag (gtag.js) - Google Analytics