uni-app 发现重大BUG SUBNVUE下调用Video createVideoContext的方法失效

uni-app 发现重大BUG SUBNVUE下调用Video createVideoContext的方法失效

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

示例代码：

代码附件中


### 操作步骤：


1. 解压附件，将文件导入项目，并且配置一下pages.json
2. 注意在ivideo.nvue里面有一个播放和暂停的按钮
3. 新建一个index.vue，pages.json 配置app-plus ，配置页面 subNvue/live.nvue
4. 进入index.vue,会自动呈现 subnvue内容，会呈现ivideo的内容，点击播放和暂停按钮均无任何效果

预期结果：

点击播放和暂停按钮均无任何效果 不采用 app-plus的方式运行，直接启动live.nvue页面，点击里面的暂停和播放按钮又是正常的


### 实际结果：


解决此BUG，可以正常的调用play函数和stop函数还有pause函数

bug描述：

index.vue vue页面 subNvue/live.nvue //nvue页面 ivideo.nvue //封装的video组件

page配置了启动页面

"condition": {  
    //模式配置，仅开发期间生效  
    "current": 0, //当前激活的模式(list 的索引项)  
    "list": [{  
        "name": "", //模式名称  
        "path": "pages/subNvue/live", //启动页面，必选  
        "query": "" //启动参数，在页面的onLoad函数里面得到  
    }]  
}

pages/subNvue/live 就是 live.nvue

启动运行一切正常，stop，play函数有正常的效果

index 页面配置

{  
    "path": "pages/live/index",  
    "style": {  
        "navigationStyle": "custom",  
        "navigationBarTitleText": "直播",  
        "app-plus":{  
            "subNVues":[{  
                "path":"pages/subNvue/live",  
                "id":"liveVideo",  
                "style":{  
                    "position":"absolute",  
                    "height":"630rpx",  
                    "top":"0px",  
                    "backgroundColor":"transparent"  
                }  
            }]  
        }   
    }  
}

在index页面添加了了一个630高度的播放器，运行之后，看起来没有问题，但是接口失效

下面的停止按钮和暂停和播放都无反应，不报错

<script>  
{  
methods:{  
    stop() {  
    this.videoCtx.stop() //停止不报错，但是视频依然播放  
    console.log('stop...')  
    },  
    pause() {  
    const vv = uni.createVideoContext('ivideo', this)  
    vv.pause()  
    console.log('pause...')  
    },  
    play() {  
    const vv = uni.createVideoContext('ivideo', this)  
    vv.play()  
    console.log('play...')  
    },  
}  
}  
</script>

更多关于uni-app 发现重大BUG SUBNVUE下调用Video createVideoContext的方法失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

将代码更改为这样可以实现正常功能 比如： const vv = uni.createVideoContext(‘ivideo’, this) vv.pause() 暂停无效
更改为 this.$refs.ivideo.pause() //暂停有效
请uniapp工程师修复一下哦 console.log(‘pause…’)

更多关于uni-app 发现重大BUG SUBNVUE下调用Video createVideoContext的方法失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


video上 ID和ref都叫ivideo <video id=“ivideo” ref=“ivideo”

回复 黑子: 提供可复现，可直接运行的项目示例

在 uni-app 中使用 subNVue 时，createVideoContext 方法失效是常见问题。subNVue 是独立渲染的原生子窗体，其内部的组件与 Vue 页面的上下文隔离，导致 Vue 页面无法直接通过 createVideoContext 控制 subNVue 中的 video 组件。

解决方案：通过 uni.$emit 和 uni.$on 实现 Vue 页面与 subNVue 之间的通信。在 subNVue 中监听事件并调用 video 组件的方法。

修改 subNVue 页面（live.nvue）代码，添加事件监听：

// 在 live.nvue 的 script 中
export default {
    mounted() {
        uni.$on('videoControl', (data) => {
            const videoCtx = uni.createVideoContext('ivideo', this);
            if (videoCtx && data.action) {
                videoCtx[data.action]();
            }
        });
    },
    beforeDestroy() {
        uni.$off('videoControl');
    }
}

修改 Vue 页面（index.vue）中的方法，触发事件：

// 在 index.vue 的 methods 中
methods: {
    stop() {
        uni.$emit('videoControl', { action: 'stop' });
    },
    pause() {
        uni.$emit('videoControl', { action: 'pause' });
    },
    play() {
        uni.$emit('videoControl', { action: 'play' });
    }
}
回到顶部