SiMa Blog

  • 文章
  1. 首页
  2. 文章
  3. Axure
  4. 正文

Axure+javascript嵌入视频(二)

2021年12月26日 2321点热度

视频作为多媒体重要组成部分,在原型设计时,也会时常使用,本文将通过Axure内置API函数和视频标签实现视频的引用嵌入;

前言

在Axure+javascript嵌入视频(一)一文中通过html()方法嵌入视频,提及有两个缺点:

  1. vedio的参数没有二次提取参数化,修改起来不方便;
  2. axure文本看起来不美观;

针对以上两个问题,进行嵌入方法的修改

1、设置全局变量

在菜单上的【项目】->【全局变量】里设置vedio便签的五个全局变量,并设置默认值(一定要设置,不然会报错);
全局变量

videoAutoPlay:用于定义视频是否自动播放;

videoLoop:用于定义视频是否循环播放;

videoMuted:用于定义视频是否静音播放;

videoControl:用于定义视频是否带有控件;

videoSrc:用于定义视频的http地址

2、视频嵌入

2.1、容器创建

拖入矩形元件,作为视频承载的容器,并命名为"video"(可以自定义其他名字,但要和后边的代码里一致)
容器创建

2.2、代码注入

2.2.1、增加交互事件

设置交互事件,【载入时】打开链接【链接到】,点击【fx】出现编辑框。
交互事件

2.2.2、代码编写

【FX】编辑器的代码如下:
1. javascript变量创建与全局变量引用

javascript:
var videoWidth=axure("@video").width();
var videoheight=axure("@video").height();
var autoPlay=("[[videoAutoPlay]]"=="true")?" autoplay='autoplay' ":"";
var loop=("[[videoLoop]]"=="true")?" loop='loop' ":"";
var muted=("[[videoMuted]]"=="true")?" muted='muted' ":"";
var control=("[[videoControl]]"=="true")?" controls ":"";
var Src="[[videoSrc]]";
  1. video标签创建
var videohtml="<video width='"+videoWidth+"' height='"+videoheight+"' "+ autoPlay+loop+muted+control+"source src='"+Src+" '/>";
  1. 标签嵌入
var dom=axure("@video").();
dom.empty();
dom.append(videohtml);

video标签

3、 其他

axure8 demo下载
点击此处下载(访问密码:9209)

相关文章:

  1. Wordpress折腾之修改Wordpress文件上传类型限制
  2. Axure+javascript嵌入视频(一)
  3. Axure API 对象常用函数一
  4. Axure API 目录列表
  5. Axure+javascript嵌入图表之Echarts图表
标签: Axure 视频
最后更新:2022年4月6日

司马陵空

小小分享,共同进步

打赏 点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复
分类
  • Axure
  • docker
  • Hass
  • Kodi
  • linux
  • Python
  • Wordpress
  • 其他
  • 未分类

COPYRIGHT © 2021 www.sima.link ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

浙ICP备2021033974号