uni-app 鸿蒙next获取不了video组件的videoContext

发布于 1周前 作者 phonegap100 来自 Uni-App

uni-app 鸿蒙next获取不了video组件的videoContext

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

产品分类:uniapp/App

PC开发环境操作系统:Windows

HBuilderX类型:正式

手机系统:HarmonyOS NEXT

手机系统版本号:HarmonyOS NEXT Developer Preview

手机厂商:华为

手机机型:mate60

页面类型:nvue

vue版本:vue3

打包方式:云端

项目创建方式:HBuilderX

示例代码:

//通过 uni.createVideoContext方式获取  
videoContext = uni.createVideoContext('video',this)  
console.log(videoContext);  
console.log(JSON.stringify(videoContext));  
console.log(videoContext.pause);  
videoContext.pause()  

16:09:39.295 [object Object] at pages/index/video/player.nvue:307  
16:09:39.295 {"id":"video","pageId":2} at pages/index/video/player.nvue:308  
16:09:39.296 Cannot get source code of funtion at pages/index/video/player.nvue:309

注意我是nvue,虽然说不支持nvue,但是我的nvue一切正常,除了这个videoContext,导致无法自定义实现视频暂停等功能。

操作步骤:

组件mounted里面执行

预期结果:

返回视频上下文

实际结果:

没有

bug描述:

通过this.$refs.video获取为undefined


更多关于uni-app 鸿蒙next获取不了video组件的videoContext的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 鸿蒙next获取不了video组件的videoContext的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在处理uni-app在鸿蒙next平台上无法获取video组件的videoContext问题时,首先需要确认你的开发环境和依赖库版本是最新的,因为一些旧版本可能存在已知的bug。此外,由于鸿蒙平台相对较为特殊,可能需要一些特定的处理或补丁。

下面是一个基本的示例代码,展示如何在uni-app中尝试获取video组件的videoContext。请确保你的项目已经正确配置了鸿蒙next平台的支持。

1. 在页面的模板部分(.vue文件)

<template>
  <view>
    <video
      id="myVideo"
      src="path/to/your/video.mp4"
      @loadedmetadata="onLoadedMetadata"
      ref="videoRef"
    ></video>
    <button @click="getVideoContext">获取Video Context</button>
  </view>
</template>

2. 在页面的脚本部分(.vue文件)

<script>
export default {
  methods: {
    onLoadedMetadata() {
      // 当视频元数据加载完成后,尝试获取videoContext
      this.getVideoContext();
    },
    getVideoContext() {
      // 使用ref获取video组件实例
      const videoElement = this.$refs.videoRef;
      // 尝试获取videoContext
      const videoContext = videoElement.getVideoContext();
      if (videoContext) {
        console.log('成功获取videoContext:', videoContext);
        // 在这里你可以使用videoContext进行播放、暂停等操作
      } else {
        console.error('无法获取videoContext');
      }
    }
  }
}
</script>

3. 注意事项

  • 确保ref属性正确设置,并且组件已经渲染完成。
  • onLoadedMetadata事件中尝试获取videoContext,因为这个事件表示视频的元数据已经加载完成,此时video组件应该已经准备好。
  • 如果仍然无法获取videoContext,可能是由于鸿蒙平台的特殊性导致的兼容性问题。此时,你可以尝试查阅uni-app和鸿蒙平台的官方文档,看是否有相关的补丁或更新。
  • 如果问题依旧存在,可以考虑在uni-app的社区或鸿蒙开发者论坛中寻求帮助,看看是否有其他开发者遇到并解决了相同的问题。

由于无法直接测试鸿蒙next平台上的uni-app项目,上述代码可能需要根据实际情况进行调整。希望这些信息对你有所帮助!

回到顶部