iOS平台touchend触发媒体播放异常问题及解决方案咨询

问题原因 #

WebKit的媒体播放策略要求播放必须由用户明确的主动交互触发。当执行拖拽操作时，中间会触发touchmove事件，WebKit会将后续的touchend判定为拖拽动作的收尾，而非用户主动触发的播放交互，因此会拒绝播放请求。

解决方法 #

通过判断触摸过程中的位移，区分"点击"和"拖拽"两种场景，仅在位移极小（判定为点击）的touchend事件中触发媒体播放：

• 记录touchstart时的触摸坐标
• 在touchend事件中计算位移，当位移小于阈值（比如5px）时，才执行播放逻辑

代码示例 #

// 存储触摸起始位置
let touchStartX = 0;
let touchStartY = 0;

el.addEventListener('touchstart', (e) => {
  // 记录初始触摸点
  touchStartX = e.touches[0].clientX;
  touchStartY = e.touches[0].clientY;
});

el.addEventListener('touchend', (e) => {
  // 计算触摸位移
  const deltaX = Math.abs(e.changedTouches[0].clientX - touchStartX);
  const deltaY = Math.abs(e.changedTouches[0].clientY - touchStartY);
  
  // 仅当位移小于5px时，判定为点击，执行播放逻辑
  if (deltaX < 5 && deltaY < 5) {
    stb.task.dragEnd(e);
  } else {
    // 拖拽结束，不执行播放
    // 可根据需求处理拖拽后的逻辑
  }
});

el.addEventListener('mousedown', stb.task.dragEnd );

额外注意事项 #

• 确保媒体播放的调用是在事件处理函数的同步执行栈中，不要放到setTimeout、Promise回调等异步逻辑里，否则WebKit会判定为非用户主动触发。
• 若stb.task.dragEnd内部包含异步操作，需要将播放逻辑抽离出来，在同步判断通过后直接调用播放API，再执行其他异步逻辑。

内容的提问来源于stack exchange，提问作者Jorgs