Skip to content


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

9,208 浏览

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

本从没打算过要为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,906 hits)

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

Posted in 瞎编乱造.

Tagged with , , , , , .


61 Responses

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

  1. 大明明 says

    我叼..搞得好象很专业啊

  2. panda says

    看不懂,眼花花。。。

  3. Double fool says

    您的Cbook非常出色,希望能支持UNCODE TXT的转换,其实可以附加BIG5编码转换功能,很常用到.
    软件非常出色,知名度却不高,这个BLOG并不好找呢...遗憾.

  4. Double fool says

    PS: 增加进度条后反而减慢了转换速度,华丽多于实用价值.
    另期待批量转换的出现.

  5. ironduck says

    为何现在下载不了啊

  6. cpiz says

    升级到WordPress 2.5以后, 下载插件出了问题, 现在已修复.

  7. Janet says

    看不懂啊~~插件是怎么启用的??吧那个【】放到页码代码编辑中就可以么?

  8. cpiz says

    安装后激活, 编辑文章想插入播放器的时候, 使用文中提到的格式就行.注意方括号应该是半角.

  9. lx says

    用了你的这个插件,终于不再出现IE里面的已终止操作了。哈哈,谢谢

  10. 渊若棋局 says

    如果能在富文本处或者html代码的地方加上一个按钮那么就perfect了

  11. 懒懒 says

    wordpress.262 版本是否可以使用?
    具体应该如何插入呢 ?

  12. 懒懒 says

    我是新手,看得还是不太明白,可以具体说说吗?

    是不是HTML 编辑模式下插入呢?

  13. cpiz says

    2.6.2是肯定可以用的,不是HTML模式,是所见即所得模式

  14. 伊迭 says

    mp3不支持自定义皮肤吗?
    要是支持自定义皮肤的话我就把Audio player撤下来了...因为要和页面协调...

  15. kaol says

    大侠,想询问一下,怎么修改背景呢?想把背景改成透明的.
    然后修改字体颜色,想用英文显示,都要去哪里改呢?谢谢了啊.

  16. cpiz says

    所有涉及显示的内容都在anyplayer.js文件中,BuildPlayer函数内定义了风格,使用英文的话,把这个文件里的汉字全改一下就成,很好懂的。

  17. joy says

    很棒的插件,但是插入youtube视频失败,用你的那个演示视频就没问题,闹不懂怎么回事

  18. 罡风行 says

    我用的是wordpress2.7,为什么不能用呢。

  19. cpiz says

    @罡风行
    我现在是WP2.7,试了没有问题。。你用我下面的地址试试,一定要在所见即所得模式下
    [anyplayer:type=swf url=http://www.tudou.com/v/PSm4c7tPFL0 width=500 height=340]

  20. 罡风行 says

    @cpiz
    用了上面的地址还是没有显示。直接的是空白。我以为是插件冲突。把所有的插件都停用了。可还是不行。哪里的原因呢。帮帮我吧。

  21. cpiz says

    留个QQ/MSN/Gtalk联系方式给我吧,我帮你看看

  22. 罡风行 says

    我的QQ4********谢谢了 。

  23. cpiz says

    @罡风行
    问题解决,应该你的主机对URL有特殊的安全性检查,不允许URL参数带URL标记
    举例:
    合法
    http://www.o4klr.cn/wordpress/wp-content/plugins/anyplayer/anyplayer.js?a=http
    不合法
    http://www.o4klr.cn/wordpress/wp-content/plugins/anyplayer/anyplayer.js?a=http://

    我改了下插件,修正了这个问题,你升级一下试试看

  24. 罡风行 says

    @cpiz
    非常感谢。问题终于解决了。原来是主机的问题啊。感谢

  25. joy says

    试过了,你给的地址都能正常现实!你试试插入这个视频:
    http://www.youtube.com/watch?v=Melo0oyaYAg

  26. cpiz says

    joy :试过了,你给的地址都能正常现实!你试试插入这个视频:
    http://www.youtube.com/watch?v=Melo0oyaYAg

    你找的地址不正确, 不是观看地址, 而是视频地址, 像这样就能正确显示了
    [anyplayer:type=swf url=http://www.youtube.com/v/Melo0oyaYAg width=425 height=344]

  27. noikiy says

    能不能把默认的方式就是展开的啊????

  28. 叶秋 says

    FF3.0.5下打开MP3的时候会Error opening file,我点你的一样,不知是什么原因?
    用IE又可以放。
    希望博主修改修改,先谢了。

  29. 叶秋 says

    是受我下载工具的影响,抱歉抱歉!

  30. kx says

    我安装了0.0.4版anyplayer
    但用了上面的地址 却什么也没显示
    能帮我看看么 谢谢 355620282 QQ

  31. p268 says

    非常感想,正在找falsh的插件。

  32. hewaner says

    下面第一个是你的地址,下面的是我的地址,但我的不行,不知是何原因。

    [anyplayer:type=swf url=http://www.tudou.com/v/PSm4c7tPFL0 width=500 height=340]

    [anyplayer:type=MP3 url=http://www.hewaner.cn/music8/yinyue1/Woman/06.MP3 width=500 height=340]

  33. cpiz says

    @hewaner
    type=MP3改为type=mp3,还有,你歌曲的URL是防盗链的,无法使用。

  34. 匿名 says

    很好用,感谢开源

  35. hewaner says

    @cpiz

    我已经用上了。歌曲防盗链,但能在我的网页上播放。
    还有,可以加上可视化效果吗(比如WMA格式的音乐),另外可以进行多曲连播吗?谢 谢 。

  36. hewaner says

    如果能显示歌词就好了。

  37. says

    。。。这个。。。js放在哪个文件夹。。。

  38. 杀手爱喝牛奶 says

    很棒的插件,太佩服博主了,高人啊!!!

  39. Rui Shen says

    这个插件确实不错,我一直在用,不知要把某个歌曲设为自动播放改怎么设置呢?谢谢!

  40. horlie says

    很不错,不知道能否让媒体一开始就是展开的?这样就方便了

  41. aihaizai says

    能不能增加一个功能:
    可以控制默认是折叠还是展开

  42. adwi says

    在点击展开的时候会在状态栏目显示文件地址。
    能不能不显示呢? 好防盗连起到点作用。

  43. SEVEN says

    很棒的東西,我就想找這種的,不過不能插入YOUTUBE的,
    就算用你上面那個也不行,究竟是為什麼呢?TUDOU的就正常。

  44. Leo says

    v0.0.4 版本里面貌似有的 id= 的参数 不知道是起什么做用的啊?

  45. bensky says

    不能下载那个Anyplayer. ... 5 5 5

  46. cpiz says

    主机环境做了变更导致的,现在已恢复了

  47. 精美明信片 says

    很好用!非常感谢!

  48. 精美明信片 says

    为什么不可以自动展开呢?再加个循环开关就更好了。

  49. 游客! says

    请问cpiz ,貌似新浪的视频不能打开哇?!

    清指教!谢谢

  50. Eden 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.