l***@163.com
l***@163.com
  • 发布:2024-06-25 18:07
  • 更新:2024-09-13 11:12
  • 阅读:303

【报Bug】video标签组件不能触发ended事件

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win32-x64

浏览器平台: Chrome

浏览器版本: 126.0.6478.61(正式版本)

项目创建方式: CLI

CLI版本号: vite/4.3.5,node-v16.20.2

示例代码:
<template> <video id="test" ref="video" src="src" loop="false" controls = "true" autoPlay="false" enableDanmu="true" initial-time="initialTime" duration="duration" http-cache="true" @play="onPlay"
@pause="onPause"
@ended="onEnded"
@error="onError"
@timeupdate="onTimeUpdate"
></video>
<view class="uni-btn-v">
<button
type="primary"
@click="play"
>
播放
</button>
</view>
<view class="uni-btn-v">
<button
type="primary"
@click="pause"
>
暂停
</button>
</view> <view class="uni-btn-v">
<button
type="primary"
@click="setSrc(_src)"
>
换源
</button>
</view>
<view class="uni-btn-v">
<button
type="primary"
@click="seek(10)"
>
跳转到指定位置
</button>
</view>
<view class="uni-btn-v">
<button
type="primary"
@click="requestFullScreen(requestFullScreenOptions)"
>
进入全屏
</button>
</view>
<view class="uni-btn-v">
<button
type="primary"
@click="exitFullScreen"
>
退出全屏
</button>
</view>
<view class="uni-btn-v">
<button
type="primary"
@click="stop"
>
停止
</button>
</view>
<view class="uni-btn-v">
<button
type="primary"
@click="sendDanmu('ioio')"
>
发送弹幕
</button>
</view>
<view class="uni-btn-v">
<button
type="primary"
@click="playbackRate(2)"
>
设置倍速
</button>
</view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue"
import { onShow } from "@dcloudio/uni-app"
const src = ref('../../../static/VIDEO/TEST.mp4')
const _src = '../../../static/VIDEO/TEST.mp4'
const videoContext = uni.createVideoContext("test")
const isPause = ref(false)
const isPlaying = ref(false)
const initialTime = ref(0)
const _initialTime = ref(6)

const play = () => {
console.log("play")
videoContext?.play()
}
// 属性
const setSrc = (io : string) => {
src.value = '../../../static/VIDEO/TEST.mp4';
videoContext?.play()
}
const pause = () => {
console.log("pause");
videoContext?.pause();
}
const seek = (pos: number) => {
console.log("seek -> " + pos)
videoContext?.seek(pos)
}
const requestFullScreen = (options: RequestFullScreenOptions | null) => {
console.log("requestFullScreen -> " + options)
videoContext?.requestFullScreen(options)
}
const exitFullScreen = () => {
console.log("exitFullScreen")
videoContext?.exitFullScreen()
}
const stop = () => {
console.log("stop")
// uni.getElementById<UniVideoElement>("test")?.stop() //泛型写法测试
videoContext?.stop();
}
const sendDanmu = function (danmu: Danmu) {
console.log("sendDanmu -> " + danmu)
videoContext?.sendDanmu(danmu)
}
const playbackRate = function (rate: number) {
console.log("playbackRate -> " + rate)
videoContext?.playbackRate(rate)
}
const onPlay = (res : UniEvent) => {
console.log(res.type);
isPlaying.value = true;
isPause.value = false;
}
const onPause = (res : UniEvent) => {
console.log(res.type);
isPlaying.value = false;
isPause.value = true;
}
const onEnded = (res : UniEvent) => {
console.log(res.type, 'iooi');
}
const onError = (res : UniEvent) => {
console.log(res);
}
const onTimeUpdate = (res : UniEvent) => {
const time = res.detail.currentTime
if (time > 0) {

    }  
  }  

onShow(() => {
console.log(videoContext)
})
</script>

操作步骤:

本地的测试视频在播放完成触发

预期结果:

播放完成后点击播放可以正常继续播放

实际结果:

播放完成后播放器所有事件均不能正确触发

bug描述:

视频播放完成之后触发error事件和暂停,不触发结束事件,然后点击播放和拖动进度条都无效,在视频播放结束前,暂停和播放按钮以及拖动进度条都可以正常使用,设置循环播放为true和false均没有影响。换源按钮点击也没有反应

2024-06-25 18:07 负责人:无 分享
已邀请:
h***@163.com

h***@163.com

请问这个问题解决吗

要回复问题请先登录注册