uni-app vue3自定义video作为子窗体嵌入页面无法调用API

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

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.4.7

手机系统：Android

手机系统版本号：Android 10

手机厂商：华为

手机机型：华为Mate40 pro

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：

```html
<video id="myVideo" ref="myVideo" class="video" :poster="mainImg" :src="videoUrl"  
            :controls="false" :show-fullscreen-btn="false" :show-center-play-btn="false" :show-progress="false"  
            @ended="nextPlay" @timeupdate="processUpdate">  

<cover-view class="controls-top row" v-if="showControls">  
                <text class="iconfont" [@click](/user/click).stop="backHandle"></text>  
                <text class="title">{{title}}</text>  
            </cover-view>  
<cover-view class="controls-center center" [@click](/user/click)="showHideConterols">  
                <text v-if="showControls && !play" class="iconfont stop" [@click](/user/click).stop="playVideo"></text>  
                <text v-if="showControls && play" class="iconfont stop" [@click](/user/click).stop="playVideo"></text>  
            </cover-view>  
</video>

<script>  
onReady() {  
            this.videoContext = uni.createVideoContext('myVideo', this)  
        },  

playVideo() {  
                if (!this.videoContext) return  

                if (this.play) { //暂停  
                    this.videoContext.pause()  
                } else { //播放  
                    this.videoContext.play()  
                    //隐藏控制按钮  
                    this.showHideConterols()  
                }  
                this.play = !this.play  
            },  
</script>

page.json配置界面

"path": "pages/course/course-play",  
            "style": {  
                "navigationBarTitleText": "",  
                "navigationBarTextStyle": "black",  
                "app-plus": {  
                    "titleNView": false,  
                    "subNVues": [   
                        {  
                            "id": "topVideo",  
                            "path": "pages/course/subNVue/app-video",  
                            "style": {  
                                "position": "dock",  
                                "dock": "top",  
                                "width": "100%",  
                                "height": "420px"  
                            }  
                        }  
                    ]  
                }  
            }

zlyuanteng 1楼•10 天前

解决了吗

itying888 2楼•10 天前

在 uni-app 中使用 Vue3 自定义 video 组件作为子窗体嵌入页面时，可能会遇到无法调用 video 相关 API 的问题。这通常是由于 video 组件的生命周期、作用域或事件绑定等问题导致的。以下是一些可能的解决方案和注意事项：

1. 确保 `video` 组件正确加载

首先，确保 video 组件已经正确加载并渲染到页面上。你可以通过 ref 来获取 video 组件的实例，并确保它在 mounted 生命周期钩子中已经可用。

<template>
  <video ref="myVideo" src="your-video-url.mp4" controls></video>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const myVideo = ref(null);

onMounted(() => {
  if (myVideo.value) {
    console.log('Video element is ready');
    // 你可以在这里调用 video 的 API
    myVideo.value.play();
  }
});
</script>

2. 使用 `uni.createVideoContext`

在 uni-app 中，video 组件通常是通过 uni.createVideoContext 来创建上下文并调用相关 API 的。确保你使用了正确的方式来创建 video 上下文。

<template>
  <video id="myVideo" src="your-video-url.mp4" controls></video>
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const videoContext = uni.createVideoContext('myVideo');
  if (videoContext) {
    console.log('Video context is ready');
    // 你可以在这里调用 video 的 API
    videoContext.play();
  }
});
</script>

3. 检查事件绑定

确保你正确绑定了 video 的事件，例如 play、pause、ended 等。如果事件没有正确绑定，可能会导致无法调用相关 API。

<template>
  <video ref="myVideo" src="your-video-url.mp4" controls @play="onPlay"></video>
</template>

<script setup>
import { ref } from 'vue';

const myVideo = ref(null);

const onPlay = () => {
  console.log('Video is playing');
};
</script>

4. 检查 `video` 组件的属性和方法

确保你调用的 video API 是 video 组件支持的。不同的平台（如 H5、小程序、App）可能会有不同的 API 支持情况。你可以查阅 uni-app 官方文档来确认 video 组件支持的属性和方法。

5. 跨平台兼容性

如果你在多个平台上运行 uni-app，请注意不同平台对 video 组件的支持可能有所不同。你可能需要根据平台编写不同的代码逻辑。

6. 使用 `uni-app` 的 `video` 组件

如果你发现自定义 video 组件无法满足需求，可以考虑直接使用 uni-app 提供的 video 组件，它已经封装了跨平台的兼容性。

<template>
  <uni-video src="your-video-url.mp4" controls></uni-video>
</template>

uni-app vue3自定义video作为子窗体嵌入页面 无法调用API

示例代码：

page.json配置界面

1. 确保 video 组件正确加载

2. 使用 uni.createVideoContext