小程序video自定义播放按钮

在这里插入图片描述

html:

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

<!-- 播放按钮 -->
<view class='video-play'>
    <image  bindtap="videoPlay" class='video-btn' src='/images/icon/class/play.png'/>
    <image  bindtap="videoPause" class='video-btn' src='/images/icon/class/pause.png'/>
</view>

js:

// 播放
videoPlay() {
   console.log('开始播放')
   
   var videoplay = wx.createVideoContext('video')
   videoplay.play()
},
    
 // 暂停播放
videoPause(){
   console.log('暂停播放')
   
   var videoplay = wx.createVideoContext('video')
   videoplay.pause()
},

注意:

1. wx.createVideoContext(‘video’), 这里的’video’是对应的<video id="video">

2. show-center-play-btn 和 controls 设置值的时候,要写成="{{false}}"才会生效

3.隐藏播放键在开发者工具中无效,要用真机调试才看的出来
在这里插入图片描述

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值