Flash/Flex学习笔记(37):不用系统组件(纯AS3)的视频播放器--只有8.82K

简介: 以前为了赶项目,利用系统组件制作过一款视频播放器(见Flash/Flex学习笔记(6):制作基于xml数据源的flv视频播放器),但是系统组件实在是太大了,最终生成的swf居然有103K,随着AS3的深入学习,昨天又弄了一个只用AS3的播放器,最终只有8.82K,呵呵,这肥减得那是相当厉害。

以前为了赶项目,利用系统组件制作过一款视频播放器(见Flash/Flex学习笔记(6):制作基于xml数据源的flv视频播放器),但是系统组件实在是太大了,最终生成的swf居然有103K,随着AS3的深入学习,昨天又弄了一个只用AS3的播放器,最终只有8.82K,呵呵,这肥减得那是相当厉害。

用到了上一篇(Flash/Flex学习笔记(35):自己动手实现一个滑块控件(JimmySilder))里自己写的的滑块控件,主要代码如下(关键是NetConnection与NetStream对象的使用):

import Jimmy.Event.ValueChangeEvent;

var _autoPlay:Boolean=true;//是否自动播放
var _netConn:NetConnection;
var _netStream:NetStream;
var _duration:Number=0.0;
var _client:Object;
var _soundTransform:SoundTransform;
var _volumn=0.6;//初始音量
var _flvUrl = "flv的地址";

function init():void {
	txtInfo.text = "";
	txtInfo.visible = false;
	txtCurrent.text = "00:00";
	txtTotal.text = "00:00";
	silderVideo.Value = 0.0;
	videoMask.visible = false;
	txtPercent.text = "";
	txtPercent.visible = false;
	
	_netConn = new NetConnection();//创建连接
	_client = new Object();
	_soundTransform = new SoundTransform();

	//初始化[暂停]/[播放]按钮可见性
	if (_autoPlay) {
		btnPause.visible=true;
		btnPlay.visible=false;
	} else {
		btnPause.visible=false;
		btnPlay.visible=true;
	}	

	//初始化滑块按钮宽度
	silderSound.ButtonWidth=35;
	silderVideo.ButtonWidth=9.5;	
	silderSound.Value = _volumn;
	silderSound.ShowBarTri = true;
	silderSound.ShowBar = false;

	//开始连接并播放
	_netConn.connect(null);
	_netStream=new NetStream(_netConn);
	_netStream.bufferTime = 5;
	wVideo.attachNetStream(_netStream);
	_netStream.play(_flvUrl);	
	_soundTransform.volume=_volumn;
	_netStream.soundTransform=_soundTransform;
	_client.onMetaData = MetaDataHandler;
	_netStream.client=_client;

	//注册监听事件
	_netStream.addEventListener(NetStatusEvent.NET_STATUS,NetStatusHandler);
	btnSound.addEventListener(MouseEvent.MOUSE_OVER,function(){ Mouse.cursor = MouseCursor.BUTTON});
	btnSound.addEventListener(MouseEvent.MOUSE_OUT,function(){ Mouse.cursor = MouseCursor.AUTO});
	btnSound.addEventListener(MouseEvent.MOUSE_DOWN,btnSoundMouseDown);
	btnPlay.addEventListener(MouseEvent.CLICK,btnPlayMouseClick);
	btnPause.addEventListener(MouseEvent.CLICK,btnPauseMouseClick);
	btnStop.addEventListener(MouseEvent.CLICK,btnStopMouseClick);
	silderSound.addEventListener(ValueChangeEvent.VALUE_CHANGE,VolumnChangedHandler);
	addEventListener(Event.ENTER_FRAME,EnterFrameHandler);	
	silderVideo.addEventListener(MouseEvent.MOUSE_DOWN,silderVideoMouseDown);
	silderVideo.addEventListener(ValueChangeEvent.VALUE_CHANGE,VideoValueChangedHandler);
}

function NetStatusHandler(e:NetStatusEvent):void{
	txtInfo.text = "";
	videoMask.visible = txtPercent.visible = txtInfo.visible = false;
	trace(e.info.code);
	switch(e.info.code){
		case "NetStream.Play.StreamNotFound":
			txtInfo.text = "错误:视频文件地址无法访问"
			break;
		case "NetStream.Play.Failed":
			txtInfo.text = "错误:视频播放失败"
			break;
		case "NetStream.Buffer.Empty":
			txtInfo.text = "影片缓冲中...";
			break;
		case "NetStream.Play.Stop":
			//txtInfo.text = "播放已停止";
			break;
		case "NetStream.Seek.InvalidTime":
			//txtInfo.text = "错误:无法跳到指定的时间点播放";
			//trace(e.info.Error);
			//_netStream.pause();
			//btnPlay.visible = true;
			//btnPause.visible = false;			
			break;	
		default:
		break;
	}
	
	if (txtInfo.text.length>0){		
		videoMask.visible = txtPercent.visible = txtInfo.visible = true;		
	}
}

function btnSoundMouseDown(e:MouseEvent) {
	var i:uint=btnSound.currentFrame;
	if (i==1) {
		btnSound.gotoAndStop(2);//切换到静音
		SetVolumn(0);
	} else {
		btnSound.gotoAndStop(1);//切换到有声音
		SetVolumn(silderSound.Value);
	}
}

//设置音量
function SetVolumn(vol:Number):void {
	var _snd:SoundTransform = _netStream.soundTransform;
	_snd.volume = vol;
	_netStream.soundTransform = _snd;
}

//Play按钮点击事件
function btnPlayMouseClick(e:MouseEvent) {
	//切换按钮可用性
	btnPause.visible=true;
	btnPlay.visible=false;
	//开始播放...
	_netStream.resume();
}

//Pause按钮点击事件
function btnPauseMouseClick(e:MouseEvent) {
	//切换按钮可用性
	btnPause.visible=false;
	btnPlay.visible=true;
	//暂停...
	_netStream.pause();
}

//Stop按钮点击事件
function btnStopMouseClick(e:MouseEvent) {
	_netStream.pause();
	_netStream.seek(0);

	//切换播放/暂停按钮状态
	btnPause.visible=false;
	btnPlay.visible=true;
}


//获取视频总持续时间
function MetaDataHandler(data:Object) {
	_duration = data.duration;	
}

function VolumnChangedHandler(e:ValueChangeEvent):void{
	//如果没被禁音,则允许调节音量
	if (btnSound.currentFrame==1){
		SetVolumn(e.NewValue);
	}
}

function VideoValueChangedHandler(e:ValueChangeEvent):void{
	_netStream.pause();
	_netStream.seek(e.NewValue * _duration);
	//_netStream.resume();
}

//进入每帧的处理函数
function EnterFrameHandler(e:Event):void{
	if (_duration>0){
		txtCurrent.text = Math.floor(_netStream.time/60) + ":" + Math.round(_netStream.time%60);
		txtTotal.text = Math.floor(_duration/60) + ":" + Math.round(_duration%60);	
		silderVideo.Value = _netStream.time/_duration;
	}
	if (_netStream.bytesLoaded>0){
		silderVideo.LoadingValue =  _netStream.bytesLoaded / _netStream.bytesTotal;
	}	
	
	//trace(_netStream.bytesLoaded + "/" + _netStream.bytesTotal);
}


function RemoveEnterFrameHandler(){
	if (silderVideo.IsDragging){
		removeEventListener(Event.ENTER_FRAME,EnterFrameHandler);
	}
	else{
		addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
	}
}


function silderVideoMouseDown(e:MouseEvent):void{
	//trace("进度滑块被点击了!");
	removeEventListener(Event.ENTER_FRAME,EnterFrameHandler);
	stage.addEventListener(MouseEvent.MOUSE_UP,stageMouseUpHandler);
}

function stageMouseUpHandler(e:MouseEvent):void{
	addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
	//trace("鼠标MouseUp事件");
	
	if (btnPause.visible){
		_netStream.resume();
	}
	stage.removeEventListener(MouseEvent.MOUSE_UP,stageMouseUpHandler);	
}

init();


目录
相关文章
|
开发者 容器
ArkUI框架,Flex布局,基础组件及封装,父子组件的双向绑定
Flex组件用于创建弹性布局,开发者可以通过Flex的接口创建容器组件,进而对容器内的其他元素进行弹性布局,例如:使三个元素在容器内水平居中,垂直等间隔分散。 例如:如下的布局代码分别表示:(垂直排列,水平居中,垂直居中)
445 0
ArkUI框架,Flex布局,基础组件及封装,父子组件的双向绑定
|
2天前
|
开发者 UED 容器
鸿蒙next版开发:ArkTS组件通用属性(Flex布局)
在HarmonyOS next中,ArkTS的Flex布局是一种强大且灵活的布局方式,支持水平或垂直方向排列元素,并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap,适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
21 10
|
30天前
|
数据可视化 前端开发 搜索推荐
FLEX组件可视化设计器CSS3代码生成器
FLEX组件可视化设计器CSS3代码生成器
23 4
|
4月前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
6月前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Flex容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Flex容器组件
195 5
|
6月前
|
容器 API UED
【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)
【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)
279 0
【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)
|
11月前
|
容器
会议OA项目-首页->flex弹性布局,轮播图后台数据获取及组件使用(后台数据交互mockjs),首页布局
会议OA项目-首页->flex弹性布局,轮播图后台数据获取及组件使用(后台数据交互mockjs),首页布局
79 0
|
前端开发 Java 开发工具
Flutter(七)——多子元素组件:GridView,CustomScrollView,Flex,Wrap
Flutter(七)——多子元素组件:GridView,CustomScrollView,Flex,Wrap
320 0
Flutter(七)——多子元素组件:GridView,CustomScrollView,Flex,Wrap
好客租房116-flex布局组件导航菜单
好客租房116-flex布局组件导航菜单
112 0
好客租房116-flex布局组件导航菜单
|
开发框架 小程序 Android开发
列表组件list-view的使用、flex布局教程,以APICloud AVM框架为例
avm.js是 APICloud 推出的多端开发框架。使用 avm.js 一个技术栈可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App,且多端渲染效果统一;全新的 App 引擎 3.0 不依赖 webView,提供百分百的原生渲染,保障 App 性能和体验与原生 App 一致。
500 0