目录

ascf视频组件区域无法做滑动页面操作

问题现象

ascf视频组件在视频区域上下滑动无反应,无法做滑动页面操作。

背景知识

ascf媒体组件video包含如下属性:

名称

类型

默认值

必填

描述

enable-progress-gesture

boolean

true

否

是否开启控制进度的手势。起始版本:1.0.16。

vslide-gesture-in-fullscreen

boolean

true

否

在全屏模式下,是否开启亮度与音量调节手势。起始版本:1.0.16。

vslide-gesture

boolean

false

否

在非全屏模式下,是否开启亮度与音量调节手势。起始版本:1.0.16。

问题定位

排查video组件是否有配置enable-progress-gesture、vslide-gesture-in-fullscreen、vslide-gesture滑动手势属性,是否存在手势冲突。

<video id="introVideo"
       class="intro_video"
       src="xxx.mp4" // 请替换为真实的视频路径
       poster="{{ videoPoster }}"
       controls autoplay="{{ true }}"
       muted="{{ true }}"
       initial-time="0"
       enable-play-gesture loop="{{ false }}"
       bindplay="onVideoPlay" bindpause="onVideoPause" bindended="onVideoEnd" binderror="onVideoError">
</video>

分析结论

video组件未配置enable-progress-gesture、vslide-gesture-in-fullscreen、vslide-gesture手势属性,但因为enable-progress-gesture、vslide-gesture-in-fullscreen的默认值为true,即默认开启了控制进度的手势,在全屏模式下,默认开启了亮度与音量调节手势。因视频区域内手势冲突,导致上下滑动时,无法拖动页面。

修改建议

在video组件的属性配置中,将enable-progress-gesture、vslide-gesture-in-fullscreen、vslide-gesture属性设置为false,避免视频区域手势冲突,导致无法上下滑动页面。