小程序点击video暂停/开始

因为video是全屏显示的，所有将控件全部隐藏了，这样就不能没有了点击暂停按钮。所以要自定义。

 <videoid="myVideo"src="{{videoUrl}}"loop='true'controls='{{controls}}'show-fullscreen-btn='{{controls}}'autoplay="true"object-fit='cover'bindtap='videoTap'><cover-image class="playImg" src="../../images/pause.png" wx:if="{{play}}"></cover-image></video>

当play==true 图片显示
playImg是显示播放的一个按钮在中间显示

.playImg{position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 94rpx;height: 94rpx;
}

Page(){data:{play:false},
//点击暂停/开始videoTap:function(){//获取videothis.videoContext = wx.createVideoContext('myVideo')if (this.data.play){//开始播放this.videoContext.play()//开始播放this.setData({play:false})}else{//当play==false 显示图片 暂停this.videoContext.pause()//暂停播放this.setData({play: true})}} },

VideoContext 实例，可通过 wx.createVideoContext 获取。

VideoContext 通过 id 跟一个 video 组件绑定，操作对应的 video 组件。

微信文档 https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.html

这是暂停画面，中间有个图标显示。
再次点击就是开始播放。

VideoContext.stop()
停止视频
VideoContext.pause()
暂停视频
这两个一定要用清楚。
stop() 停止后再次点击播放是视频从头播放的不是想要的效果
pause() 暂停，再次播放是继续暂停时间开始播放的

小程序点击video暂停/开始相关推荐

微信小程序API之video
微信小程序API之video wxml: <button bindtap="tz">跳转tab页面</button><navigator url=&q ...
字节跳动小程序点击右上角分享胶囊设置“拍抖音”和“分享”功能
字节跳动小程序点击右上角分享胶囊设置"拍抖音"和"分享"功能附上代码: /** * 用户点击右上角分享 */ onShareAppMessage: funct ...
微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
wxss 点击样式_微信小程序点击控件修改样式实例详解
微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. ...
小程序点击地图气泡获取气泡_气泡上的气泡
小程序点击地图气泡获取气泡 Combining two colors that are two steps apart on the Color Wheel creates a Diad Color ...
小程序点击显示隐藏（点击标题，内容显示，再次点击隐藏，同时切换箭头的状态，且默认第一组的内容显示）
哈喽,大家下午好,时间过的真快,转眼啊又好长时间没写博客啦,嘿嘿最近公司比较忙,手上一直有项目需要处理,现在终于空闲了一点,赶快来一篇呀,嘿嘿~ 最近我一直在做小程序的项目,其中值得一提的是项目中有一 ...
微信小程序点击更改样式-点击获得下划线
微信小程序点击更改样式-点击获得下划线 <view class="container"> <scroll-view class='headerBox' scrol ...
微信小程序点击弹出输入框
微信小程序点击弹出输入框第一次写博客,我决定不要太old school. let's get it!最近在学习微信开发,刚接触到微信小程序,自己尝试着做了一个简单的小程序,过程中发现类似web开发中 ...
钉钉小程序上传文档_钉钉小程序点击上传图片
钉钉小程序点击上传图片 dd.chooseImage({ //请求图片 count: 1, //上传图片张数限制 success: (res) => { console.log("返 ...

小程序点击video暂停/开始

小程序点击video暂停/开始相关推荐

最新文章

热门文章