<template>
<view class="video">
<video id="myVideo" class="video" objectFit="fill" :src="src" :autoplay="index==0" :play-strategy="strategy"
enable-progress-gesture="false" :poster="item.image" :controls="controls" @timeupdate="onTimeupdate"
@play="onPlay" @pause="onPause" @ended="onEnded" @error="onError" @click="onClick"></video>
<view class="play" v-if="!playing">
<image style="width: 100rpx;height: 100rpx;" src="../../static/video/play.png" mode="scaleToFill"></image>
</view>
<view class="info">
<text class="title">{{item.name}}</text>
<text class="episode">{{episode}}</text>
<view class="action" @click.stop="(e)=>{}">
<view style="flex-direction: row;">
<text class="intro">共{{item.number}}集·{{item.name}}</text>
<view class="next" @click="onContinue">
<text style="color: white;font-size: 25rpx;">继续</text>
</view>
</view>
<view>
<slider class="progress" activeColor="white" backgroundColor="rgba(255, 255, 255, 0.2)"
block-size="5" :value="percent" @change="onSlide" @changing="onSliding" :disabled="lock"
v-if="!controls" />
</view>
</view>
</view>
</view>
</template>
- 发布：2024-02-27 09:47
- 更新：2024-02-27 09:47
- 阅读：217
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.99
手机系统： Android
手机系统版本号： Android 13
手机厂商： Nokia
手机机型： X30
页面类型： nvue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
APP打开的第一个界面包含video和slider, slider根据video播放进度显示进度。当APP首次安装后打开，slider不显示进度。点击slider，事件也是在video上响应。第二次打开APP可以恢复正常。
APP打开的第一个界面包含video和slider, slider根据video播放进度显示进度。当APP首次安装后打开，slider不显示进度。点击slider，事件也是在video上响应。第二次打开APP可以恢复正常。
预期结果：
slider每次都正常显示进度
slider每次都正常显示进度
实际结果：
当APP首次安装后打开，slider不显示进度
当APP首次安装后打开，slider不显示进度
bug描述：
APP打开的第一个界面包含video和slider, slider根据video播放进度显示进度。当APP首次安装后打开，slider不显示进度。点击slider，事件也是在video上响应。第二次打开APP可以恢复正常。
可以明显看到首次打开APP时，slider渲染较慢，会先显示video再显示slider，怀疑跟slider渲染较慢有关系。
0 个回复