WordPress引用dewplayer播放器
背景故事
啥都不说了，鉴于某位盆友无法顺利集成到WordPress，那就写个水文吧。
这文儿太水了，水的无以复加。
授人以鱼不如授人以渔啊。。
顺便吐槽代码高亮插件会出现直接复制带行号的问题，还好可以切换到纯文本进行复制。怎么切不用说吧，地球人都知道。
播放器文件部署
首先需要部署一下dewplayer播放器的文件。
1、下载到dewplayer的播放器
如果是VPS，直接wget也行，地址如下：
http://www.alsacreations.fr/dl/dewplayer.zip
2、上传文件到WordPress主题目录
这一步不用多说，将dewplayer解压缩然后放到WordPress主题的目录里就行了。
文章调用
首先说一下调用代码，根据官方示例，调用代码如下：
|
1 2 3 4 5 |
<object type="application/x-shockwave-flash" data="dewplayer.swf" width="200" height="20" id="dewplayer" name="dewplayer"> <param name="movie" value="dewplayer.swf" /> <param name="flashvars" value="mp3=test.mp3" /> <param name="wmode" value="transparent" /> </object> |
解释一下
|
1 |
<object type="application/x-shockwave-flash" data="dewplayer.swf" width="200" height="20" id="dewplayer" name="dewplayer"> |
其中，data表示播放器文件的地址，width表示播放器宽度，height表示播放器高度。剩余的不用修改。
|
1 |
<param name="movie" value="dewplayer.swf" /> |
这里也是需要确定播放器路径的，value后面的值既是。
|
1 |
<param name="flashvars" value="mp3=test.mp3" /> |
这里是mp3文件的路径值。需要修改mp3=后面的内容，例如你的mp3在www.xx.com/mp3/1.mp3，那么该段代码：
|
1 |
<param name="flashvars" value="mp3=http://www.xx.com/mp3/1.mp3" /> |
剩下的没什么必要说了。
那么实现列表形式的，调用代码如下：
|
1 2 3 4 5 |
<object type="application/x-shockwave-flash" data="dewplayer-playlist.swf" width="240" height="200" id="dewplayer" name="dewplayer"> <param name="wmode" value="transparent" /> <param name="movie" value="dewplayer-playlist.swf" /> <param name="flashvars" value="showtime=true&autoreplay=true&xml=playlist.xml" /> </object> |
第一句没什么好说的，依旧是播放器swf文件地址和播放器宽高度。
第三句跟上面说的一样，确定播放器路径。
|
1 |
<param name="flashvars" value="showtime=true&autoreplay=true&xml=playlist.xml" /> |
这里有一个xml文件，xml文件内是播放列表的样式，需要修改的部分不多，拿上来说一下吧。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?xml version="1.0" encoding="UTF-8"?> <playlist version="1" xmlns="http://xspf.org/ns/0/"> <title>Playlist</title> <creator>Derek.S</creator> <link>http://bgm2.dadclab.com/</link> <info></info> <image></image> <trackList> <track> <location>/mp3/test1.mp3</location> <!--mp3文件地址，可以外链，但需要为mp3为结尾--> <creator>Bedrich Smetana</creator> <!--歌手--> <album>Má Vlast</album> <!--专辑名--> <title>La Moldau (Vltava)</title><!--显示标题--> <annotation>I love this song</annotation><!--注释内容--> <duration>32000</duration><!--持续时间--> <image>covers/1.jpg</image><!--封面地址--> <info></info><!--信息--> <link>http://fr.wikipedia.org/wiki/M%C3%A1_Vlast_(Smetana)</link><!--这个链接地址可以空着，在列表状态没有什么实际效果--> </track> </trackList> </playlist> |
调用演示
所用mp3链接来自播放器的官网。。扒来的。
示例
|
1 2 3 4 5 |
<object type="application/x-shockwave-flash" data="http://127.0.0.1/wp-content/themes/twentyten/dewplayer/dewplayer-playlist.swf" width="240" height="200" id="dewplayer" name="dewplayer"> <param name="wmode" value="transparent" /> <param name="movie" value="http://www.dadclab.com/wp-content/themes/twentyten/dewplayer/dewplayer-playlist.swf" /> <param name="flashvars" value="showtime=true&autoreplay=false&xml=http://www.dadclab.com/wp-content/themes/twentyten/dewplayer/playlist.xml" /> </object> |
使用时替换成自己的路径即可。
循环播放通过autoreplay参数来控制，具体的控制可以查询官方网站
顺便一说，如果需要在列表中使用中文，需要将xml的编码格式选为UTF-8无ROM。否则会乱码。
版权声明
转载保留版权： 大D技研室 | 《WordPress引用dewplayer播放器》
本文链接地址：https://www.dadclab.com/archives/3721.jiecao
转载须知：如果您需要转载本文，请将版权信息，版权授权方式，以及本文的链接地址注明，谢谢合作。
已有 6 条评论
发表评论
电子邮件地址不会被公开。 必填项已标注。
WordPresd 3.6似乎是直接粘贴音频文件地址就可以直接调用内置播放器了。
@hcl 他有特殊需求。
大D好厉害~无限YM
@xushine 那里厉害了~兔兔你是在卖萌么，邮箱都输入错了。我说怎么需要审核了。。。
求一个Flash版的MP3播放器，想做个专门的页面放播放器
@dej.sf 一看你就没去过http://bgm.dadclab.com