Flash/Flex学习笔记(6):制作基于xml数据源的flv视频播放器

今天折腾了大半天,总算搞出了一个功能简单的视频播放器,可以向公司领导交差了 :)

步骤:

1.Flash CS4 中 先拖一个"FLVPlayback"组件到舞台上

注:FLVPlayback本身已经具备了flv播放的基本功能,简单设置下属性就能播放视频了

2.加载xml数据源

xml数据源格式如下:

<?xml version="1.0" encoding="utf-8"?>
<data>
  <item flv="flv地址1" photo="缩略图1" url="点击路径1" name="名称1"></item>
  <item flv="flv地址2" photo="缩略图2" url="点击路径2" name="名称2"></item>        
  ...
</data>

ActionScript加载XML的核心代码:

var _xml:XML ;//声明一个XML类型的变量,用于后面接收数据
var _urlReq:URLRequest = new URLRequest();
_urlReq.url="xml文件地址";
var _loader:URLLoader=new URLLoader(_urlReq);//(异步)开始加载xml
_loader.addEventListener(Event.COMPLETE,loadCompleted);//配置加载完成后的回调函数

//加载完成后的处理函数
function loadCompleted(e:Event):void {
	_xml=XML(_loader.data);
	for each (var item in _xml.item) {
		trace(item.@flv + "," + item.@photo + "," + item.@url + "," + item.@name});//AS中用@来访问xml节点元素的属性
	}	
}

3.将TileList组件与xml数据绑定起来

TileList有点类似于Silverlight中的WrapPanel,在"Flash/Flex学习笔记(2):捕获摄像头"中最下面的截图列表就是TileList组件的应用,关于它的使用不重复贴代码了

至于tileList与xml的绑定,主要是通过DataProvider来完成

关键As3源代码:

import fl.events.ListEvent;
import fl.video.VideoEvent;
import fl.video.VideoProgressEvent;

lblDebug.visible = false; //关闭调试
flv1.play();//先默认播放第一个

var _xml:XML ;
var _urlReq:URLRequest = new URLRequest();
_urlReq.url="xml文件地址";
var _loader:URLLoader=new URLLoader(_urlReq);
_loader.addEventListener(Event.COMPLETE,loadCompleted);

var _dp:DataProvider = new DataProvider();
var _currentIndex:uint=0;

function loadCompleted(e:Event):void {
	_xml=XML(_loader.data);
	for each (var item in _xml.item) {
		_dp.addItem({flv:item.@flv,source:item.@photo,url:item.@url,name:item.@name});
	}

	if (_dp.length>0) {
		playflv(_currentIndex);
		flv1.addEventListener(VideoEvent.COMPLETE,playCompleted);
		flv1.addEventListener(VideoEvent.BUFFERING_STATE_ENTERED,buffered);
		flv1.addEventListener(VideoEvent.STOPPED_STATE_ENTERED,stopEntered);
		flv1.addEventListener(VideoEvent.PAUSED_STATE_ENTERED,pauseEntered);
		flv1.addEventListener(VideoEvent.PLAYING_STATE_ENTERED,playingEntered);
		flv1.addEventListener(VideoProgressEvent.PROGRESS,progressHandler);
	}
}

lst1.dataProvider=_dp;
lst1.addEventListener(ListEvent.ITEM_CLICK,clickBaby);

//点击宝贝时,播放对应的视频
function clickBaby(e:ListEvent) {
	_currentIndex=e.index;
	//trace(_currentIndex);
	playflv(_currentIndex);
}

//播放完成后,插放下一个
function playCompleted(e:VideoEvent) {
	trace("播放完成:" + e);
	playflv(_currentIndex + 1);
}

function buffered(e:VideoEvent){
	/*trace("缓冲中..." + e);
	lblDebug.text = "缓冲中...";	*/
	flv1.playWhenEnoughDownloaded();
}

function stopEntered(e:VideoEvent){
	//trace("已停止...");
	//lblDebug.text = "已停止...";
}

function pauseEntered(e:VideoEvent){
	//trace("已暂停...");
//	lblDebug.text = "已暂停...";
	pause1.visible = true;
	
}

function playingEntered(e:VideoEvent){
	//trace("播放中...");
//	lblDebug.text = "播放中...";
	pause1.visible = false;
}

function progressHandler(e:VideoProgressEvent){
	//trace(e);
	//flv1.playWhenEnoughDownloaded();
	//trace("缓冲时间:" + flv1.bufferTime);
	//trace("flv1.buffering=" + flv1.buffering + ",flv1.paused=" + flv1.paused)
	
	if (flv1.buffering || flv1.paused){//这个地方有点问题,会使用户的点击暂停失效(目前还没找到因“网速过慢导致进入缓冲的自动暂停” 与“用户自主点击暂停”如何用代码区分)
		flv1.playWhenEnoughDownloaded();
	}
}

//播放指定索引的视频
function playflv(flvIndex:uint) {
	//trace("flvIndex=" + flvIndex + ",_currentIndex=" + _currentIndex);
	if (flvIndex>=_dp.length) {
		flvIndex=0;
	}
	var item:Object=_dp.getItemAt(flvIndex);
	flv1.load(item.flv);	
	flv1.play();
	pause1.visible = false;
	_currentIndex=flvIndex;
	lst1.scrollToIndex(_currentIndex);
}

stop();

在线演示:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏咖啡的代码人生

tablecloth 使用笔记

tablecloth.js是一个能够只用寥寥几行代码即可快速美化你页面上HTML代码的jQuery插件。 tablecloth.js自身携带了多种表格风格...

3856
来自专栏IMWeb前端团队

React同构思想

React比较吸引我的地方在于其客户端-服务端同构特性,服务端-客户端可复用组件,本文来简单介绍下这一架构思想。 出于篇幅原因,本文不会介绍React基础,所...

2169
来自专栏IMWeb前端团队

Ques核心思想——CSSNamespace

本文作者:IMWeb 杨文坚 原文出处:IMWeb社区 未经同意,禁止转载 Facebook's challenges are applicable...

22910
来自专栏Create Sun

【.net+jquery】绘制自定义表单(含源码)

前言   两年前的时候就想做一个类似的功能,当时思路大家都讨论好了,诸多原因最终还是夭折了。没想到两年多后再这有重新提出要写一个绘制表单的功能。对此也是有点小激...

1.1K8
来自专栏逸鹏说道

我为NET狂官方群福利贴:一些常用的工具(上)

本次更新下载:http://pan.baidu.com/s/1skXzG4H ? 源码文档见官方群(以下为7.4更新内容) 逆天工具 CDN 资源库 国内 B...

3794
来自专栏Java后端技术

欠的债,这一次都还给你们

  前段时间,写的一篇关于博客园主题皮肤分享的文章,一经发出便受到了极大的热捧,后来很多网友留言说,想要让我分享现在的模板,毕竟现在这个模板已经比之前分享的那个...

1473
来自专栏拂晓风起

Flash:TextField字体不显示/文字不显示/文字丢失

1、是否文字中包含了\r\n等字符,flash中,\r和\n都会换行。需要过滤掉其中1个

1472
来自专栏编程微刊

BootstrapTable的使用教程一:实现一个简单的表格和分页二:说一说BootstrapTable的属性一览表三:bootstrap-table如何设置首行变色,其他行不变色

6744
来自专栏Golang语言社区

nwui —— 又一个go语言图形界面解决方案

Github: https://github.com/go-nwui/nwui 最近开的一个大坑,具体实现就是自动生成htm+css+js然后调用nw.js来显...

3796
来自专栏阿凯的Excel

巧用格式刷解决合并单元格无法统计问题

最近小编一直在分享Python,有朋友和我聊! 我是谁!我来自哪里!我要去往何处! 好吧,为了能对得起我的名字《阿凯的Excel》 本小编决定每周不少于一...

3776

扫码关注云+社区

领取腾讯云代金券