What Should I Do If a User is Unable to Switch Between Tab Pages by Swiping When the Tab Page Contains a Video? - huawei-mobile-services

Question

When the tab-content component (a subcomponent of tabs) contains a video, the user is unable to swipe to switch between tab pages, with the result that the progress bar is dragged instead.
The code where the exception occurs is as follows:
<template>
<div style="background-color: #00bfff;">
<tabs index="0" >
<tab-bar mode="fixed">
</tab-bar>
<tab-content>
<div style="flex-direction: column;">
<text style="color: red">1</text>
<stack class="video" >
<video class="video1" id="111"
src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/cae-legoup-video-target/93be3d88-9fc2-4fbd-bd14-833bca731ca7.mp4">
</video>
</stack>
</div>
<div style="flex-direction: column;">
<text style="color: red">2</text>
</div>
<div style="flex-direction: column;">
<text style="color: red">3</text>
</div>
</tab-content>
</tabs>
</div>
</template>
Cause Analysis:
The video component is set as a subcomponent of tabs, while both components support swiping. When the user swipes across the video area, the system will respond to the sliding of the progress bar prior to the tab page switchover, given the event bubbling framework.

Answer 1

Add a div component between video and its parent node stack to cover the video. Make sure that div is lower than video in height to ensure that the progress bar and buttons are not hidden. When the user swipes across the video area, they are swiping on the div component instead. Because div and video are sibling nodes, the video progress bar will not be dragged.
The sample code is as follows:
<template>
<div style="background-color: #00bfff;">
<tabs index="0" >
<tab-bar mode="fixed">
</tab-bar>
<tab-content>
<div style="flex-direction: column;">
<text style="color: red">1</text>
<stack class="video">
<video class="video1" id="111"
src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/cae-legoup-video-target/93be3d88-9fc2-4fbd-bd14-833bca731ca7.mp4"
onstart="start" ontouchmove="move" onseeked="seeked">
</video>
<div style="width: 100%;height:300px;" onclick="bof">
</div>
</stack>
</div>
<div style="flex-direction: column;">
<text style="color: red">2</text>
</div>
<div style="flex-direction: column;">
<text style="color: red">3</text>
</div>
</tab-content>
</tabs>
</div>
</template>
References:
tabs component
video component

Answer 2

The layout needs to differentiate between touching video progress and touching video tab.
So we need to have element besides video in the tab, for example
<stack class="video">
<video
</video>
<div >
</div>
</stack>
The extra div or anything to cover the video without color
So that the tab is detecting click.
Assuming user knows not to touch the lower part of the video to swap tab, this is common behavior seems.