Vidstack控件在移动端无法自动隐藏的问题排查与解决

问题核心：电脑端控件自动隐藏功能正常，但移动端失效，现有代码仅通过controls-change事件触发隐藏，未适配移动端触摸交互逻辑。

修复步骤与代码调整 #

1. 引入定时器管理隐藏逻辑，避免重复触发
2. 添加移动端触摸事件监听，确保触摸操作后控件能自动隐藏
3. 优化控件显示/隐藏时的定时器逻辑

修改后的完整代码：

<script setup>
import { ref, onMounted } from 'vue';

let player = ref(null);
let hideTimeout = ref(null);

// 统一处理控件隐藏倒计时
function scheduleControlsHide() {
  if (hideTimeout.value) clearTimeout(hideTimeout.value);
  hideTimeout.value = setTimeout(() => {
    player.value?.controls?.hide();
  }, 3000);
}

// 监听控件显示状态变化
function onControlsChange(event) {
  const isVisible = event.detail;
  if (isVisible) {
    scheduleControlsHide();
  } else {
    clearTimeout(hideTimeout.value);
  }
}

// 适配移动端触摸结束事件
function handleTouchEnd() {
  if (player.value?.controls?.isVisible) {
    scheduleControlsHide();
  }
}

onMounted(() => {
  player.value?.addEventListener('touchend', handleTouchEnd);
});
</script>

<template>
  <media-player 
    @controls-change="onControlsChange" 
    ref="player"
  >
    <!-- 此处添加你的媒体源和自定义控件 -->
  </media-player>
</template>

关键说明 #

• 定时器scheduleControlsHide确保每次控件显示后，都会在3秒后自动隐藏，同时清除之前的定时器避免冲突
• 移动端触摸操作后，通过touchend事件触发隐藏逻辑，填补原生事件在移动端的适配空白
• 控件隐藏时清除定时器，避免无效的延迟执行

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