FIM Media Player - BoxModel in Flash

Qizhi Zhang Myspace China Front-end Developer [email_address] [email_address]

整合音乐、视频点播、视频直播在线广告投放（视频模块）自定义皮肤用户数据分析

Layout Construction The preloader remains visible until Main has completed loading. Layout （ BoxModel ）、 Localized Resource 、 Playlist&Album Construction handles all the media related functionality

为什么不是有 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/ 听完整首歌等等数据

FIM Media Player - BoxModel in Flash

More Related Content

Featured (20)

FIM Media Player - BoxModel in Flash