添加音频/视频/地图

添加音频

想要原型在运行时播放一段背景乐?没有问题,下面教程就来告诉你怎么使用网页组件为你的原型加上 BGM。

网页组件特性

双击输入想要展示的网页完整URL

只能预览 https 协议的网页,并且是该网站允许被嵌入其他网站。

组件尺寸影响预览时网页展示区域大小,也就是网页内容只会在此组件内部显示。

具体制作方法       

1. 访问 http://music.163.com,找一首你中意的歌,比如下面这首:

2. 然后点击上图唱片下方的「生成外链播放器」,并滚动到最下方:

0016073e9454c5bb36c217e72b0c1f9

找出这段代码里的网址,也就是://music.163.com/outchain/player?type=2&id=109566&auto=1&height=66

将其前面补充上 https:  ,即完整的网址为:https://music.163.com/outchain/player?type=2&id=109566&auto=1&height=66

然后先保存这个网址。

3. 现在进入墨刀工作台,从组件栏拖动一个网页组件,然后将网址设为上面我们得到那个播放器的地址,也就是:

https://music.163.com/outchain/player?type=2&id=109566&auto=1&height=66

现在点击运行,在运行界面点击音乐组件上播放按钮,你应该已经可以听到音乐响起了。

0016073eab445f460b3c72ba24487a2

经测试此方法目前不适用移动客户端。


添加视频

在墨刀,使用“网页”组件即可实现在原型中嵌入在线视频。 

步骤

1  添加一个网页组件

0016073ebfd986b251d3381cfcb1cf5

(注意:“网页”组件只能预览 https 协议、且允许嵌入外部网站的网页) 

2  获取视频网址链接

找到你想要嵌入的视频,比如: http://v.qq.com/cover/6/6s43hce44m100rd.html?vid=w0021e4ijb4

然后点击视频下方的分享按钮:

0016073eafeacec9e5d9494a0929067

选择通用代码

<iframe frameborder="0" width="640" height="498" src="http://v.qq.com/iframe/player.html?vid=w0021e4ijb4&tiny=0&auto=0" allowfullscreen></iframe>

找出里面的视频地址: http://v.qq.com/iframe/player.html?vid=w0021e4ijb4&tiny=0&auto=0

然后将 http 替换为 https,然后拖入网页组件,输入这个网址:

0016073eb5c97c7d75490d2fff07f9e

3 点击“运行”

在预览页面即可看到视频。

 

添加地图

在墨刀,可以使用“网页”组件来添加地图。

注意:“网页”组件只能预览 https 协议、且允许嵌入外部网站的网页。

 0016073ebfd986b251d3381cfcb1cf5

使用“腾讯地图”来添加地图

步骤

1. 使用你的 QQ 号登录腾讯地图开放平台: http://lbs.qq.com/

(腾讯给每个用户分配了不同的key,所以不能直接复制本案例里或其它人给的url,需要登录自己的账号一步步按教程操作。) 

2. 在官网顶栏,点击「开发文档」,选择地图组件查看详情:

0016073ece762bcdb82d4b136b9edff

然后在地图组件页内会有一个「调用地址」部分会看到这样一个 URL:

http://apis.map.qq.com/tools/poimarker?type=0&marker=coord:39.96554,116.26719;title:成都;addr:北京市海淀区复兴路32号院|coord:39.87803,116.19025;title:成都园;addr:北京市丰台区射击场路15号北京园博园|coord:39.88129,116.27062;title:老成都;addr:北京市丰台区岳各庄梅市口路西府景园六号楼底商|coord:39.9982,116.19015;title:北京园博园成都园;addr:北京市丰台区园博园内&key=YOUR_KEY&referer=myapp

4. 将这个 URL 中的 http 替换为 https,然后将里面的地址替换为你想要展示的地址,然后进入墨刀,拖拽一个网页组件,将组件的 URL 设为上面的 URL 就可以了:

https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:39.9416682,116.393692;title:鼓楼;addr:北京市鼓楼东大街;&key=MY_MAP_KEY&referer=myapp

如果需要更复杂的功能,也可以根据腾讯地图的文档实现更复杂的地图展示。