前言

在做高保真原型的时间，很多情况下是需要视频调用和视频展示。通常情况下可以用内联框架调用HTML的页面实现视频的调用展现，但这样的话只有发布生HTML的时间才能看到效果。那有没有方法可以实现在Axure预览时实现调用？

方法是有的，由于Axure支持内行JS 可以通过jquery的方法实现视频播放。

编辑HTML文件

HTML有video标签，支持视频播放。先写个简单的带有video的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="https://zrx-1300915009.cos.ap-shanghai.myqcloud.com/zrx/signal.mp4" type="video/mp4" /> 
</video>
</body>
</html>

其中video标签的说明如下，可以自己调整相关的参数
​​在这里插入图片描述

Axure界面操作

要Axure拖入个矩形，复制HTML的代码到矩形框里，并设置矩形名称为video
在这里插入图片描述
设置事件，【载入时】打开链接，设置行内js。
在这里插入图片描述
链接如下：

javascript:$(document).ready(function(){$('[data-label=video]').each(function(){$(this).html($(this).find('p').text())})});

预览后的效果如下：
​​​在这里插入图片描述

其他问题

1、如果是src=url链接，预览就可以播放。若是本地文件要发布才能预览；

2、如果是本地文件，视频路径最好不要带中文，不然会报错，本地文件的格式为“file:///D:/Downloads/xxx.mp4”；

3、如果是chrome设置的“autoplay”属性不能自动播放，可以增加muted=“muted”的方法解决

# javascript # html5
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

cover

动物识别系统 python实现+UI

avatar 腾讯云开发者社区

Linux下安装MySQL8.0(超详细)

Linux下安装MySQL8.0(超详细)

avatar 腾讯云开发者社区
cover

安卓手机如何连接苹果电脑

avatar 腾讯云开发者社区