fim media player - boxmodel in flash
TRANSCRIPT
Qizhi Zhang Myspace China Front-end Developer [email protected] [email protected]
整合音乐、视频点播、视频直播
在线广告投放（视频模块）
自定义皮肤
用户数据分析
The preloader remains visible until Main has completed loading.
Layout（ BoxModel ）、Localized Resource、Playlist&Album Construction
handles all the media related functionality
Layout Construction
为什么不是有 PureMVC、 Cairngorm等现有MVC框架？
› PureMVC、 Cairngorm等框架适合包含大量视图的程序
› 对媒体播放器而言， View一般不会引起 Model 的变化
› 针对 Media Player量身制作的架构更灵活，更适合Player的逻辑控制
› Control 与 View、 Model 的分离仍然无处不在
采用 XML+CSS定义皮肤样式
› 由 URL、 Data、 CSS三部分组成<layout><url>assets/skins/artistAssets.swf</url>
<data> <box style=“width: 100%; height: 100%”> <vbox style="width: 100%; height: 100%"> <img src="iconMySpace" style="vertical-align:middle;top:2px;margin-left:8px" /> </vbox>
… … 针对 Media Player开发的组件库
› Media 属性、方法 public trackIndex、 currentTrack 、 etc.
继承自 Sprite，轻量级框架
设计师在 Flash中绘制 UI ，导出 SWF为资源文件
程序员使用 XML+CSS组装该 UI ，区分普通用户 /音乐人，音乐 /视频播放器等<box style="width: 20%;">
<hbox style="horizontal-align: right"><playstatus style="margin: -5px 5px 0px 0px;">
<on><html style="margin-top: -1px; color: #222222; font-family:
Verdana; font-size: 9px;"><b> #{PLAYING}</b>
</html></on><off>
<html style="margin-top: -1px; color: #222222; font-family: Verdana; font-size: 9px;">
<b> #{PAUSED}</b></html>
</off></playstatus>
</hbox></box>
MediaPlayer: : BoxModelFactory public function getBoxFromXML(xml:XML):BoxModel
{ var box:BoxModel = null; var name:String = xml.name().localName; var scrolling:String， direction:String; name = StringUtils.trim(name).toLowerCase(); switch (name) { case "box": box = new BoxModel(); break; case "hbox": box = new HBox(); break; case "vbox": box = new VBox(); break; case "img": box = new Img(); break; case "button": box = new SmartButton(); break; case "toggle": box = new SmartToggle(); break; case "html": scrolling = xml.@scrolling; scrolling = StringUtils.trim(scrolling).toLowerCase(); switch (scrolling) { case "horizontal": box = new Scrolling(Scrolling.HORIZONTAL);
break; case "vertical": box = new Scrolling(Scrolling.VERTICAL); break; default: box = new HTML(); break; } break;
。。。。。。
使用 ExternalInterface调用 Windows Media Player
包含 MP3、 WMA混播播放列表
› Strategy与 Factory的运用
› interface IAudioController› IAudioController =
AudioControllerFactory.getInstance().getAudioController(track.musicType);› IAudioController.play();… etc.
HTML： OBJECT被多处引用 使用 Javascript Namespace避免冲突
var MyspacePlayer = {};MyspacePlayer.player = {};MyspacePlayer.control = {};MyspacePlayer.events = {};
MyspacePlayer.control.setURL = function(value){MyspacePlayer.player.URL = value;
};
MyspacePlayer.control.play = function(){if(MyspacePlayer.player.controls.isAvailable('Play')){MyspacePlayer.player.controls.play();
}};
Video、 Audio分开，单独统计
统计听了 1s/30s/听完整首歌等等数据
Thank you.