Axure嵌入视频--javascript(js)注入vedio标签

司马沉潇

已于 2023-09-07 17:02:41 修改

阅读量1.6k

点赞数

分类专栏： axure 文章标签： js 界面设计 ui设计 javascript html5

于 2020-11-01 11:53:54 首次发布

本文链接：https://blog.csdn.net/shirenkan/article/details/109413008

版权

axure 专栏收录该内容

7 篇文章 3 订阅

订阅专栏

前言

在做高保真原型的时间，很多情况下是需要视频调用和视频展示。通常情况下可以用内联框架调用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”的方法解决

司马沉潇

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
Axure嵌入视频--javascript(js)注入vedio标签

前言在做高保真原型的时间，很多情况下是需要视频调用和视频展示。通常情况下可以用内联框架调用HTML的页面实现视频的调用展现，但这样的话只有发布生HTML的时间才能看到效果。那有没有方法可以实现在Axure预览时实现调用？方法是有的，由于Axure支持内行JS 可以通过jquery的方法实现视频播放。编辑HTML文件HTML有video标签，支持视频播放。先写个简单的带有video的HTML。<!DOCTYPE html><html><head><me
复制链接

扫一扫