资讯专栏INFORMATION COLUMN

调试手记:zepto touch 模块与移动浏览器 media 标签的不兼容,以及解决方法

Darkgel / 1550人阅读

摘要:调试结果看了一下错误提示,发现手机浏览器只允许用户操作打开,换句话说不管你最终是哪个函数执行了,你的调用栈上溯到最开始一定是一个元素的事件回调。

问题描述

最近在开发一个视频播放器项目,需要隐藏 video 标签,使用 canvas 自己做渲染。结果在点按钮播放视频的时候发现 zepto touch 模块不能用了。

调试结果

看了一下错误提示,发现手机浏览器只允许用户操作打开 video,换句话说不管你最终是哪个函数执行了 video.play(),你的调用栈上溯到最开始一定是一个 DOM 元素的 UI 事件回调。

但是zepto touch 模块是这么封装 tap 事件的:

    tapTimeout = setTimeout(function() {

      // trigger universal "tap" with the option to cancelTouch()
      // (cancelTouch cancels processing of single vs double taps for faster "tap" response)
      var event = $.Event("tap")
      event.cancelTouch = cancelAll
      // [by paper] fix -> "TypeError: "undefined" is not an object (evaluating "touch.el.trigger"), when double tap
      if (touch.el) touch.el.trigger(event)

      // trigger double tap immediately
      if (touch.isDoubleTap) {
        if (touch.el) touch.el.trigger("doubleTap")
        touch = {}
      }

      // trigger single tap after 250ms of inactivity
      else {
        touchTimeout = setTimeout(function(){
          touchTimeout = null
          if (touch.el) touch.el.trigger("singleTap")
          touch = {}
        }, 250)
      }
    }, 0)

使用 setTimeout 异步执行函数,导致调用栈被清空了,系统判断的时候自然不会认为是用户操作导致的 video.play()。

修改方案

那么比较粗暴的解决方法就是修改 zepto 代码,把 tap 事件的激发动作从异步回调中移出来同步执行,具体的说就是这三行:

      var event = $.Event("tap")
      event.cancelTouch = cancelAll
      if (touch.el) touch.el.trigger(event)

因为 tap 事件是没有什么延时的,所以直接移出来不会有什么影响,如果是延时事件就很尴尬了,暂时还想不出来什么解决方法。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80522.html

相关文章

  • 第六天 移动端Web开发注意事项

    摘要:随着移动互联网的发展,移动已经逐渐成为互联网的主要入口,随之而来的是前端在移动开发上面临的各种机遇与挑战,本文就一些常见移动端问题对移动开发需要注意的事项进行一下总结,必然不可能涉及方方面面,但会随着笔者的积累持续更新。 随着移动互联网的发展,移动Web已经逐渐成为互联网的主要入口,随之而来的是前端在移动Web开发上面临的各种机遇与挑战,本文就一些常见移动端问题对移动Web开发需要注意...

    妤锋シ 评论0 收藏0
  • 第六天 移动端Web开发注意事项

    摘要:随着移动互联网的发展,移动已经逐渐成为互联网的主要入口,随之而来的是前端在移动开发上面临的各种机遇与挑战,本文就一些常见移动端问题对移动开发需要注意的事项进行一下总结,必然不可能涉及方方面面,但会随着笔者的积累持续更新。 随着移动互联网的发展,移动Web已经逐渐成为互联网的主要入口,随之而来的是前端在移动Web开发上面临的各种机遇与挑战,本文就一些常见移动端问题对移动Web开发需要注意...

    xbynet 评论0 收藏0
  • 移动前端知识总结

    摘要:基础知识页面窗口自动调整到设备宽度,并禁止用户缩放页面忽略将页面中的数字识别为电话号码忽略平台中对邮箱地址的识别当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对的版本以后,上已看不到效果将网站添加到主屏幕快 meta基础知识H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快...

    gotham 评论0 收藏0
  • 移动前端知识总结

    摘要:基础知识页面窗口自动调整到设备宽度,并禁止用户缩放页面忽略将页面中的数字识别为电话号码忽略平台中对邮箱地址的识别当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对的版本以后,上已看不到效果将网站添加到主屏幕快 meta基础知识H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快...

    MartinDai 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<