收藏
回答

实现抖音上下滑动切换视频,手机过热,求官方解答

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug video组件 和 bindtouchstart 和 bindtouchend 客户端 7.0 2.5.0

- 当前 Bug 的表现(可附上截图)

已经实现了 上下滑动,采用官方提供的 api bindtouchstart  和 bindtouchend,

但是手机过热,单独使用 两个api  都没有 问题,同时使用,过热明显,而且费电,求官方解答



- 预期表现

手机正常


- 复现路径


- 提供一个最简复现 Demo



最后一次编辑于  01-10  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

3 个回答

  • 是柿子啊
    是柿子啊
    01-10

    提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    01-10
    赞同
    回复 4
    • 严鹏辉
      严鹏辉
      01-15

      微信版本:7.0.1  手机机型:iphone 8  IOS 版本号:12.1简单说下 ,这个机型过热明显,一些安卓 还有iphoneX 温度也有小幅度升高(测试机型有限),温度还可以接受下面是 我们简化后的页面,可以复现问题wxml:

      <video src='http://1255883977.vod2.myqcloud.com/d1975e76vodgzp1255883977/84951cf65285890784164350877/lpyI9TqyGLUA.mp4'autoplay='true' controls='{{false}}' bindplay='statisticPlay' style='height: calc(100% - 3rem);width: 100%;left: 0;position:fixed;' loop='true' id='videPlay'/>

      <cover-view  bindtouchend='touchEnd'  catchtap='stopPlay' bindtouchstart="touchStart" style='position: fixed;top:0;left:0;background:rgba(0,0,0,0.1);height: calc(100% - 3rem);width: 100%;z-index:1;' />

      js:

      var app = getApp();

      Page({

      data: {

      playNum:0,

      touchInfo: {},

      },

      onLoad: function (options) {

      var that =this;

      },

      plaing:function(e){

      },

      statisticPlay:function(e){

      console.log(e);

      },

      touchStart: function (e) {

      },

      touchEnd: function (e) {

      }

      01-15
      回复
    • 是柿子啊
      是柿子啊
      01-15回复严鹏辉

      https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html,麻烦按照这个提供下

      01-15
      回复
    • 严鹏辉
      严鹏辉
      01-15回复是柿子啊

      https://developers.weixin.qq.com/s/sAgUPrmM7D5t

      01-15
      回复
    • 是柿子啊
      是柿子啊
      01-15回复严鹏辉

      测试了下,连续播放5分钟左右,未复现过热问题,测试机型:iPhonexr,微信版本:7.0.2

      01-15
      回复
  • var 友原
    var 友原
    01-14

    bindtouchstart  和 bindtouchend

    都是高频js,使用是非常消耗性能的,加上你这么不断频繁的使用,当然会出现温度升高,发热的问题,建议使用函数防抖或函数节流


    01-14
    赞同
    回复 3
    • 严鹏辉
      严鹏辉
      01-14

       打开小程序,不进行任何 人为   操作,视频自动循环播放,手机3-5分钟就开始发烫,防抖和节流 应该不是解决的主要问题吧 

      01-14
      回复
    • var 友原
      var 友原
      01-14

      自动循环播放那个自动切换的js应该也是很消耗性能的吧,你是用什么方法实现的

      01-14
      回复
    • 严鹏辉
      严鹏辉
      01-14回复var 友原

      官方 api

      loop="true"  

      01-14
      回复
  • 严鹏辉
    严鹏辉
    01-11

    微信版本:7.0.1  手机机型:iphone 8  IOS 版本号:12.1

    简单说下 ,这个机型过热明显,

    一些安卓 还有iphoneX 温度也有小幅度升高(测试机型有限),温度还可以接受

    下面是 我们简化后的页面,可以复现问题

    wxml:


    <video src='http://1255883977.vod2.myqcloud.com/d1975e76vodgzp1255883977/84951cf65285890784164350877/lpyI9TqyGLUA.mp4' autoplay='true' controls='{{false}}' bindplay='statisticPlay' style='height: calc(100% - 3rem);width: 100%;left: 0;position:fixed;' loop='true'

    id='videPlay'/>

    <cover-view  bindtouchend='touchEnd'  catchtap='stopPlay' bindtouchstart="touchStart" style='position: fixed;top:0;left:0;background:rgba(0,0,0,0.1);height: calc(100% - 3rem);width: 100%;z-index:1;' />


    js:


    var app = getApp();

    Page({


    /**

      * 页面的初始数据

      */

    data: {

    playNum:0,

    touchInfo: {},

    },


    /**

      * 生命周期函数--监听页面加载

      */

    onLoad: function (options) {

    var that =this;



    },


    /**

      * 生命周期函数--监听页面初次渲染完成

      */

    onReady: function () {


    },


    /**

      * 生命周期函数--监听页面显示

      */

    onShow: function () {


    },


    /**

      * 生命周期函数--监听页面隐藏

      */

    onHide: function () {


    },


    /**

      * 生命周期函数--监听页面卸载

      */

    onUnload: function () {


    },


    /**

      * 页面相关事件处理函数--监听用户下拉动作

      */

    onPullDownRefresh: function () {


    },


    /**

      * 页面上拉触底事件的处理函数

      */

    onReachBottom: function () {


    },


    /**

      * 用户点击右上角分享

      */

    onShareAppMessage: function () {


    },

    plaing:function(e){


    },

    statisticPlay:function(e){

    console.log(e);

    },

    touchStart: function (e) {

    var touchInfo = this.data.touchInfo;

    touchInfo.start = e.touches[0];

    this.setData({

    touchInfo: touchInfo

    })

    },

    touchEnd: function (e) {

    var touchInfo = this.data.touchInfo;

    touchInfo.end = e.changedTouches[0];

    this.setData({

    touchInfo: touchInfo

    })

    this.computer();

    },

    computer: function () {

    var that = this;

    var touchInfo = that.data.touchInfo;

    var playNum = that.data.playNum;

    if (touchInfo.start.pageY - touchInfo.end.pageY > 30) {

    ++playNum;

    }

    if (touchInfo.start.pageY - touchInfo.end.pageY < -30) {

    --playNum;

    }

    if (playNum < 0) {

    return;

    }

    if (that.data.playNum != playNum) {

    that.setData({

    playNum: playNum

    })

    that.changeVideo();

    }

    },

    changeVideo: function (callback) {

    this.videoContext = wx.createVideoContext('videPlay');

    },

    })


    01-11
    赞同
    回复