在使用Towify制作小程序时，如何配置点击图标播放/暂停视频？

最新推荐文章于 2024-04-28 04:05:38 发布

Towify

最新推荐文章于 2024-04-28 04:05:38 发布

阅读量153

点赞数

分类专栏： Towify使用教程文章标签：微信小程序编辑器

本文链接：https://blog.csdn.net/Towify/article/details/127298350

版权

本文详细介绍了如何在Towify编辑器中，通过创建激活和取消激活触发器，以及配置Play和Pause图标点击触发器，实现微信小程序中视频的播放和暂停功能。

摘要由CSDN通过智能技术生成

你需要在视频组件上创建 激活/非激活 两种状态 触发器 以对应播放/暂停两种状态，再通过播放/暂停图标上的点击触发器呼叫 激活/非激活 的状态，以实现视频播放暂停的功能。

效果展示：

前置准备：

用于播放的的视频文件（目前 Towify 支持视频的格式为ogv、mp4、m4v、webm、mov、3gp）

添加视频组件

选中 视频组件
点击 上传视频

视频组件配置激活触发器

选中 视频组件
点击右侧 检查器 面板的 触发器 图标
创建 激活触发器
配置 激活触发器

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Towify

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

如何使用Towify在小程序中配置悬浮层滑动进入动画？

Towify的博客

10-10

325

本文将一步一步教你如何实现一个从底部滑动进场的交互方式显示悬浮层。

如何使用 Towify 在小程序里实现一个广告轮播图？

Towify的博客

10-21

250

下面就如何实现一个广告轮播图来进行具体操作。欢迎大家试用我们的无代码开发平台 Towify 制作自己的微信小程序。

参与评论您还未登录，请先登录后发表或查看评论

小程序点击图片实现自动播放视频

10-17

主要为大家详细介绍了小程序点击图片实现自动播放视频，停止上一个视频播放，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

小程序视频点击video暂停/开始

YiMiMMMi的博客

07-16

1240

<image src="/images/play_.png" bindtap='videoTap' wx:if='{{isPause}}' class="img_"></image> <video class="video" id="myVideo" src="{{videoUrl}}" autoplay="{{player.autoplay}}" controls="{{false}}" loop="player.loop" show-fullscreen-btn=..

小程序双击暂停事件分别给播放和暂停一种状态处理两种状态下的不同情况...

测试0901-1

06-01

1338

<video id="my-video" src="{{currentVideo.file_url}}" @timeupdate="timeupdate" custom-cache="{{false}}" show-center-play-btn="{{false}}" controls @fullscreenchange="fullScreen" @tap.native=&

小程序点击播放/暂停视频

李湘湘的博客

03-22

365

【代码】小程序点击播放/暂停视频。

uniapp小程序点击按钮打开图片/全屏播放视频组件

greendx的博客

11-22

4187

uniapp小程序点击按钮打开图片/全屏播放视频组件

如何使用Towify在小程序中实现夜间模式和日间模式的自由切换？

Towify的博客

10-13

437

使用Towify在小程序中实现夜间模式和日间模式的自由切换非常简单，操作如下。

如何在小程序里配置自定义悬浮层？

Towify的博客

10-11

773

使用Towify在微信小程序里配置自定义悬浮层的操作非常简单。文章中给出了非常详细的步骤，欢迎大家试用。

微信小程序开发中的视频播放和直播功能

最新发布

qq_67153941的博客

04-28

804

微信小程序支持利用<video>组件进行视频播放和直播功能。下面将为您提供一个详细的代码案例，从设置页面到实现视频播放和直播，以及一些常见的功能和操作。

在Towify使用时，如何设置回退到上一个界面？

Towify的博客

10-14

162

设计交互时，需要跳转到下一个界面，也需要能从下一个界面回退到上一个界面。这个时候就需要先完成界面的跳转，再在跳转后的界面配置触发器，回退到上一个界面。效果展示：前置准备：一个跳转前的界面 (下文简称“ 界面A ”)一个跳转后的界面 (下文简称“ 界面B ”)一个你所需要跳转界面的组件 (下文简称“ 组件A ”)一个在跳转后界面你所需要实现回退界面的组件 (下文简称“ 组件B ”)步骤分解：创建跳转触发器点击界面A选中组件A点击检查器面板的触发器图标添加触发器

如何使用Towify在小程序中配置获取邮箱验证码？

Towify的博客

10-10

264

使用Towify在小程序中配置获取邮箱验证码的操作非常简单，文章中给出了详细的步骤，想要自己制作小程序的朋友们可以关注一下。

如何制作一个侧边栏

Towify的博客

11-17

186

本文介绍了如何使用Towify在微信小程序中如何制作一个侧边栏，欢迎大家试用我们的无代码开发平台Tofiwy制作微信小程序。

如何使用 Towify 在小程序中创建关联表？

Towify的博客

10-20

123

本文详解了使用 Towify 在小程序中创建关联表的步骤。欢迎大家试用我们的无代码开发平台 Towify。

微信小程序video自定义播放与暂停按钮

苏苏就是小苏苏的博客

08-06

6259

1.实现效果 2.实现原理官网：https://developers.weixin.qq.com/miniprogram/dev/component/video.html 相关API:wx.createVideoContext(string id, Object this) 属性： 3.此demo所用到的属性有 controls：是否显示默认播放控件（播放/暂停按钮、播放进度、时间） muted：是否静音 show-play-btn：是否显示视频底部控制栏的播放按钮 show-center-pl

小程序video自定义播放按钮

qq_42975998的博客

04-08

9974

html: <video show-center-play-btn="{{false}}" controls="{{false}}" id="video" src='{{article.video}}'></video>  <view class='video-play'> ...

自定义微信小程序视频组件播放按钮

热门推荐

u014477038的专栏

03-12

1万+

小程序的视频组件没有隐藏播放按钮的属性，但是看了爱奇艺的小程序，发现他们可以自定义播放按钮，这就比较奇怪了，官方不提供，还能实现，一定有办法，于是想了很久，突然想到，可以在video组件里面嵌套两个cover-image，一个用来存放播放按钮，另外一个用来存放视频封面图，写好之后，又发现了新问题，网络比较慢的时候，封面图加载不及时，还是可以看得到原生的播放按钮。于是仔细研究了爱奇艺的小程序，原来在...

微信小程序视频播放，点击视频大屏展示预览

stars______的博客

01-13

4628

<video src="{{videosrc}}" bindtap="previewVideo" data-current="{{videosrc}}" class="video"></video> 正常的video标签 // 视频预览 previewVideo(e){ wx.previewMedia({ sources: [{ url: e.currentTarget.dataset.current, //视频播放路径 ..

视频播放微信小程序

weixin_51734087的博客

08-22

1万+

一个教你写视频播放的微信小程序

小程序实现播放器功能

weixin_30532759的博客

10-25

672

微信小程序 实例：一个简单的播放器效果。实现的功能： 1点击播放按钮。音频开始播放。 2播放的同时，进度条在不停的更新走动 3点击暂停按钮，音频停止播放 4当音频播放完毕以后，进度条再次回到原点 5当拖滑动滑块以后，松开滑块，进度条继续走动，音频从滑块松开的位置播放，直至播放结束 html： <!--进度条...