1. 首页
  2. 教程
  3. 高级教程

Axure+javascript嵌入视频(一)

在做Axure高保真原型的时间,很多情况下是需要视频调用和视频展示。常用方法是通过内联框架调用HTML的页面实现视频的调用,但是这种方法只有发布HTML才生效。本文将介绍Axure通过js注入的方法实现视频的调用。
 

1、嵌入思路

HTML有video标签,支持视频播放。通过js注video标签实现视频调用。

2javascript注入实现

2.1、 编辑HTML文件

先通过文本创建个简单带有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>

2.2、 Axure界面操作

a、容量创建

要Axure拖入个矩形,将上一步的HTML代码粘贴到矩形内,设置矩形名称为video(可以自定义,需和后边的【data-label】一样),设置交互事件,【载入时】打开链接【链接到】,点击【fx】出现编辑框。


b、javascript编写

在编辑框里写入下边调用矩形的代码

Axure+javascript嵌入视频(一)

javascript如下:

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

3、video标签说明

其中video标签的说明如下,可以自己调整相关的参数

Axure+javascript嵌入视频(一)

4、效果

点击【预览】效果如下:

Axure+javascript嵌入视频(一)

5、其他问题

1、如果是src=url链接,预览就可以播放。若是本地文件要发布才能预览,若要将本地变成URL链接可以参考文章Nginx代理本地文件

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

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

原创文章,作者:院长大大,如若转载,请注明出处:https://www.axureschool.cn/1216.html

发表评论

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

评论列表(2条)

  • 2022年4月24日 下午6:26

    贴的js代码有点问题, (‘[data-label=video]’).each(function({
    这里错了

联系我们

在线咨询:点击这里给我发消息

邮件:fleede@163.com

工作时间:周一至周五,9:30-18:30,节假日休息