Shaka Player中触摸事件处理的问题与修复

问题背景

在Shaka Player的UI控制实现中，存在一个关于触摸事件处理的潜在问题。当播放器被嵌入iframe中并在移动设备上使用时，用户尝试在播放器区域滚动页面时会出现异常行为：滚动操作被阻止，反而触发了UI控制面板的显示。

技术分析

问题的核心在于当前的事件处理逻辑：

1. 播放器监听了touchstart事件
2. 当控制面板隐藏时，会调用preventDefault()阻止默认行为
3. 这导致滚动操作无法正常进行
4. 只有当控制面板显示后，滚动才能正常工作

这种实现方式虽然确保了触摸操作可以显示控制面板，但却干扰了正常的页面滚动行为，特别是在iframe嵌入场景下。

解决方案

经过项目维护者的讨论，决定将事件监听从touchstart改为touchend。这种修改带来了以下改进：

1. 不再阻止触摸开始阶段的默认行为，允许滚动操作正常进行
2. 在触摸结束时才判断是否需要显示控制面板
3. 保持了原有的控制面板显示/隐藏功能
4. 解决了iframe内滚动被阻止的问题

实现细节

修改后的实现保留了原有的控制逻辑，但调整了事件触发的时机：

• 仍然检查视频是否可播放
• 仍然维护最后触摸事件时间戳
• 控制面板的显示/隐藏逻辑保持不变
• 只是将触发时机从触摸开始改为触摸结束

这种修改最小化了对现有功能的影响，同时解决了滚动冲突问题。

影响范围

该修复主要影响以下使用场景：

1. 移动设备上的Shaka Player使用
2. 嵌入iframe的播放器实例
3. 需要触摸滚动操作的页面布局

对于桌面浏览器和非iframe嵌入场景，这个修改不会产生明显影响。

结论

Shaka Player团队通过这个修复展示了他们对用户体验细节的关注。通过调整事件监听时机，既保留了原有的功能，又解决了移动端iframe环境下的滚动冲突问题。这种平衡功能性和可用性的做法值得在类似的媒体播放器开发中借鉴。