嵌入媒体 | Embed Media

通过使用内联框架元件,我们可以将YouTube视频、Google地图和其他媒体嵌入到原型页面中。

注意:本教程所列出的步骤可用于嵌入大多数Web托管的内容,要了解嵌入本地文件的相关内容,请参阅内联框架元件文档。

STEP 0:下载练习文件

如果你还没有练习文件,请下载Axure Training.rp并在Axure RP中打开它,该文件包含了Axure培训网站上每个教程的对应页面。我们建议你始终使用我们准备好的文件来学完教程,但是如果你无法保证,那也没有关系,我们也会告诉你在不使用Axure Training.rp文件的情况下,如何创建新文件来完成教程。

设置

在练习文件中打开“嵌入媒体”页面,在画布上有两个“内联框架”元件,我们将在其中一个嵌入YouTube视频,在另外一个嵌入Google地图。

YouTube视频
STEP 1:从YouTube获取要嵌入的URL

在你的Web浏览器中,打开www.youtube.com然后再打开你想要使用的视频,在视频的下方,点击“分享”按钮,然后在弹出界面的底部,点击“嵌入”按钮,在弹出的新界面右侧的代码中,找到“src”,然后复制后面引号中的内容。

STEP 2:设置内联框架目标到该URL

回到Axure RP中,选择“视频框架”元件,在检视窗格中的属性页签下,点击“选择框架目标”来设置内联框架的目标,你可以通过双击内联框架来实现同样的操作。

在链接属性对话框中,选择“链接到url或文件”,然后将从YouTube复制的URL粘贴到“超链接”文本框中。

这时候,你可以使用YouTube的“自动播放”、“开始”、“结束”参数来自定义视频在Web浏览器中的工作方式。

如果你想视频在加载后立即播放,可以在嵌入的超链接尾部加上“?autoplay=1”。

注意:自动播放在移动设备上不起作用。

如果你想视频在特定的时间点处播放,在超链接尾部加上“?start=”和特定的秒数,例如要在1分30秒处播放,那么你可以加上“?start=90”。

如果你想视频在特定的时间点处停止播放,则加上“?end=”和特定的秒数。

如果你想同时使用以上两个或更多的标签,需要用“&”来分隔它们,举个例子:“?autoplay=1&start=90”。

当你完成超链接的配置后,点击“确定”按钮关闭链接属性对话框。

STEP 3:设置预览图片

在“视频框架”元件被选中的状态下,滚动到检视窗口中属性页签的底部,在“预览图片”下,选择“视频”。

这样可以使得内联框架在画布上显示一个播放按钮的预览图片,以便可以提示嵌入的媒体类型。

STEP 4:预览

预览页面,在您的Web浏览器中观看嵌入的YouTube视频。

Google地图
STEP 1:从Google地图获取要嵌入的URL

在你的Web浏览器中,打开www.google.com/maps,搜索你想使用的地址或位置,然后点击搜索框左边的汉堡包图标以打开菜单,在菜单的第二部分点击“分享或嵌入地图”。

在弹出的界面中,点击“嵌入地图”选项卡,该选项卡将在右上方显示高亮的HTML嵌入代码,在代码中找到“src”属性,选择该属性后面引号中的URL,需要注意的是,URL会很长,务必要选择完整,然后复制URL。

STEP 2:设置内联框架目标到该URL

回到Axure RP中,选择“地图框架”元件,在检视窗口中的属性页签下,点击“选择框架目标”来设置内联框架的目标,你也可以通过双加内联框架来实现该操作。

在链接属性对话框中,选择“链接到url或文件”,然后将从Google地图复制的URL粘贴到“超链接”文本框中。

点击“确定”按钮关闭链接属性对话框。

 

STEP 3:设置预览图片

在“地图框架”被选中的状态下,滚动到检视窗口中属性页签的底部,在“预览图片”下,选择“地图”。

这样可以使得内联框架在画布上显示一个地图的预览图片,以便可以提示嵌入的媒体类型。

STEP 4:预览

预览页面,在你的Web浏览器中查看嵌入的Google地图。

评论(0)

发表评论

电子邮件地址不会被公开。 必填项已用*标注