Skip to content


AnyPlayer - 为WordPress嵌入各种类型播放器

9,169 浏览

==============原创作品,转载请注明出处 ==============

本从没打算过要为Wordpress插件,一是基本各类型的插件都能下载得到,二我也懒得去研究。但对于我这样无聊的人没有什么绝对,在几般无奈之下,还愣让我整了个东西出来,正应了那句话——人都是逼出来的!

  • 原因是这样子的:

前阵子转了几个视频和Flash游戏到Blog上,分别来自不同的网站,播放器也五花八门。但每一个都在页面上占很大的地方不太雅观,而且那个Bloxorz游戏在页面打开时就会自动播放,发出诡异的响声,很是不爽,想弄成像U148那样的可以展开与折叠的效果。在网上找了不少这方面的插件,效果都达不到我的希望,但也收获了一个Audio player插件,嵌入音频很方便。后来我还是用了土办法,研究了一下U148的实现方式,让页面加载一个js文件,然后在文章中嵌入这样的代码:

播放视频/音频

后来又发现文章一旦编辑后,在IE中会报脚本错误,原来是Wordpress会在编辑文章的时候自作聪明地把<div></div>标签转为<p></p>,而js脚本中使用的又是<div></div>,而且在<p></p>标签内不允许嵌入其它格式块。第N次编辑了五六篇文章后,我实在有些不耐烦了。

  • 过程是这样子的:

我这人习惯用广度优先的算法做事,昨晚本来继续编写我的Robocode机器人,想还没有很好的idea。于是转而写篇博客为介绍Robocode,这事是早就计划好的,视频我都录好传到土豆上去了。在嵌入视频的时候,脚本又发生了些问题。调试解决后,我开始想怎么样一劳永逸地搞定这事。首先想到的是在编辑文章时在html模式下加入<script>调用播放器函数,js中用document.write()来输出播放器HTML代码,试过后再一次失望地发现Wordpress又自作聪明地把<script></script>内容转义了。忍无可忍的我终于决定自己写一个在Wordpress嵌入各种播放器的插件。想法很简单,仿照Audio player的方式,通过在文章中输入[xxxplayer:]并附件属性的方式嵌入播放器,在页面打开的时候把这部分代码替换为对应的播放器。

用Google找到了篇在wordpress中使用Javascript的文章,介绍了一种最简单的内容替换插件实现,再结合Audio player的源码,我已经对实现方式有了把握。接下来研究如何使用正则表达式提取[xxxplayer:a=aaa ...]中的属性,我的初衷是希望它可以有很高的兼容性,可以提取类似[xxxplayer:a="aaa;'aaa';aaa" b='b b b' c=ccc ...]这样各种引号形式的标签。我的正则是个半桶水的水平,又趁这机会找了个PHP正则表达式的教程仔细地看了一把,一个小时后还是没写出来。上网搜,两个小时后还是没搜到。看来难度很高,于是退而求次,只解析有双引号括起来的属性。最后在部署插件的时候,发现它根本没按我所想的去工作,在编辑模式下半角输入的双引号,用HTML都成了全角,而且“”"这三种形式的同时存在,百思不得其解。只能再退一步,不给属性加引号了,最后的正则是这样的。

// 从内容中获得指定属性
function get_attribute($player_info, $attribute){
return preg_replace("/(.*)" . $attribute . "([ ]?)=([ ]?)([^ ]*)(.*)/i", "$4", $player_info);
}

把它传到远程服务器上,运行正常。

  • 使用是这样子的:

在文章编辑模式入插入[anyplayer:type=swf url=http://xxxx.com/swf width=400 height=300],注意,两边要使用半角方括号。

  1. type是媒体类型,支持swf flv mp3 wma wmv rm ra qt
  2. url是媒体地址
  3. width是播放器宽度,缺省则为450
  4. height是播放器高度,缺省则为350

PS:属性不能用引号括起来

  • 效果是这样子的:

swf:支持各种标准的flash文件,常见视频网站上的视频都可采用这种方式发布

[anyplayer:type=swf url=http://cpiz.com/files/bloxorz.swf width=500 height=300]

[anyplayer:type=swf url=http://www.youtube.com/v/flwnaJXi9y0&rel=1 width=425 height=355]

flv:基本上和swf使用一样

[anyplayer:type=flv url=http://www.whosworks.com/upload/20081111992260222.flv width=460 height=330]

mp3:如果不需要皮肤自定义功能的话,可以替下Audio player了,该模式下宽高属性无效

[anyplayer:type=mp3 url=http://bbmedia.qq.com/media/yule/kekewang/music/jindie/sunyanzitonglei.mp3 ]

wma:调用MediaPlayer播放音频,Firefox下要额外插件支持,该模式下宽高属性无效

[anyplayer:type=wma url=http://show.jj.jx.cn/upload_mp3/20071021196261562.wma]

wmv:调用MediaPlayer播放音频,Firefox下要额外插件支持

[anyplayer:type=wmv url=http://mtv26.3378.com.cn/071110/梁静茹_www.3378.com.cn崇拜(完整版).wmv width=460 height=400]

...后面的懒得试了

  • 最新修改:

v0.0.4 修正了部分主机对js参数有安全性检查, 可能导致无法显示播放器的Bug

  • 下载是这样子的:

  WP AnyPlayer 插件 v0.0.4 (70.6 KiB, 1,900 hits)

==============原创作品,转载请注明出处 ==============

Posted in 瞎编乱造.

Tagged with , , , , , .


61 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. FlyChina says

    2.8.5测试可用,想请教一下,想让展示媒体的同时自动播放(比如mp3那段就需要点两次鼠标),能否加个参数实现?

  2. 雅文 says

    有不有带播放列表的WP播放器?

  3. Danfi says

    这个文字和视频怎么居中啊,在编辑文章时居中无效果

  4. c says

    怎样改能实现自动播放?

  5. 浩然 says

    不错,但不能居中啊.

  6. Adim Lee says

    很强大,就用它了,有机会的话帮你宣传一下。

  7. 有点蓝 says

    原来我还是不会用
    这该是什么样子的

1 2

Continuing the Discussion

  1. AnyPlayer for WP linked to this post on 2008-04-28

    [...] 测试页面 本来是想测试一下的,可载下来解压出错…就懒得试了,反正一般插多媒体都是用的源代码… Tag:AnyPlayer,wordpress,学习,插件 [...]

  2. 测试音频插件 | 阿邙-離離濁濁... linked to this post on 2008-05-21

    [...] 2.anyplayer【anyplayer:type=mp3 url=# 】支持swf flv mp3 wma wmv rm ra qt [...]

  3. wordpress全能播放器插件——AnyPlayer 于 锐意十足 linked to this post on 2008-09-21

    [...] googl了好一阵子,终于在AnyPlayer - 为WordPress嵌入各种类型播放器中找到 [...]

  4. Myth’s BLOG » Wordpress播放MP3的几种方法 linked to this post on 2008-12-06

    [...] AnyPlayer - 为WordPress嵌入各种类型播放器 [...]



Some HTML is OK

or, reply to this post via trackback.