一个AXURE音乐&视频播放插件

这是一款基于Axure的插件，主要用于在Axure中插入音频或视频文件。

最近利用闲暇在做一款高保真的原型，为了尽可能还原这款APP的各种交互设计，在涉及到音乐播放的时候做了这款独立插件。或许你有疑问，Axure自带的内联框架可以加载媒体文件实现播放效果，为什么还要多次一举呢？
事实上，内联框架的确可以加载媒体文件，但是其使用限制太大，体验十分不友好，比如：无法控制媒体文件的播放与正常暂停、在移动端的播放没有声音等。如果你看过博主之前发布的关于网易云音乐Axure原型的文章，你就会体会到只有画面没有声音的内联框架播放器。
本文提供的方法是博主自创，插件的主要原理是基于Axure加载外部文件的接口来加载一段JS代码。

效果预览

基本原理

1. 页面载入加载一个外部JS
2. 遍历指定元素，获取指定的媒体url
3. 根据媒体文件类型动态插入video或audio标签
4. 给指定元素绑定事件：比如播放按钮事件、暂停时间等

如你所见，插件的基本原理是基于JS代码实现的，对产品童鞋来说，这些代码除非特别感兴趣否则了解即可，既然是插件，那么只要拿来简单上手可用就OK了。

插件使用

此插件使用极为简单，暂时提供音视频的播放与暂停，博主会根据反馈再考虑是否在接下来继续追加功能。

插件兼容性

插件引入

1.如前文所述，首先在需要加载播放器的页面设置一个页面载入事件：
打开链接-Link to external URL 值为：

javascript:var script = $(''); $('head').append(script); 

此步骤设置完成，插件即在该页面运行。

Axure元件设置

在引入插件后我们还需设置Axure的元件，此设置除非你修改了插件代码，否则请严格按照下列参数设置。
1.拖动一个样式为矩形2的矩形到页面作为播放器，大小不限，不可隐藏
2.给矩形严格命名为：lylares_player_frame，该名称不能为任何其他
3.将需要播放的媒体文件url作为文本内容填充在上一步矩形2中，矩形中只能填此url不可添加其他内容

4.拖动一个主要按钮作为播放按钮，严格命名为：lylares_play

5.拖动一个主要按钮作为暂停按钮，严格命名为：lylares_pause

以上元件命名不可更改。元件样式不限制，只需注意播放器矩形不能隐藏，博主建议将播放器矩形以背景色填充，同时文字颜色也修改为背景色，这样达到隐藏播放器的效果。

已知问题

该原型在PC端的火狐及IE浏览器下无法正常显示，在Edge和Chrome下正常，其他浏览器暂未测试。
移动端主流浏览器都完美兼容。

关于Axure加载JS，可参考：

定制开发

接受各种定制开发，微信咨询:

前往查看

赞助支持