公告列表
公告列表
收藏
回答

video组件 上下滑动切换视频iphone无效

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug video 微信iOS客户端 iOS 6.6.7 2.1.1

video组件 上下滑动切换视频，安卓显示没问题，iphone无效？？？怎么解决？？iphone上下滑动直接出现背景了！


<view>
  <video id="myVideo" src="{{url}}" controls="{{false}}" autoplay="true" objectFit="fill" bindtouchmove="handletouchmove" bindtouchstart="handletouchstart" bindtouchend="handletouchend" style='top:{{videoheight}}%;'></video>
</view>
page{
  height: 100%;
  background-color: #000;
}
view{
  position: absolute;
  width: 100%; 
  height: 100%;
  overflow: hidden;
  z-index:1000;
}
video{
  width: 100%; 
  height: 100%;
}
Page({
  /**
   * 页面的初始数据
   */
  data: {
    url:'http://183.56.149.27/vhot2.qqvideo.tc.qq.com/A-aSuPQ2kL0oTeaLLAzX4JDIsc0rjb9G7dY5AYgtEtHY/p0695s87sjw.mp4?sdtfrom=v1010&guid=84bd1b079f916dc8aeb403bb38aeeda4&vkey=D3E47BA1117752D7801052EF47C846DFE72CDFD66A0431CC1F41B8431129DEB73C334747045738B50E90DF8CE2E41110C45190AD77C5B340945AF17A73942DF3E132B8C974441BA0012EF3D7651C5783C14FDFF9327FCAE44B5E9CDA0A6776F52404EA1EFB876DD85D88E35FF83F76F2A3A462C93CDD3777',
    videoheight:0,
    flag: 0,
    text: '',
  },
 
  /*
    滑动
  */
  handletouchmove: function (event){
    if (this.data.flag !== 0) {
      return
    }
    let currentX = event.touches[0].pageX;
    let currentY = event.touches[0].pageY;
    let tx = currentX - this.data.lastX;
    let ty = currentY - this.data.lastY;
    let text = "";
    //左右方向滑动 
    if (Math.abs(tx) > Math.abs(ty)) {
      if (tx < 0) {
        text = "向左滑动";
        this.data.flag = 1;
      }
      else if (tx > 0) {
        text = "向右滑动";
        this.data.flag = 2
      }
 
    }
    //上下方向滑动 
    else {
      if (ty < 0) {
        text = "向上滑动";
        this.data.flag = 3
      }
      else if (ty > 0) {
        text = "向下滑动";
        this.data.flag = 4
      }
 
    }
    console.log(text);
    switch (text){
      case '向上滑动':
        this.shang();
        break;
      case '向下滑动':
        this.xia();
        break;
      case '向左滑动':
        break;
      case '向右滑动':
        break;
    }
    //将当前坐标进行保存以进行下一次计算 
    this.data.lastX = currentX;
    this.data.lastY = currentY;
    this.setData({
      text: text,
    });
  },
  /*
    开始滑动
  */
  handletouchstart: function (event){
    this.data.lastX = event.touches[0].pageX;
    this.data.lastY = event.touches[0].pageY;
  },
 
  /*
    滑动完毕
  */
  handletouchend: function (event){
    this.data.flag = 0
    this.setData({
      text: "没有滑动",
    });
  },
  /*
    上滑特效
  */
  shang:function(){
    console.log('shang');
    var that = this;
    var sl = setInterval(function(){
      if (that.data.videoheight > -100){
        that.setData({
          videoheight: that.data.videoheight - 2
        });
      }else{
        that.setData({
          url:'http://183.56.149.27/vhot2.qqvideo.tc.qq.com/A-aSuPQ2kL0oTeaLLAzX4JDIsc0rjb9G7dY5AYgtEtHY/p0695s87sjw.mp4?sdtfrom=v1010&guid=84bd1b079f916dc8aeb403bb38aeeda4&vkey=D3E47BA1117752D7801052EF47C846DFE72CDFD66A0431CC1F41B8431129DEB73C334747045738B50E90DF8CE2E41110C45190AD77C5B340945AF17A73942DF3E132B8C974441BA0012EF3D7651C5783C14FDFF9327FCAE44B5E9CDA0A6776F52404EA1EFB876DD85D88E35FF83F76F2A3A462C93CDD3777',
          videoheight:0
        });
        clearInterval(sl);
      }
    },1);
  },
  /*
    下滑特效
  */
  xia: function () {
    var that = this;
    var sl = setInterval(function () {
      if (that.data.videoheight < 100) {
        that.setData({
          videoheight: that.data.videoheight + 2
        });
      } else {
        that.setData({
          url: 'http://183.56.149.27/vhot2.qqvideo.tc.qq.com/A-aSuPQ2kL0oTeaLLAzX4JDIsc0rjb9G7dY5AYgtEtHY/p0695s87sjw.mp4?sdtfrom=v1010&guid=84bd1b079f916dc8aeb403bb38aeeda4&vkey=D3E47BA1117752D7801052EF47C846DFE72CDFD66A0431CC1F41B8431129DEB73C334747045738B50E90DF8CE2E41110C45190AD77C5B340945AF17A73942DF3E132B8C974441BA0012EF3D7651C5783C14FDFF9327FCAE44B5E9CDA0A6776F52404EA1EFB876DD85D88E35FF83F76F2A3A462C93CDD3777',
          videoheight: 0
        });
        clearInterval(sl);
      }
    }, 1);
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
 
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
   
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
   
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
   
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
   
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
   
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
   
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
   
  }
})


回答关注问题邀请回答
收藏

3 个回答

  • 茹
    茹
    2018-06-25

    坐等官网回答

    2018-06-25
    有用 1
    回复 5
    • 小何
      小何
      2018-06-27

      你好~请问是哪个小程序，我体验下

      2018-06-27
      赞
      回复
    • 茹
      茹
      2018-06-27回复小何

      你可以通过canvas来操作video....我目前就是给canvas加touch事件，是可以的

      2018-06-27
      赞
      回复
    • 北北
      北北
      2018-06-27回复茹

      canvas里面嵌套video吗？

      2018-06-27
      赞
      回复
    • 茹
      茹
      2018-06-27回复北北

      都可以那， canvas的层级比video高

      2018-06-27
      赞
      回复
    • 戢俊建
      戢俊建
      2018-08-19回复茹

      你好，你实现了，方便加微信交流下不，18758580307，请教下视频的 滑动效果，可以有偿哈

      2018-08-19
      赞
      回复
  • 2018-09-21

    声音的话要怎么解决

    2018-09-21
    有用
    回复
  • 妮子
    妮子
    2018-07-04

    你好，请问你这个问题解决了么？怎么解决的

    2018-07-04
    有用
    回复
请 登录 后发表内容
相关问题
相关文档