uni-app video 组件 @loadedmetadata事件不触发 @longpress事件 全屏无效

uni-app video 组件 @loadedmetadata事件不触发 @longpress事件 全屏无效

产品分类

uniapp/App

PC开发环境

• 操作系统：Windows
• 操作系统版本号：Windows11
• 开发工具类型：正式
• 开发工具版本号：4.85

移动端开发环境

• 手机系统：iOS
• 手机系统版本号：iOS 16
• 手机厂商：苹果
• 手机机型：iPhoneX

开发信息

• 页面类型：nvue
• Vue版本：vue3
• 打包方式：云端
• 项目创建方式：HBuilderX

示例代码

<template>  
    <view style="flex: auto">  
        <video  
            id="video"  
            src="https://ygg-all.oss-cn-zhangjiakou.aliyuncs.com/app/video/xuanchuan.mp4"  
            class="relative"  
            :style="{ width: `${videoWidth}rpx`, height: `${videoHeight}rpx` }"  
            :controls="false"  
            :enable-play-gesture="true"  
            :autoplay="false"  
            :vslide-gesture-in-fullscreen="false"  
            :advanced="advanced"  
            @controlstoggle="onControlstoggle"  
            [@loadedmetadata](/user/loadedmetadata)="loadedmetadata"  
            @fullscreenchange="onFullscreenChange"  
            @play="isPlay = true"  
            @pause="isPlay = false"  
            @ended="isPlay = false"  
            @timeupdate="onTimeUpdate"  
            [@longpress](/user/longpress)="setPlaybackRate(2)"  
            @touchend="setPlaybackRate(1)"  
            @fullscreenclick="test"  
        >  
            <view class="controls-head" :style="{ transform: `translateY(${showControls ? 0 : '-100%'})`, position: isFullScreen ? 'fixed' : 'absolute' }">  
                <text class="controls-head-title" [@longpress](/user/longpress)="onClick">标题</text>  

                <view class="controls-head-capsules" @tap="showMenu = !showMenu">  
                    <text [@longpress](/user/longpress)="onClick" class="controls-head-capsules-text" style="color: white">章节</text>  
                    <text class="controls-head-capsules-icon">&#xe655;</text>  
                </view>  
            </view>  
            <view class="controls-bar" @tap.stop.prevent :style="{ transform: `translateY(${showControls ? 0 : '100%'})`, position: isFullScreen ? 'fixed' : 'absolute' }">  
                <text class="controls-bar-play" @tap="onPlay">{{ isPlay ? '&#xe64b;' : '&#xe63b;' }}</text>  

                <text class="controls-bar-current-time">{{ formatTime(videoCurrentTime) }}</text>  

                <view style="flex: 1" @tap.stop.prevent>  
                    <slider  
                        :value="videoCurrentTime"  
                        :min="0"  
                        :max="videoDuration"  
                        :step="1"  
                        :block-size="10"  
                        @changing="handerSilderChanging($event.detail.value)"  
                        @change="handerSilderChange($event.detail.value)"  
                    />  
                </view>  

                <text class="controls-bar-duration">{{ formatTime(videoDuration) }}</text>  

                <view class="controls-bar-rate" @tap="showRates = !showRates">  
                    <text class="controls-bar-rate-number">{{ currentRate.toFixed(1) }}</text>  
                    <text class="controls-bar-rate-text">倍速</text>  
                </view>  

                <text class="controls-bar-fullscreen" @tap.stop="onFullScreen()">{{ isFullScreen ? '&#xe629;' : '&#xe600;' }}</text>  
            </view>  

            <view  
                class="controls-bar-rate-list"  
                :style="{  
                    transform: `translateX(${showControls && showRates ? 0 : '200%'})`,  
                    opacity: showControls && showRates ? 1 : 0,  
                    position: isFullScreen ? 'fixed' : 'absolute'  
                }"  
            >  
                <text class="controls-bar-rate-list-number" v-for="(item, index) in rates" :key="index" :class="{ avtion: item === currentRate }" @tap="setPlaybackRate(item)">  
                    {{ item.toFixed(1) }}  
                </text>  
            </view>  
            <view  
                class="menu-list"  
                :style="{  
                    transform: `translateX(${showControls && showMenu ? 0 : '200%'})`,  
                    opacity: showControls && showMenu ? 1 : 0,  
                    position: isFullScreen ? 'fixed' : 'absolute'  
                }"  
            >  
                <list :show-scrollbar="false">  
                    <cell v-for="i in 10" :key="i">  
                        <view class="menu-list-item">  
                            <text class="menu-list-item-text">知识点{{ i }}:xxxx</text>  
                            <text class="menu-list-item-icon">&#xe64b;</text>  
                        </view>  
                    </cell>  
                </list>  
            </view>  
        </video>  
    </view>  
</template>  

操作步骤

<template>  
    <view style="flex: auto">  
        <video  
            id="video"  
            src="https://ygg-all.oss-cn-zhangjiakou.aliyuncs.com/app/video/xuanchuan.mp4"  
            class="relative"  
            :style="{ width: `${videoWidth}rpx`, height: `${videoHeight}rpx` }"  
            :controls="false"  
            :enable-play-gesture="true"  
            :autoplay="false"  
            :vslide-gesture-in-fullscreen="false"  
            :advanced="advanced"  
            @controlstoggle="onControlstoggle"  
            [@loadedmetadata](/user/loadedmetadata)="loadedmetadata"  
            @fullscreenchange="onFullscreenChange"  
            @play="isPlay = true"  
            @pause="isPlay = false"  
            @ended="isPlay = false"  
            @timeupdate="onTimeUpdate"  
            [@longpress](/user/longpress)="setPlaybackRate(2)"  
            @touchend="setPlaybackRate(1)"  
            @fullscreenclick="test"  
        >  
            <view class="controls-head" :style="{ transform: `translateY(${showControls ? 0 : '-100%'})`, position: isFullScreen ? 'fixed' : 'absolute' }">  
                <text class="controls-head-title" [@longpress](/user/longpress)="onClick">标题</text>  

                <view class="controls-head-capsules" @tap="showMenu = !showMenu">  
                    <text [@longpress](/user/longpress)="onClick" class="controls-head-capsules-text" style="color: white">章节</text>  
                    <text class="controls-head-capsules-icon">&#xe655;</text>  
                </view>  
            </view>  
            <view class="controls-bar" @tap.stop.prevent :style="{ transform: `translateY(${showControls ? 0 : '100%'})`, position: isFullScreen ? 'fixed' : 'absolute' }">  
                <text class="controls-bar-play" @tap="onPlay">{{ isPlay ? '&#xe64b;' : '&#xe63b;' }}</text>  

                <text class="controls-bar-current-time">{{ formatTime(videoCurrentTime) }}</text>  

                <view style="flex: 1" @tap.stop.prevent>  
                    <slider  
                        :value="videoCurrentTime"  
                        :min="0"  
                        :max="videoDuration"  
                        :step="1"  
                        :block-size="10"  
                        @changing="handerSilderChanging($event.detail.value)"  
                        @change="handerSilderChange($event.detail.value)"  
                    />  
                </view>  

                <text class="controls-bar-duration">{{ formatTime(videoDuration) }}</text>  

                <view class="controls-bar-rate" @tap="showRates = !showRates">  
                    <text class="controls-bar-rate-number">{{ currentRate.toFixed(1) }}</text>  
                    <text class="controls-bar-rate-text">倍速</text>  
                </view>  

                <text class="controls-bar-fullscreen" @tap.stop="onFullScreen()">{{ isFullScreen ? '&#xe629;' : '&#xe600;' }}</text>  
            </view>  

            <view  
                class="controls-bar-rate-list"  
                :style="{  
                    transform: `translateX(${showControls && showRates ? 0 : '200%'})`,  
                    opacity: showControls && showRates ? 1 : 0,  
                    position: isFullScreen ? 'fixed' : 'absolute'  
                }"  
            >  
                <text class="controls-bar-rate-list-number" v-for="(item, index) in rates" :key="index" :class="{ avtion: item === currentRate }" @tap="setPlaybackRate(item)">  
                    {{ item.toFixed(1) }}  
                </text>  
            </view>  
            <view  
                class="menu-list"  
                :style="{  
                    transform: `translateX(${showControls && showMenu ? 0 : '200%'})`,  
                    opacity: showControls && showMenu ? 1 : 0,  
                    position: isFullScreen ? 'fixed' : 'absolute'  
                }"  
            >  
                <list :show-scrollbar="false">  
                    <cell v-for="i in 10" :key="i">  
                        <view class="menu-list-item">  
                            <text class="menu-list-item-text">知识点{{ i }}:xxxx</text>  
                            <text class="menu-list-item-icon">&#xe64b;</text>  
                        </view>  
                    </cell>  
                </list>  
            </view>  
        </video>  
    </view>  
</template>  

预期结果

• @longpress事件 全屏的时候也生效，能实现长按倍数

• 在自定义ui，使用slider 组件当进度条 iOS 触摸乱跳触碰就直接到最大值了

实际结果

• @loadedmetadata事件不触发
• @longpress事件 全屏无效
• 自定义ui，slider组件触摸乱跳

bug描述

video 组件

• @loadedmetadata事件不触发
• @longpress事件 全屏无效
• 自定义ui，slider组件触摸乱跳