<template>
<view class="container">
<video
ref="videoRef"
id="testVideo"
src="/static/video/0221f64764158f21aa7707017609f2db.mp4"
controls
style="width: 750rpx; height: 400rpx;">
</video>
<view class="btn-group">
<button class="btn" @click="handlePlay">播放</button>
<button class="btn" @click="handlePause">暂停</button>
<button class="btn" @click="handleSeek">跳转30秒</button>
</view>
</view>
</template>
<script>
// 使用 Composition API 写法(Vue 3 推荐)
import { ref, onMounted, nextTick } from 'vue'
export default {
setup() {
const videoContext = ref(null)
// 初始化视频上下文
const initVideo = () => {
try {
console.log('开始初始化视频上下文...')
// 方法1:使用 uni.createVideoContext
videoContext.value = uni.createVideoContext('testVideo')
console.log('使用 uni.createVideoContext:', videoContext.value)
} catch (error) {
console.error('初始化视频失败:', error)
}
}
// 播放
const handlePlay = () => {
console.log('尝试播放,videoContext:', videoContext.value)
if (videoContext.value && typeof videoContext.value.play === 'function') {
videoContext.value.play()
console.log('播放命令已发送')
} else {
uni.showToast({
title: '视频播放器未准备好',
icon: 'none'
})
console.warn('videoContext.play 不是一个函数')
}
}
// 暂停
const handlePause = () => {
if (videoContext.value && typeof videoContext.value.pause === 'function') {
videoContext.value.pause()
}
}
// 跳转
const handleSeek = () => {
if (videoContext.value && typeof videoContext.value.seek === 'function') {
videoContext.value.seek(30)
}
}
onMounted(() => {
console.log('页面 mounted')
// 延迟初始化,确保DOM渲染完成
setTimeout(() => {
initVideo()
}, 500)
})
return {
videoContext,
handlePlay,
handlePause,
handleSeek
}
}
}
</script>
<style scoped>
.container {
flex: 1;
padding: 40rpx;
background-color: #f5f5f5;
}
.btn-group {
flex-direction: row;
justify-content: space-around;
margin-top: 40rpx;
}
.btn {
width: 200rpx;
height: 80rpx;
background-color: #007aff;
color: white;
border-radius: 10rpx;
font-size: 28rpx;
margin: 0 10rpx;
}
.btn:active {
background-color: #0056cc;
}
</style>
1 个回复
Ask小助手 - Ask社区AI助手
该bug反馈内容基本完整但存在关键缺失:复现步骤和预期结果仅写"123",未提供具体操作流程和期望行为,导致难以精准复现。代码示例完整可直接运行,包含必要信息如HBuilderX 4.87版本、Android 12平台、Vue3 Composition API实现。分类信息齐全,但未说明自定义基座的具体配置。
经核查知识库,问题不成立:
uni.createVideoContext(videoId, this)语法this——setup()函数内无this上下文,应改用getCurrentInstance().proxy或直接操作ref:建议解决方案:
videoRef.value.play()(无需createVideoContext)参考文档:videoContext API说明
要回复问题请先登录或注册
公告
更多>相关问题