如果在使用Axure制作原型时需要插入视频该如何操作呢?这篇分享将介绍在Axure中插入视频的3种方法,并提供示例源文件和演示文件下载供大家进行学习。首先大家可以通过演示链接查看插入视频的3种原型效果,然后我会对3种方法展开进行详细介绍。
演示链接:Untitled Document
1.内联框架元件设置
在Axure中插入视频都需要用到内联框架元件,我们需要先从Axure的元件库中将内联框架元件拖动到内容编辑区域。
然后选中内联框架元件,在右边的元件属性中对内联框架作如下的设置:框架滚动条设置为“从不显示”,同时将“隐藏边框”选项勾选上;
内联框架的尺寸就是视频显示的尺寸,可以根据自个的需要进行调整。内联框架设置完成以后就可以开始插入视频了。
2.插入视频网站链接
第1种方法是插入视频网站的链接,支持优酷CIBN酷喵影视、腾讯视频等主流的视频网站。首先我们需要先从视频网站中获取到对应的URL链接,例如我们将视频上传到优酷CIBN酷喵影视上面以后,会生成一台对应的播放页面,视频链接需要从这个播放页面中获取。
播放页面:阿里巴巴2017年11.11全球购物节的亮点
打开上面的播放页面在播放器的左下角有一台分享按纽,鼠标移入到这个按纽上面会弹出分享界面。然后点击其中的“复制通用代码”按纽完成复制,再将复制的代码使用CTRL+V粘贴到记事本中。我们会看到这串代码中有一台src标签,这个标签里面的URL地址就是我们的视频链接。
http://qr.youku.com/pr?c=O81fmZBvit (二维码自动识别)
视频链接:Youku Universal Player
获取视频链接以后将地址插入到内联框架中,插入方法:选中内联框架元件右击或在右侧属性中点击“选择框架目标”弹出下面的界面,然后将视频链接地址加入到超链接即可。
到此为止插入视频的操作就算是完成了,上面介绍的是从优酷CIBN酷喵影视中获取视频播放链接为例,其它的视频网站的获取方法也基本类似。补充说明一下的是,优酷CIBN酷喵影视分享里的三个分享代码里面都可以获取到对应的视频链接的,但其中第1个链接是HTML5播放器的视频链接,兼容性效果最好,后面2个是FLASH播放器的链接,兼容性要差一些。
3.直接插入视频文件
接下来介绍在内联框架中插入视频URL链接和本地视频文件。如果你已经有了一台视频URL链接,直接在框架目标中插入超链接就可以了。但是如果我们需要插入本地的视频文件,要先在框架目标中设置视频文件的路径和文件名称,然后生成原型文件后将视频文件拷贝到原型目录里。路径的设置方法如下:
注意,使用这种方式插入视频文件是无法在预览中查看的,必须需要生成原型文件后将视频文件存放在原型目录内才能查看,否则会因为找不到文件而导致视频无法播放。大家下载示例文件后,在演示文件目录中可以看到一台“视频文件”文件夹,这个文件夹就是根据框架目标设置的路径所创建的,里面的video.mp4就是我们所需要插入的视频文件。
另外,使用这种插入视频的方式虽然很简单,但并不是特别推荐,因为在部分浏览器中会存在兼容性问题,打开时会提示保存视频文件而不是播放。
4.插入视频播放页面
插入视频播放页面跟上一种基本类似,但是需要单独制作一台播放页面。这种方法插入的视频不存在浏览器兼容性问题,而且可以对播放器进行定制设置。首先需要同样在内联框架的框架目标中设置好播放页面的路径和文件名,然后生成原型文件后将相关文件拷贝到原型目录里。
这种方法的视频也是无法在预览中查看的,需要先生成原型文件后将对应的文件存放在原型目录内才能查看。
播放页面的制作方式就不详细介绍了,示例文件中已经有制作好的播放页面文件。大家下载示例文件后,在演示文件目录的“视频文件”文件夹内中可以看到3个文件,video.html是播放页面,video.jpg是视频封面图片,video.mp4是视频文件,这是所需的相关文件。
如果我们需要对播放器进行定制设置,可以用记事本打开其中的播放页面video.html文件,对其中的HTML代码进行修改。其中主要的代码就是HTML5的<video>视频标签,修改这个标签中的相关属性值就可以实现想要的效果了。
<video>标签里面可以设置视频是否自动播放、是否显示播放控件、加载封面图片、是否循环播放等,具体可参照下面的属性列表。另外,标签中设置的宽度和高度需要与内联框架的宽高保持一致。
以上就是关于Axure中插入视频的3种方法的介绍,下面有提供示例文件的下载地址,大家有不清楚的地方可以参考一下,或者加入我们的交流群进行交流。这篇分享中重点介绍了Axure中内联框架这个元件的使用,其实它还可以有更多灵活的运用,使用相同的方法还可以在原型中插入动态图表、动态地图等更丰富的效果。
示例下载:https://pan.bAIdu.com/s/1IFkU-9iGp-PQ--kYa-T0SQ |