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

发布于 / 教程 / 2 条评论

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

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

效果预览

效果图

基本原理

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

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

插件使用

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

插件兼容性

此插件博主暂时是基于Axure9 Beta完成的,Axure8及以下暂未测试,理论上是可以支持的。

插件引入

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


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

添加JS
此步骤设置完成,插件即在该页面运行。

Axure元件设置

在引入插件后我们还需设置Axure的元件,此设置除非你修改了插件代码,否则请严格按照下列参数设置。
1.拖动一个样式为矩形2的矩形到页面作为播放器,大小不限,不可隐藏
2.给矩形严格命名为:lylares_player_frame,该名称不能为任何其他
3.将需要播放的媒体文件url作为文本内容填充在上一步矩形2中,矩形中只能填此url不可添加其他内容
插入播放器
4.拖动一个主要按钮作为播放按钮,严格命名为:lylares_play
插入播放按钮
5.拖动一个主要按钮作为暂停按钮,严格命名为:lylares_pause
暂停
以上元件命名不可更改。元件样式不限制,只需注意播放器矩形不能隐藏,博主建议将播放器矩形以背景色填充,同时文字颜色也修改为背景色,这样达到隐藏播放器的效果。

已知问题

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

关于Axure加载JS,可参考:

自定义Axure的JS和CSS以实现Material Design的波浪特效

最近在写一个全新的谷歌材料设计 Material Design风格的WEB产品,在开发过程中将产品原型做成了Axure元件库,当然目前没有完全完成。本文将以实现谷歌材料设 ...
https://www.lylares.com/customize-axure-js-and-css-for-material-design.html

关于网易云音乐Axure原型可参考:

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

首先,这不完全是一篇全新的利用axure实现网易云音乐APP播放效果的文章,原始文章在去年已经发布过,你可以参考去年的原文: 网易云音乐Axure实现2018.03.1 ...
https://www.lylares.com/a-axure-media-player-plugin.html

关于解压密码:需评论本文 待收到评论邮件通知后刷新此页面,密码在此处自动显示。


转载原创文章请注明,转载自: LYLARES'S BLOG » 一个AXURE音乐&视频播放插件
  1. avatar

    站长你好: 我想单独定制一个youtube的解析 望回复

    1. lylares
      @Intouchables 你需要定制成什么样的啊,可以邮件我。