查看完整版本: [原创]周云FLASH小教室_按XML播放FLV基础教学(全4节[完])

[原创]周云FLASH小教室_按XML播放FLV基础教学(全4节[完])

[作者：[color=red]周云[/color] 联系：[email=danyun1982@163.com]danyun1982@163.com[/email] ]
<转载请保留作者署名和联系方法>

前言

大家注意，周哥又来骗分了～！

看到几个鸟鸟都在做FLV播放这块的东西，而且都碰到了问题，所以就写个简单的教程指引下。
因为是给初级者看的，所以我尽量用简单的语言来描述问题。

视频播放这块的东西，要做的功能多，可以做的很复杂。我自己本身正职工作就牵涉到这方面的东西。
但倘若我搬个复杂的源文件上来讲解，反倒会让嫩鸟们看了打退堂鼓。
学习这东西本来就是要循序渐进。

我今天把最基本的几步讲清楚，把搞炫耍酷的代码全省略。等嫩鸟们把关键的几步琢磨着学会了，自己再加点炫的代码自己扩充吧。
好了，不多说，先把今天要讲的东西罗列下。

主要实现内容:
根据XML文档，挨个播放它里面的指定的视频。

讲解步骤：
1.认识XML
2.XML的解析语句
3.flvplayback的监听
4.[附]flvplayback控制组件的添加

其实这些内容网上教程都有的，只不过有些写的复杂了些，或者光有代码没有注释讲解。
今天我尽量简洁明了的讲。新鸟们哪部分不懂就直接看哪部分吧。
学前先下载源码～

LESSON 1 认识XML

从原理来讲XML，要写上N行了。不如我们直接从实例开始，跟我的思路快速理解XML。

先来段本节实例里的XML
[code]<?xml version="1.0" encoding="UTF-8"?>
<videoLists path="flv/">
    <video filename="1.flv" intro="第一段视频内容介绍"/>   
    <video filename="2.flv" intro="第二段视频内容介绍"/>      
</videoLists>[/code]
第一行，别管它，如果让你写XML，这行就直接复制。只要理解UTF-8是指编码，还可以改写成GB2312等，看需要。但一般现在新开发项目都用UTF-8了。

接下来是一段
[code]<videoLists path="flv/">
    ...     
</videoLists>[/code]

如果这个XML我们定义为实体a的话,那整个这段就是a.childNodes[0]，也就是我们说的节点,[0]说明了是第一节点。
里面所有的元素都是属于a.childNodes[0]的，比如
videoLists就是a.childNodes[0].nodeName，是节点名。
path="flv/"是指a.childNodes[0]里的一个属性变量，可以省略的。如果要读出来的话，用以下的：
a.childNodes[0].attributes.path
这里path之前必须要加attributes。凡是属性变量前都要加attributes的。

再往下看：
[code]<videoLists path="flv/">
    <video filename="1.flv" intro="第一段视频内容介绍"/>   
    <video filename="2.flv" intro="第二段视频内容介绍"/>      
</videoLists>[/code]
video这一行，是a.childNodes[0]下的子节点

单拿一行来说：
<video filename="1.flv" intro="第一段视频内容介绍"/>   
video就是a.childNodes[0].childNodes[0].nodeName
filename和intro都是属性变量
filename就是a.childNodes[0].childNodes[0].attributes.filename
intro就是a.childNodes[0].childNodes[0].attributes.intro

嫩鸟先花点时间把以上内容消化再往下看

好，我们自我检测下搞懂了没

第二行拿出来
<video filename="2.flv" intro="第二段视频内容介绍"/>   
其中各个元素怎么表示？

思考下

公布答案：
video就是a.childNodes[0].childNodes[1].nodeName
filename就是a.childNodes[0].childNodes[1].attributes.filename
intro就是a.childNodes[0].childNodes[1].attributes.intro

搞懂了没？

我还是不放心你们这帮嫩鸟，再出道题当作业，比如有个xml，当它是a
[code]<?xml version="1.0" encoding="UTF-8"?>
<a>
    <b w1="qqq" w2="eee"/>   
    <b w1="www" w2="rrr"/>      
</a>
<z  m="r3">
    <g w1="v"/>   
    <g w1="vv"/>   
    <g w1="vvv"/>   
</z>[/code]

问题：
"rrr"怎么表示？
z怎么表示？
"r3"怎么表示？

答：
a.childNodes[0].childNodes[1].attributes.w2
a.childNodes[1].nodeName
a.childNodes[1].attributes.m

检查下，自己到底懂了没？不懂就别往下一节看了。

LESSON 2 XML的解析语句

有了上一课的对XML了解的基础，就可以开始了解怎么在FLASH里拆解XML了

还是拿范例的XML
[code]<?xml version="1.0" encoding="UTF-8"?>
<videoLists path="flv/">
    <video filename="1.flv" intro="第一段视频内容介绍"/>   
    <video filename="2.flv" intro="第二段视频内容介绍"/>      
</videoLists>[/code]
其中video可能有N行(我为了讲解才写的两行～)
我们要做的东西就是让播放器按照顺序一个个播放video，并且显示相关的intro文字。

本节课程的目的，就是要写段代码自动去拆分XML,把filename和intro信息读取出来，分别放到数组里保存起来。
好，话不多说，先放代码后讲解
[code]
//---解析XML部分---
video_name = [];
video_intro = [];//建立两个数组准备存放内容
Video_xml = new XML();
Video_xml.ignoreWhite = true;
Video_xml.onLoad = function() {
        //主体拆分部分
path = this.childNodes[0].attributes.path;//path存放的是保存flv的目录路径
tmp = this.childNodes[0].childNodes;//这步是很省力的一招，以后出现this.childNodes[0].childNodes就用tmp代替，能少打不少字
for (i=0; i<tmp.length; i++) {//tmp.length是代表第一节点下子节点的个数，想明白没？
  video_name.push(path+tmp[i].attributes.filename);
  video_intro.push(tmp[i].attributes.intro);//内容添加进数组
}
//
flv_play();//全部完工后执行flv_play()这个funtion。我们后面会定义这个function的
};
Video_xml.load("video_list.xml");


[/code]这里文件路径我是用path+filename合成的，为的是方便，因为所有文件保存目录路径是一样的。
如果各个文件路径不一样，那就省掉path这个属性变量，在filename里要有完整的文件路径名称。

对于菜鸟来说，以下部分你可以直接COPY的，自己要写的就是拆解部分。（第一节的知识派用场了）
[code]Video_xml = new XML();
Video_xml.ignoreWhite = true;
Video_xml.onLoad = function() {
        //主体拆分部分  
};
Video_xml.load(文件路径);[/code]
拆解好后，video_name和video_intro这两个数组就已经有了我们要的数据了。

LESSON 3 flvplayback的监听

数组里已经有了每个视频的路径和文字介绍，我们就可以开始做播放了。

舞台上拉一个FLV Playback的组件，MC就命名为fpb
再建个动态文本框，命名为intro_text
然后开始加代码了
[code]

//---播放的function，XML解析完毕后被调用---
function flv_play() {
item = 0;//目前播放数组里第1个
fpb.contentPath = video_name[item];//路径设定
fpb.play();//播放
intro_text.text = video_intro[item];//文字框里显示文字
flv_listener();//监听设定
}

[/code]这个无需多讲

下面我们来重点讲讲flv_listener();//监听设定

怎么监听fpb是不是播完了FLV，并且当侦测到播放完FLV就执行相应的动作？
我先放出代码再讲解
[code]

//---监听代码---
function flv_listener() {
var listenerObject = new Object();//建立个OB
listenerObject.complete = function() {//建立OB.complete的function，当播放完后被触发
  item++;
  if (item == video_name.length) {
   item = 0;
  }//item值变动，当全部放完后，再重头开始放
  fpb.contentPath = video_name[item];
  fpb.play();
  intro_text.text = video_intro[item];//播放路径和文字介绍设定
};
fpb.addEventListener("complete", listenerObject);//将监听添加到fpb身上
}

[/code]如上，监听的步骤是
1.建立ob
2.写“ob.状态=function(){...}”，这里状态可以是complete，也可以是其它的比如playing、stopped等，看你要建听什么状态。
3.将ob的状态添加到播放器上监听，语句“播放器.addEventListener(状态, ob)”
如此一来就完成了监听的设定。当播放器发生了你设定的状态，就自动执行function里的内容。
如果要删除监听，可以用语句“播放器.removeListener(ob)”

怎么样？还算简单吧？
教了最基本的从XML读列表，然后播放器播放，监听状态做响应。如果你熟练了，可以自己继续扩充更炫的功能。

LESSON 4 [附]flvplayback控制组件的添加

这节短小的内容是附加出来的。想既然写到了flvplayback，顺便为菜鸟说下控制组件。

视频的播放控制组件，最简单的，就是直接从内置的一些皮肤里拉。
点一个播放器，最下面面板里“属性/滤镜/参数”里，点参数。里面有skin这一项。
点开了自己选。挺实用的。

不过要注意，这样生成的文件，额外会多个皮肤swf，这个swf要和主swf放一个目录下哦，相当于是个外部调用的关系。
同样也可以用AS实现这个：播放器.skin="皮肤名.swf"

不用它默认的皮肤，也可以自己添加的。
在组件面板里专门有个FLV Playback UI这一类，里面有各种控制按钮的，自己拖出来放到舞台上定位置。

拖到舞台后文件库里会有它的MC
想改变外形，就可以直接点进去改啦～

放好后，每个组件命名下，用AS关联到播放器就可以了，我在例子里简单也演示了下。[code]

//---flvplayback的控制UI设定---
fpb.playButton = m_playButton;
fpb.stopButton = m_stopButton;
fpb.seekBar = m_seekBar;
fpb.volumeBar = m_volumeBar;[/code]好了，简单的一讲到此结束，菜鸟们自己琢磨去吧。
有问题，先按F1自己搜下，实在到想不出，再来请教中鸟。动不动就来问，你的自我学习能力会迅速退化的。

[color=#0000ff][本教程完][/color]

有没有原文件，可以发上来提供参考吗？

有没有原文件，可以发上来提供参考吗？

不错的东西！收下了

支持一下

好教程，留下记号

好东西看看学习一下

牛逼哦。可以写书

支持一下

ding,ding,

*** 作者被禁止或删除 内容自动屏蔽 ***

顶............