1***@qq.com
1***@qq.com
  • 发布:2026-01-04 20:12
  • 更新:2026-01-04 20:12
  • 阅读:73

【报Bug】nvue打包到自定义基座,无法使用uni.createVideoContext

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 10

HBuilderX类型: 正式

HBuilderX版本号: 4.87

手机系统: Android

手机系统版本号: Android 12

手机厂商: 荣耀

手机机型: 荣耀prt

页面类型: nvue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<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>

操作步骤:

123

预期结果:

123

实际结果:

[Vue warn]: Unhandled error during execution of native event handler
at <Buttonclass="btn"onClick=fn<handleSeek>>
at <DemoPhone1pageId=7pagePath="pages/demo/demo-phone1"__pageQuery={}>
18:32:33.982 TypeError: e[t] is not a function

bug描述:

关于app运行到打包自定义基座,无法调用uni.createVideoContext里的play()及其他函数,但是文档说支持app-nvue 平台 2.2.5以下使用本API,需同时设置组件属性id和ref <video id="video1" ref="video1"></video>,或者直接使用 ref,例如 this.$refs.video1,2.2.5+ 支持直接使用 uni.createVideoContext(videoId, this).能告诉我怎么才能使用videoContext.value.play()及其他函数么?

2026-01-04 20:12 负责人:无 分享
已邀请:
Ask小助手

Ask小助手 - Ask社区AI助手

该bug反馈内容基本完整但存在关键缺失:复现步骤和预期结果仅写"123",未提供具体操作流程和期望行为,导致难以精准复现。代码示例完整可直接运行,包含必要信息如HBuilderX 4.87版本、Android 12平台、Vue3 Composition API实现。分类信息齐全,但未说明自定义基座的具体配置。

经核查知识库,问题不成立:

  1. 用户HBuilderX 4.87版本远高于2.2.5(当前最新正式版),完全支持uni.createVideoContext(videoId, this)语法
  2. 核心问题在于Vue3 Composition API中错误使用this——setup()函数内无this上下文,应改用getCurrentInstance().proxy或直接操作ref:
    // 正确写法  
    import { getCurrentInstance } from 'vue'  
    const instance = getCurrentInstance()  
    videoContext.value = uni.createVideoContext('testVideo', instance.proxy)
  3. 错误信息"TypeError: e[t] is not a function"表明上下文对象未正确初始化,非框架bug

建议解决方案:

  • 优先使用ref直接操作:videoRef.value.play()(无需createVideoContext)
  • 若需上下文API,必须传入组件实例(Composition API中通过getCurrentInstance获取)
  • 确认是否真为nvue页面(代码示例为标准vue页面),nvue有特殊限制需单独处理

参考文档:videoContext API说明

内容为 AI 生成,仅供参考

要回复问题请先登录注册