uniapp小程序使用video标签播放视频缓存vue3+ts
·
代码
<video
:controls="true"
:loop="false"
:autoplay="false"
:show-progress="false"
:src="state.imgSrc"
ref="videoRef"
id="control-video"
@loadedmetadata="handleLoadedMetadata"
@ended="handleEnded"
@play="handlePlay"
@pause="handlePause"
@error="handleError"
></video>
// 原为getVideoContext,更新后替换为createVideoContext
// 在vue3跟ts是使用getVideoContext会报错,
import { ref } from "vue"
const state = reactive({
videoContext: '' as any,
imgSrc: '' as any,
})
state.videoContext = uni.createVideoContext('control-video')
// 上一次退出播放事件(秒)
// 从10秒开始播放
state.videoContext.seek(10)
// 开始播放
const handlePlay = () =>{
state.videoContext.play()
state.videoContext.seek(10)
}
// 暂停播放
consthandlePause = () =>{
state.videoContext.pause()
}
// 获取视频总时长
const handleLoadedMetadata = (e:any) => {
state.totalTime = Math.floor(e.detail.duration); // 总时长(秒)
};
// 7. 错误处理
consthandleError = (e: any) => {
uni.showToast({ title: '视频加载失败', icon: 'none' });
}
更多推荐



所有评论(0)