为什么 我给video 组件加id 解析后 会被加上hash

欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

你好，这个问题在 uni-app 开发中比较常见，我来帮你分析一下原因和解决方案。

核心原因：编译作用域与组件隔离

uni-app 在编译时，为了处理自定义组件之间的作用域隔离，避免页面和组件中相同 id 产生冲突，会给组件内部的元素 id 添加一个唯一的 hash 前缀。

你遇到的情况正是如此：

1. 你在自定义组件中给 <video> 设置了 id（例如 id="myVideo"）。
2. 编译后，实际的 id 变成了类似 _abc123_myVideo 这样的带 hash 前缀的值。
3. 你使用 uni.createVideoContext('myVideo', this) 去查找，但此时 DOM 中已经不存在 id="myVideo" 的元素了，所以导致找不到对应的 video 组件，进而无法渲染或操作。

解决方案

根据官方文档中 uni.createVideoContext 的说明，在自定义组件中创建 video 上下文时，必须传入第二个参数 this（组件实例），这样才能正确关联到组件内部的 video 元素。

正确写法：

// 在自定义组件的方法中  
const videoContext = uni.createVideoContext('myVideo', this); // 第二个参数传入组件实例  
videoContext.play();

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

注意事项：

• App-nvue 平台：如果在 nvue 中使用，低于 2.2.5 版本需要同时设置 id 和 ref 属性，或者直接使用 this.$refs.video1 来获取上下文。2.2.5+ 版本支持直接使用 uni.createVideoContext(videoId, this)。
• 视频未加载完成时操作无效：如果视频资源还未加载完成，调用 play() 或 pause() 等方法可能会失效。建议在视频的 @loadedmetadata 或 @play 事件后进行操作。

参考文档：

• uni.createVideoContext 官方文档

如果你确认已经传入了 this 但仍然无效，可以检查一下：

1. 视频组件是否确实在当前组件实例内部（而不是在更深层的嵌套组件中）。
2. 视频资源是否已经加载完成（可以监听 @error 事件查看是否有加载失败的情况）。

这个是微信的行为