【Axure教程】调用b站视频播放器
播放视频是很多平台软件都具备的功能,但是我们在制作原型的时候,Axure很难播放视频,一种是播放本地的视频,因为axure在预览的时候是不能打开本地的文件的,所以只能通过生成html并且通过内联框架打开本地视频的方式才能看到。但是这种方法很麻烦,第一是视频位置不能改变,别人需要在你的电脑上才能观看,不能通过网络分享;第二是修改之后每次都要重新导出才能看到效果,非常麻烦。那如果axure在看在线视频,一般我们也是用内联框架的方式打开对应网址,但是一般的网页除了视频,还有很多其他东西,我们的原型里面并不需要其他多余的东西。所以今天我们就来学习一下,在axure里面如何调用B站的视频播放器。
【原型预览】
用电脑点击左下方阅读原文或复制打开下面的原型预览地址
https://axhub.im/ax9/dbdf76c154a81ed4/#g=1&id=pq1v3n&p=b%E7%AB%99%E6%92%AD%E6%94%BE%E5%99%A8
【原型下载】
方式1:加入原型分享群后,可免费分享该原型,请咨询微信522073109
方式2:https://weidian.com/item.html?itemID=4026331708
【原型效果】
【制作教程】
1、Axure内材料准备
在axure里面,我们只需要矩形作为基本的元件,后续我们通过代码来讲矩形设置为播放器。
矩形的宽高可以自由设置,暂时当做一个占位符,制作完成以后,视频的大小就会和矩形的大小一样。
这里我们要给矩形命名为,案例中命名为code,你们可以自由命名,后续代码需要使用。
2、B站视频准备
我们可以看到上面矩形里面会有一行代码,那这行代码是怎么获得的呢?
在此之前,我们可以把我们需要播放的视频上传到b站,或者直接在b站找到合适的视频,点击分享按钮,然后我们可以看到一行叫嵌入代码,我们直接将代码复制到矩形内。
复制完成之后,我们还要增加两个参数width=”xxx” ;height=”xxx”,这两个是控制视频播放器的大小的,如果没有的话,他就会默认出现一个最小的播放器。里面具体的数值你们按照矩形的宽和高填写进去即可。
3、交互制作
接下载最后一步,我们还需要通过JavaScript的代码,才可以将矩形变成播放器。
我们在矩形载入时,增加交互,用打开链接的交互,选择链接到URL或者文件路径,在上面我们就可以输入以下代码
至于为什么这样输入,这需要一点代码的基础,如果你有这方便的知识自然一看就清楚了,但是如果你没这方便知识的话,我也很难给你解释清楚。你只需要简单里输入即可。这里需要注意的是data-label=code,这里的code是我们前面矩形命名的名字,如果你命名的不是code,那你就需要修改一下代码变成和矩形的名字相同即可。
这样以后我们就完成制作了,点击预览就可以看看视频播放器出现了,我们可以直接在我们的原型里观看视频了。当然我们这种做法除了在预览上面观看,也可以发布生成html、或者生成在线地址也可以观看,没有这么多的局限。
以上就是本期的全部内容了,感谢您的阅读,我们下期见~
【Axure教程】调用b站视频播放器相关推荐
- 引用腾讯视频 php代码,调用腾讯视频播放器APi代码
调用腾讯视频播放器APi代码 发布时间:2018-05-18 00:10, 浏览次数:685 , 标签: APi 转自:https://blog.csdn.net/boyit0/article/det ...
- 调用优酷视频播放器APi代码
调用优酷视频播放器APi <!doctype html> <html> <head> <meta charset="utf-8"> ...
- 调用腾讯视频播放器APi代码
调用腾讯视频播放器APi代码 <!doctype html> <html><head><meta charset="utf-8">& ...
- b站怎么改回html播放,b站视频播放器设置页面在哪里?怎么设置熄屏播放?怎么只播放声音?...
玩B站的小伙伴们最关注的就是最近有什么新的视频上线了,我关心的那些up主们有没有上传新的视频,还有就是最近火热的番剧更新到第几集了等等.我们在平常的视频观看中,大部分时间都是采用B站的客户端,也就是B ...
- Axure教程(B站宋老师)
一.线框图 原型图的作用: 1.描述互联网产品设计的文档 2.项目中,与相关部门(研发.设计)沟通需求的工具 3.敏捷开发中,简化版的需求文档(PRD.MRD) PRD(Production Requ ...
- Vue3视频播放器组件Vue3-video-play入门教程
Vue3-video-play适用于 Vue3 的 hls.js 播放器组件 | 并且支持MP4/WebM/Ogg格式. 1.支持快捷键操作 2.支持倍速播放设置 3.支持镜像画面设置 4.支持关灯模 ...
- java如何开发视频软件_使用JAVA编写视频播放器
Java因其跨平台优势而陷入困境. 当时,我以为"写一次,到处跑". 这听起来不错,它应该是所有语言开发的最终方法. Java必将统治世界. 事实证明当时我还太小. 所谓的鱼和熊掌 ...
- html调用优酷视频播放,优酷网视频播放器站外调用详解
优酷网视频播放器站外调用详解 蓝叶 网站设计 2011-03-21 14201 5评论 自从蓝叶准备做视频盒,就一直在研究各个视频站播放器调用代码,只要搞明白了 代码我都共享出 ...
- vue引入video视频播放器(视频调用代码范例)
vue引入video视频播放器(视频调用代码范例) VUE视频调用代码范例1: <template><div><div id="player"> ...
最新文章
- eclipse启动tomcat无法访问
- java-多线程-一道阿里面试题分析
- 物联网IoT接入技术分类以及华为OC平台特性
- ros(7)自定义service数据
- 信息学奥赛一本通 1088:分离整数的各个数 | OpenJudge NOI 1.5 28:分离整数的各个数位
- ubuntu 11.10下载和编译Android源码
- Android系统常用的权限
- 【InnoDB】体系结构
- 农用圆形打捆机行业调研报告 - 市场现状分析与发展前景预测
- hosts文件 端口_中望软件:中望3D网络版服务端如何固定端口
- 运动型蓝牙耳机什么牌子好、最适合运动的耳机
- 产品经理需要了解的概念【职位篇】
- 天勤——图选择题整理
- 【Matlab】彻底清除persistent变量
- 热炒了的《消防设施操作员》,想报考却为何冷中带静?
- 基于C++的社交应用的数据存储与实现
- Python execjs(执行js脚本)
- python 单词拆音节_y在单词或音节中间的单词有哪些?
- 项目开发技术点、困难点总结——2020-2021年
- 程序员面试中,有些问题要这样答