Axure播放视频的几种方法，制作高保真原型必备技能

网页上有视频是一件很常见的事情，但是Axure没有直接播放视频的控件，想要实现这个效果，我们可通过通过JavaScript代码方式或内联框架的方式实现，是制作高保真原型必备技能

Axure播放视频的几种方式

网页上有视频是一件很常见的事情，但是Axure没有直接播放视频的控件，想要实现这个效果，我们可以使用以下几种方式实现

方法一：使用JAVASCRIPT 实现视频播放

1、材料准备：制作视频容器

1.1、在页面中拖入一个矩形，矩形的宽高可根据原型页面占位大小自由设置，视频显示的大小会与矩形设置的大小一致
1.2、给刚才拖入的矩形命名，如本教程中的video，可自由命名，后续代码中会对应该命名

Axure播放视频的几种方法，制作高保真原型必备技能

2、视频准备：采集视频地址
2.1、优酷、爱奇艺等视频网站找到你要的视频或者上传一个视频
2.2、点击分享，复制html代码或通用代码

Axure播放视频的几种方法，制作高保真原型必备技能

2.3、双击矩形，将复制的代码黏贴到矩形框中

Axure播放视频的几种方法，制作高保真原型必备技能

——————————————————————————————————
2.4如果想播放本地视频文件或有独立的视频文件地址也可以直接编辑一个HTML文件代码复制到矩形框
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<style type=”text/css”>
*{<!– –>margin:0;padding:0;}
</style>
</head><body>
<video width=”520″ height=”350″ controls autoplay=’autoplay’ loop=’loop’>
<source src=”192.168.1.200/d/video.mp4″ type=”video/mp4″ />
</video>
</body>
</html>
如果是src=url链接，预览就可以播放。若是本地文件要发布才能预览；
如果是本地文件，视频路径最好不要带中文，不然会报错；
如果是chrome设置的“autoplay”属性不能自动播放，可以增加muted=“muted”的方法解决
——————————————————————————————————–

3、交互制作：通过JavaScript的代码将矩形变成播放器
3.1、点击矩形，新建交互，选择载人时打开链接，并选择链接到URL或者文件路径

Axure播放视频的几种方法，制作高保真原型必备技能

Axure播放视频的几种方法，制作高保真原型必备技能
3.2、在打开的编辑值框中输入以下代码并点击确定
javascript:$(document).ready(function(){$(‘[data-label=video]’).each(function(){$(this).html($(this).find(‘p’).text())})});

Axure播放视频的几种方法，制作高保真原型必备技能
3.3、这里需要注意的是data-label=video，这里的video是我们前面矩形命名的名字，如果你命名的不是video，那你就需要修改一下代码变成和矩形的名字相同即可。
3.4、点击axure预览查看效果

Axure播放视频的几种方法，制作高保真原型必备技能

其中：通用代码版-无广告、自动播放，html代码版–有广告、手动播放、需要flash插件支持

方法二：内联框架直接嵌入视频地址或HTML视频网页实现视频播放

1、材料准备：制作视频容器

1.1、在页面中拖入一个内联框架，内联框架的宽高可根据原型页面占位大小自由设置，视频显示的大小会与矩形设置的大小一致
1.2、设置内联框架从不滚动以及视频预览图

Axure播放视频的几种方法，制作高保真原型必备技能

2、视频准备：采集视频地址（如独立完整的视频文件地址可直接跳过此步骤）
2.1、优酷、爱奇艺等视频网站找到你要的视频或者上传一个视频
2.2、点击分享，复制html代码如：<embed src=”//player.video.iqiyi.com/ea3b9fa7d82745c39e12289714b0d93c/0/0/v_19rrfvse1c.swf-albumId=154379900-tvId=154379900-isPurchase=0-cnId=undefined” allowFullScreen=”true” quality=”high” width=”800″ height=”600″ align=”middle” allowScriptAccess=”always” type=”application/x-shockwave-flash”></embed>
2.3、截图代码里面的视频地址 //player.video.iqiyi.com/ea3b9fa7d82745c39e12289714b0d93c/0/0/v_19rrfvse1c.swf-albumId=154379900-tvId=154379900-isPurchase=0-cnId=undefined
2.4、在视频地址前面加上”http：” http://player.video.iqiyi.com/ea3b9fa7d82745c39e12289714b0d93c/0/0/v_19rrfvse1c.swf-albumId=154379900-tvId=154379900-isPurchase=0-cnId=undefined

3、交互制作：
3.1、双击内联框架，输入刚才带http的视频地址即可