很多朋友已经可以成功的在微信H5页面中加入视频,但是如何在视频中加入控制按钮呢,现在来讲下用Mugeda在线工具来设置这一功能。
-
首先进入在线工具,并打开H5动画或者新建。
-
先看下动画中的第一页:
-
舞台上通过工具条里的视频按钮添加了一个视频控件,给其命名为"a",其属性设置为:“隐藏播放按钮”为“否”,“隐藏控件”为“否”,“自动播放”为“否”,“点击后”为“切换播放暂停”。
并给该视频控件添加行为两个跳转并停止的行为,触发条件分别为“视频开始和“视频结束”,分别跳转到第二帧和第三帧。如图:
-
然后在舞台上放三个按钮,并给他们设置视频控制行为:
-
行为参数设置中,“视频名称”选“a”,“控制方式”分别为“暂停”、“播放”、“停止”。
-
预览后。会看到视频开始没有自动播放,点击视频,切换到播放状态,再次点击会暂停,点击下面的三个按钮也可以控制视频的暂停、播放和停止。同时,视频开始会触发跳转到第2帧的“跳转并停止”行为,视频结束会触发跳转到第3帧的“跳转并停止”行为。其中需要注意的是“视频开始”事件触发的行为只会触发一次,暂停或停止后再次播放并不会再次触发。
第二页:也要放置一个视频,其属性设置与第一页视频的不同:“隐藏播放按钮”为“是”,“隐藏控件”为“是”,“自动播放”为“是”,“点击后”为“播放”。其他部分都和上一页动画一样,如图:
-
预览时,翻到这一页会看到视频会自动播放,点击视频,只会又暂停或停止状态转换为播放状态,如果已处于播放状态再次点击不会有变化。下面的三个按钮和第一页完全相同也可以控制视频的暂停、播放和停止。同样,视频开始会触发跳转到第2帧的“跳转并停止”行为,视频结束会触发跳转到第3帧的“跳转并停止”行为。
-
用了在线工具后还是很同意就可以实现的,也可以根据自己的喜好设置不同的参数看看效果。
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。