Flash/Flex学习笔记(6):制作基于xml数据源的flv视频播放器
时间:2022-04-23
本文章向大家介绍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();
在线演示:
- 【Java】泛型学习笔记
- 读写文件具体操作
- 【算法】赫夫曼树(Huffman)的构建和应用(编码、译码)
- ERROR 1396 (HY000): Operation CREATE USER faile...
- hive安装后测试
- 【算法】论平衡二叉树(AVL)的正确种植方法
- 【JavaScript】 JS面向对象的模式与实践
- log4j:ERROR Failed to load driver
- 前端MVC Vue2学习总结(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例
- 前端MVC Vue2学习总结(六)——axios与跨域HTTP请求、Lodash工具库
- spring之config.xml完整版示例
- 前端MVC Vue2学习总结(五)——表单输入绑定、组件
- 【HCTF】2017部分Web出题思路详解
- 前端MVC Vue2学习总结(四)——条件渲染、列表渲染、事件处理器
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Scrapyd发布爬虫的工具
- MySQL8.0.18 试用Hash Join
- InnoDB:表空间管理
- MyBatis 增删改查
- python分析wav文件
- CICD实战——服务自动构建与部署
- python+opencv实时视频目标检测
- python数据化运营分析实例---销售预测
- Leetcode 1444. 切披萨的方案数(DP,类似石材切割,二维前缀和)
- Python生成内涵图片
- Linux 下makefile实战 ——编写真实的C项目
- MySQL8功能详解——Common table expression (CTE)
- 游戏数据分析
- MySQL8功能详解——隐藏索引
- python 操作excel(附案例)