.

定格成①道美丽的风景綫在彼此间......

日志

关于我

衡阳博客

文章分类

【引用】播放器制作详解(二)

2011-09-30 17:16:57| 分类：播放器制作 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

本文转载自火力光波《播放器制作详解(二)》

播放器制作详解(二)

制作一个属于自己的播放器，说句实话，其实就是把别人的播放器拿过来修改一下，这样就变成了自己的了。说起来简单，但实践起来真还有点复杂。首先，要下载播放器源码。要想有一个比较理想的播放器源码可不好找啊。二是，上传修改好的文件，请点击《千脑》和《千脑使用方法图解》。因此，本文就可重点介绍如何修改文件了，仅供参考。

㈠播放器源文件解读

在《网络时空》下了一个播放器，它的下载地址：http://jc.haofa.net/Html/Soft/player/34.shtml

下好了改名后，解压到当前文件夹：

打开解压后的swf_player文件夹如下：

播放器制作详解(二) - 火力光波 - 火力光波的博客

以上文件、文件夹的含义：
       bg                   图片
       scene             特效
       xml                配置文件和列表文件目录
       cfplay.swf       播放器主程序
       index.htm        播放文件的支持页面

打开以上文件夹，双击文件可预览；用记事本打开，可修改文件。
修改文件，涉及到“关联修改”和“独立修改”，何谓“关联修改”、“独立修改”呢？
关联修改：指在修改一个文件时，将关联到另一个文件的修改；
独立修改：指在修改一个文件时，不需要再修改其它文件。
为了便于看清那些内容属于关联修改，那些内容属于独立修改，本文将用
“红色”表示“关联修改”，“蓝色”表示“独立修改”，“绿色”表示对原文的注解和说明。

㈡修改配置文件

打开xml文件夹如下：

（请点击右边连接查看：打开xml文件夹后的文件个数、名称末作修改）

上面第一个config.xml 文件就是配置文件，其余都是歌曲目录文件。
可用记事本打开配置文件config.xml 进行修改。
（请点击右边连接查看：修改后的config.xml配置文件内容）

配置文件有以下六个部分：

①节目分类目录

以上共有七项
独立修改的有：
可修改分类名，可删除某一项。
互换两项xml 文件地址，就互换了两项显示内容。
关联修改的有：
修改某项“xml 文件地址”，同时修改对应的“文件夹名、文件名.后缀名”，某项显示内容仍不变。
互换两项“xml 文件地址”，同时互换对应的“文件夹名、文件名.后缀名”，可改变两项显示顺序。
添加一项，应按照格式<list name="分类名称">xml 文件地址</list>，同时要建立相应的文件夹及文件。

②场景图片目录

<bg>
<url a="透明度">图片文件地址</url>
<url a="80">bg/mm1.jpg</url>
…………………………………
</bg>

修改操作与以上类似

③场景特效目录

<scene>
<scene>场景特效地址</scene>
<scene>scene/fly1.swf</scene>
……………………………………
</scene>

修改操作与以上类似

④滚动公告

<ads><txt>无法正常显示请升级为Flash player 9</txt>
<txt>空格暂停/播放，S键停止/播放</txt>
<txt>Home/End/PageUp/PageDown翻页</txt>
<txt>+/-号调音，上下左右键是上首下首快退快进</txt>
<txt>点右键添加音乐，C键打开自定义列表</txt>
<txt>双击/F键/点击右上角方框切换视频窗口</txt>
<txt>点击歌曲序号前的X可删除指定歌曲</txt></ads>

以上虽可独立修改，但无需修改。

⑤欢迎界面

<readme>欢迎使用*网络时空*音乐播放器!
╭⌒╮ ╭⌒⌒╮
╱◥██◣   ╭ ╭ 天天好心情
︱田︱田田|    ╰--------------------
╬╬╬╬╬╬╬╬╬╬╬╬╬╬
**********歌词显示系统**********
http://www.k688.com/     Aken</readme>

以上可酌情修改

⑥系统设置

<other>
autoplay=1                         ← 自动播放设置：    0（默认不自动播放）1（自动播放）
scalemode=1                      ← 播放视频时缩放：0（默认视频不缩放）1（视频缩放）
lrccolor1=#ffffff                     ← 歌词颜色设置
lrccolor2=#84FF84              ← 歌词加亮行颜色设置
listcolor1=#cccccc              ← 音乐列表颜色设置
listcolor2=#00ff00                ← 音乐列表加亮行颜色设置
classcolor1=#cccccc           ← 分类列表颜色设置
classcolor2=#00BD00          ← 分类列表加亮颜色设置
bgcolor=#006633               ← 默认皮肤的颜色设置
</other>
<cfversion>网络时空</cfversion><copyright>网络时空-『音乐播放』</copyright>

以上可酌情修改

㈢修改音频视频目录

在xml文件夹中，可用记事本打开list0.xml 文件进行修改。

（请点击右边连接查看：修改后的list0.xml文件内容）

添加、删除或修改歌曲、视频目录，应按照如下格式：

<music>
<name>音乐、视频名称</name>
<url>音乐、视频地址</url>
<content>内容介绍</content>
<pic>歌词背景图地址</pic>
<lrc>歌词文件地址</lrc>
<scene>场景特效地址</scene>
</music>

①音乐（简写）

<m>
<n>音乐名称</n>
<u>音乐地址</u>
<c>内容介绍</c>
<p>歌词背景图地址</p>
<l>歌词文件地址</l>
<s>场景特效地址</s>
</m>

设置场景：

如对某一歌词设置固定的背景，它涉及背景图和场景特效。
添加背景图片的地址：bg/图片名.jpg
添加场景特效的地址：scene/图片名.swf

添加歌词：

添加lrc歌词，首先要建立一个名为lrc文件夹。
其次，本人用的网盘，不允许歌词的文件名为中文；
歌词格式(后缀名)可为.lrc、.txt ，如网盘难识别.lrc，最好用.txt 。
歌词地址格式：lrc/歌词名.txt。
点击查看：lrc歌词下载、制作
添加lrc歌词lrc文件夹的方法：
（请点击右边连接查看：在播放器swf_player文件夹中添加的歌词lrc文件夹）
（请点击右边连接查看：添加的lrc子文件夹中的文件）

音乐实例：

<m>
<n>歌手-歌名</n>
<u>http/www.cenfun.com/music.mp3</u>
<c>某某专辑</c>
<p>bg/mm1.jpg</p>
<l>lrc/abc.txt</l>
<s>scene/fly1.swf</s>
</m>

②视频（简写）

视频实例：

<m>
<n>电影名</n>
<u t="2400">http/www.cenfun.com/movie.flv</u>
<c>某某专辑</c>
<p></p>
<l></l>
<s></s>
</m>

③其它xml 文件

还有其它xml 文件如下，它们的修改方法类同。修改后的情况，点击下面的“文件名”可查看。

修改后的文件： list1.xml 、list2.xml 、list3.xml 、list4.xml 、list5.xml 。

另，播放器的素材来源
音频：搜狗音乐、搜搜音乐、百度mp3。视频：新浪视频的解析地址。
电影：新浪电影解析的mp4,土豆电影的解析地址（这个不能在网易上播放）。

㈣修改场景目录

①修改场景图片

打开场景图片bg文件夹如下：

（请点击右边连接查看：bg文件夹修改后的场景图片文件）

独立修改：在不改变图片名时，可更换图片；通过互换图片名，可改变图片显示顺序。

关联修改：添加、删除图片，先要打开xml文件夹中的config.xml 文件，再在场景图片目录中添加或删除图片目录。

②修改场景特效

打开场景特效scene文件夹如下：

（请点击右边连接查看：scene文件夹的特效文件末作修改）

独立修改：在不改变特效名时，可更换特效；通过互换特效名，可改变特效显示顺序。

关联修改：添加、删除特效，先要打开xml文件夹中的config.xml 文件，再在场景特效目录中添加或删除特效目录。

㈤上传获得外链地址

在千脑网盘上传后，得到：

播放器的外链地址： http://pic.qnpic.com/r.jsp?fn=//xuhui8491/-591a-529f-80fd-64ad-653e-56681/cfplay.swf

嵌入播放器的代码：

① <object><param name="movie" value="外链地址"><embed src="外链地址" width=宽度 height=高度></embed></object >

② <IFRAME src="外链地址" frameBorder=0 width=宽度 height=高度></IFRAME>

如，代码：<div align=center><EMBED src=http://pic.qnpic.com/r.jsp?fn=//xuhui8491/-591a-529f-80fd-64ad-653e-56681/cfplay.swf width=450 height=320 type=application/x-shockwave-flash wmode="transparent"></div>

效果：

提醒：①当屏幕上出现下面的图时，点击图可取消。

播放器制作详解(二) - 火力光波 - 火力光波的博客

②开始时是黑频双击播放区，途中是黑频点右上角方框。

播放器制作详解(二) - 火力光波 - 火力光波的博客

本播放器可播放音频、视频，显示歌词，具体使用方法请点下面：

《现存的播放器拿去就能用(2)》

播放器制作详解 (一) (二)

本文参考：网络播放器制作详细教程

评论这张

转发至微博

阅读(23)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_087067085083087069093086083064072087082068080086086068087084',
              blogTitle:'【引用】播放器制作详解(二)',
              blogAbstract:'  <P align=\"center\" \><FONT color=\"#ff00ff\" size=\"4\" face=\"楷体_GB2312\" \>播放器制作详解(二)</FONT\></P\><BR\>  <P\><FONT size=\"2\" \>制作一个属于自己的播放器，说句实话，其实就是把别人的播放器拿过来修改一下，这样就变成了自己的了。说起来简单，但实践起来真还有点复杂。首先，要下载播放器源码。要想有一个比较理想的播放器源码可不好找啊。二是，上传修改好的文件，请点击《<A target=\"_blank\" rel=\"nofollow\" href=\"http://www.qiannao.com/\" \>千脑</A\>》和《<A target=\"_blank\" href=\"http://xuhui-8491.blog.163.com/blog/static/80745891201093143430842/\" \>千脑使用方法图解</A\>》。因此，本文就可重点介绍如何修改文件了，仅供参考。</FONT\> </P\>  <P\><FONT color=\"#ff00ff\" size=\"4\" face=\"楷体_GB2312\" \>㈠ 播放器源文件解读</FONT\></P\>  <P\><FONT size=\"2\" \>在《<A target=\"_blank\" rel=\"nofollow\" href=\"http://jc.haofa.net/Soft/ShowClass.asp?ClassID=7\" \>网络时空</A\>》</FONT\><FONT size=\"2\" \>下了一个播放器，它的下载地址：</FONT\></P\>',
              blogTag:'',
              blogUrl:'blog/static/137400732201183051657469',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:0,
              publishTime:1317374217469,
              permalink:'blog/static/137400732201183051657469',
              commentCount:0,
              mainCommentCount:0,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/137400732201183051657469">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

.

导航

日志

【引用】播放器制作详解(二)

历史上的今天

最近读者

热度

评论

页脚