微信小程序> 微信小程序VIdeo视频组件双击事件

微信小程序VIdeo视频组件双击事件

浏览量:593 时间: 来源:ノBye~

wxml

<view  class="video">    <video id="myVideo" class="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400}" custom-cache="{{false}}" data-time="{{lastTapTime}}" bindtap="handleClick">    </video>    <cover-view class="controls" style="display:{{tab_image}};">      <cover-image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552033980709&di=44246d5327c701950bc46de2360c0792&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F7997376834%2F640" />    </cover-view>    <cover-view class="play" style="display:{{tab_image}};z-index:200;">      <cover-image bindtap="bindplay" src="../../image/play.png" style="width:160rpx;" />    </cover-view></view>

js

Page({  /**   * 页面的初始数据   */  data: {    lastTapTime: 0,     videoimage: "block" //默认显示封面  },  //点击播放按钮,封面图片隐藏,播放视频  bindplay: function (e) {    this.setData({      tab_image: "none"    }),      this.videoCtx.play()  },  onReady() {    this.videoCtx = wx.createVideoContext('myVideo')  },  handleClick:  function (e)  {    var curTime = e.timeStamp;    // 通过e.currentTarget.dataset.time 访问到绑定到该组件的自定义数据    var lastTime = e.currentTarget.dataset.time;      console.log(lastTime);    if (curTime - lastTime > 0) {      if (curTime - lastTime < 300) {        console.log("双击事件,用了:" + (curTime - lastTime));        wx.showToast({          title: '双击',          icon: 'success',          duration: 2000        })      }    }    this.setData({      lastTapTime: curTime    })  }})

wxss

.myVideo{   width:100%;  height: calc(9 * 750rpx / 16);  background-color: #fff;}.controls{  position:absolute;  z-index:1;   background-color: #fff;       height: calc(9 * 750rpx / 16);   margin-top:-430rpx;}.play{     position:absolute;    left:50%;    margin-top:-300rpx;    margin-left:-80rpx;    }

 

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎