如何在H5页面中加入视频控制功能

很多朋友已经可以成功的在微信H5页面中加入视频,但是如何在视频中加入控制按钮呢,现在来讲下用Mugeda在线工具来设置这一功能。

工具/原料

在线工具

需要添加视频的H5页面

方法/步骤

首先进入在线工具,并打开H5动画或者新建。

如何在H5页面中加入视频控制功能

先看下动画中的第一页:

如何在H5页面中加入视频控制功能

舞台上通过工具条里的视频按钮添加了一个视频控件,给其命名为"a",其属性设置为:“隐藏播放按钮”为“否”,“隐藏控件”为“否”,“自动播放”为“否”,“点击后”为“切换播放暂停”。

并给该视频控件添加行为两个跳转并停止的行为,触发条件分别为“视频开始和“视频结束”,分别跳转到第二帧和第三帧。如图:

如何在H5页面中加入视频控制功能

然后在舞台上放三个按钮,并给他们设置视频控制行为:

如何在H5页面中加入视频控制功能

行为参数设置中,“视频名称”选“a”,“控制方式”分别为“暂停”、“播放”、“停止”。

如何在H5页面中加入视频控制功能

预览后。会看到视频开始没有自动播放,点击视频,切换到播放状态,再次点击会暂停,点击下面的三个按钮也可以控制视频的暂停、播放和停止。同时,视频开始会触发跳转到第2帧的“跳转并停止”行为,视频结束会触发跳转到第3帧的“跳转并停止”行为。其中需要注意的是“视频开始”事件触发的行为只会触发一次,暂停或停止后再次播放并不会再次触发。

第二页:也要放置一个视频,其属性设置与第一页视频的不同:“隐藏播放按钮”为“是”,“隐藏控件”为“是”,“自动播放”为“是”,“点击后”为“播放”。其他部分都和上一页动画一样,如图:

如何在H5页面中加入视频控制功能

预览时,翻到这一页会看到视频会自动播放,点击视频,只会又暂停或停止状态转换为播放状态,如果已处于播放状态再次点击不会有变化。下面的三个按钮和第一页完全相同也可以控制视频的暂停、播放和停止。同样,视频开始会触发跳转到第2帧的“跳转并停止”行为,视频结束会触发跳转到第3帧的“跳转并停止”行为。

如何在H5页面中加入视频控制功能

注意事项

用了在线工具后还是很同意就可以实现的,也可以根据自己的喜好设置不同的参数看看效果。

相关文章

  1. Html5如何把视频作为页面背景:[1]Html5

    介绍用html5 video标签,把页面的背景设置成为视频 工具/原料 chrome 方法/步骤 新建一个带vedio标签的页面,被给vedio的source加上视频连接 在浏览器中打开,发现一片漆黑,因为视频没有被打开.要给video加上autoplay的属性. 如果不需要声音,就加上muted ...

  2. IOS10.0要不要升级?

    IOS9.0之后,不出一年,IOS10.0来袭,那么,IOS10.0到底应该不应该升级?想要尝鲜的伙伴们,一定要好好看看这篇小技巧哦~ 方法/步骤 一,防骚扰,这个功能是中国用户独有的哦,因为苹果和腾讯公司合作,专门在IOS10中加入了防骚扰功能,来电会提示是营销,骚扰还是广告电话,很实用吧. 二. ...

  3. 猎豹浏览器手机版怎么样

    猎豹浏览器是国内著名安全厂商金山开发的一款网页浏览器产品,主打酷炫.安全.快速.继 PC 端浏览器之后,金山再度发力,在手机端也相继发布猎豹浏览器手机版.猎豹浏览器手机版同样拥有如 PC 端一样的酷炫界面,页面流畅,主打视频即时观看,可直接在网页内观看及下载视频. 方法/步骤 快捷悬浮按钮 猎豹浏览 ...

  4. FireFox扩展插件

    FireFox扩展插件 方法/步骤 标签页管理 All-in-One Gestures - 多合一鼠标手势,集合了流行的滚动.导航等方位插件的鼠标手势. Tabbrowser Preferences - 增强式标签页浏览扩展,提供一个很全面的图形界面,以便让用户能够 轻松更改Firefox中的隐藏设 ...

  5. 如何在淘宝中加入音频按钮

    很多淘宝卖家想在宝贝详情页面中加入音频,以吸引顾客. 淘宝已经推出了视频功能,却没有音频功能,我们该怎样来改变呢 方法/步骤 我们先将想要的音频,以视频的格式上传到淘宝视频中,或者在优酷中也可以 注:如果是纯音频,必须用会声会影或PR随便配上影音或图片,才可以上传 我们这里以优酷为例. 上传好以后, ...

  6. 怎么在PPT中加入/插入本地视频

    一段视频,更能让被提案方,快速了解自己:一份加入了视频的PPT,可以让有限的时间内向目标人传达更详细的信息. 以下介绍如何在Microsoft Office PowerPoint 2013中插入/加入本地视频. 工具/原料 正版Microsoft Office PowerPoint 2013 PC本 ...

  7. 智能电视怎么玩

    随着智能电视的发展,越来 越多的用户抛弃了传统的功能单一的电视机,投入了智能化的怀抱.智能电视与传统电视最大的不同就在于内容的获取方式,以前看电视只能电视台播啥你看啥,而 智能电视上想看什么完全取决于用户自己,这就是互联网带来的好处-开放.不过俗话说工欲善其事必先利其器,什么事情都要讲究一个方法,空 ...

  8. 如何在ppt文档中加入视频

    方法/步骤 随便打开一个ppt,点击插入,如图 点击影片的下面的菜单,如下: 选择你所要加入的视频,可以是电脑里的,也可以是外来的,如图 以电脑里的为例. 点击所选择的音乐,如图,点击确定, 这时系统会提醒你在何时播放视频,你可以根据自己的需要选择一个,如图 插入后你会在页面上看到这个的图标,说明已 ...

  9. 怎样在ppt中加入视频

    ppt是较常用的办公软件,在制作和使用ppt的过程中,经常会用到视频播放,特别是在教学ppt中,用视频播放教学片段,非常形象直观,通俗易懂,学生易于理解和掌握,那么在ppt制作过程中怎么插入视频呢?下面就让度娘教你制作过程,希望能帮助到大家. 工具/原料 电脑 ppt2007 方法/步骤 打开桌面p ...