1***@qq.com
1***@qq.com
  • 发布:2020-08-21 10:42
  • 更新:2021-04-22 14:27
  • 阅读:953

【报Bug】在subnvue里放入video中获取createVideoContext后并不能控制video

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 2.8.8

手机系统: Android

手机系统版本号: Android 10

手机厂商: 小米

手机机型: mi 9

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
{  
            "path": "pages/recommend/video",    
            "style": {  
                "navigationStyle": "custom",  
                "navigationBarTextStyle": "white",  
                "app-plus": {  
                    "subNVues": [{  
                        "id": "video_mask",  
                        "path": "pages/recommend/subnvue/video-mask",  
                        "style": {  
                            "position": "absolute",  
                            "top": "0",  
                            "left": "0",  
                            "width": "100%",  
                            "height": "480upx"  
                        }  
                    }]  
                }  
            }  
        },  
<template>  
    <div class="wrapper">  
        <div :style="{'margin-top': statusBarHeight + 'px'}" :key="pick_object.id">  
            <video  
                class="video"  
                id="myVideo"   
                ref="myVideo"  
                :autoplay="is_autoplay"  
                :src="pick_object.video"  
                :title="pick_object.title"  
                :poster="pick_object.cover"  
                @play="videoplay"   
                @timeupdate="timeupdate"  
                @fullscreenchange="changeScreen"  
                :show-center-play-btn="show_center_play_btn"  
                :controls="controls"  
                >  
                <!-- enable-danmu  
                danmu-btn -->   
                <!-- 全屏触发 -->  
                <!-- <cover-view class="back-button" @click="go_back" v-if="!fullScreen"><image src="../../../static/fanhui_white.png" class="back-icon"></image></cover-view> -->  
                <cover-view class="btnbox" @click="go_back" v-if="!fullScreen" @click.stop="" >  
                    <div class="top-left">  
                        <text class="cyh-font"></text>  
                    </div>  
                </cover-view>  
                <cover-view class="purchase" v-if="showbuy">  
                    <text class="pur_text">前去购买</text>  
                </cover-view>  
            </video>  
        </div>  
    </div>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                pick_object:{},                             // 视频上下全文     
                is_autoplay: false,                         // 是否自动播放  
                showbuy: false,                             // 是否显示购买按钮  
                controls: false,                            // 是否显示默认播放控件(播放/暂停按钮、播放进度、时间)  
                show_center_play_btn: false,                // 是否显示视频中间的播放按钮  
                videoContext: '',                           // 视频上下文  
                fullScreen: false,                          // 判断当前是横屏还是竖屏  
                timeupTime: 0,                              // 视频播放进度  
                statusBarHeight: '',                        // 高  
            }  
        },  
        beforeCreate() {  
            // #ifdef APP-NVUE  
            var domModule = weex.requireModule('dom');  
            domModule.addRule('fontFace', {  
                'fontFamily': "texticons",  
                'src': "url('//static/video/text-icon.ttf')"  
            });  
            // #endif  
        },  
        onLoad() {  
             // 监听事件    
            uni.$on('Set_pick_object',(pick_object)=>{    
                this.pick_object = pick_object;   
                this.autoplay()  
            })    
        },  
        onUnload() {    
        // 移除监听事件    
            uni.$off('Set_pick_object');    
        },  
        created() {  
            let _t = this;  
                setTimeout(() => { //获取状态栏高度,setTimeout后才能调用uni.      
                    uni.getSystemInfo({      
                        success: function(res) {      
                            _t.statusBarHeight = res.statusBarHeight;    
                        }      
                    });      
            }, 1);   
        },  
        onReady: function() {  
           this.videoContext = uni.createVideoContext(`myVideo`,this)  
        },  
        methods:{  
            // 判断是否自动播放  
            autoplay(){  

                // 判断是否免费 判断是否是试听视频  判断是否已经收费  
                if(this.pick_object.free || this.pick_object.free_end > 0){  
                    this.play()  
                    // this.is_autoplay = true  
                    this.show_center_play_btn = true    // 是否显示视频中间的播放按钮  
                    this.controls = true                // 是否显示默认播放控件  
                    this.showbuy = false  
                }else{  
                    this.show_center_play_btn = false   // 是否显示视频中间的播放按钮  
                    this.controls = false               // 是否显示默认播放控件  
                    this.showbuy = true  
                }  
            },  
            play(){  

                this.videoContext.play()  
            },  
            pause(){  
                this.videoContext.pause()  
            },  
            timeupdate(event){  
                this.timeupTime = event.detail.currentTime  
                // this.$emit('timeupChange', event.detail.currentTime);  
                this.audition()  
            },  
            videoplay(event){  
                this.audition()  
            },  
            // 试听 判断是否播放  
            audition(){  
                if(this.pick_object.free_end){  
                    if(this.timeupTime >= this.pick_object.free_end){  
                        this.videoContext.seek(this.pick_object.free_end)  
                        this.videoContext.stop()  
                        // this.pause()  
                    }  
                }  
            },  
            changeScreen(e) {  
                // const subNVue = uni.getSubNVueById('video_mask')  
                this.fullScreen = !this.fullScreen  
                if(e.detail.direction == 'horizontal'){  
                    // subNVue.show('slide-in-top', 250)  
                    // subNVue.hide('fade-out', 250)  
                }else{  
                    // subNVue.hide('fade-out', 250)  
                    // subNVue.show('slide-in-top', 250)  
                }  
            },  
            go_back(){  
                var unl = getCurrentPages()  
                if(unl.length > 1){  
                    uni.navigateBack();  
                }else{  
                    uni.reLaunch({  
                        url: '/pages/recommend/index'  
                    });  
                }  
            }  
        }  
    }  
</script>  

<style scoped lang="scss">  
    /* #ifndef APP-PLUS-NVUE */  
        @font-face {  
            font-family: "texticons";  
            src: url('~@/static/video/text-icon.ttf') format('truetype');  
        }  
    /* #endif*/  
    .cyh-font{  
        font-size: 18px;  
        color: #fff;  
        /* #ifndef APP-PLUS-NVUE */  
        font-family: "texticons";  
        /* #endif*/  
        font-family: texticons;  
    }  
    .wrapper {  
        position: relative;  
        flex: 1;  
        background-color: #000;  
    }  
    .cell {  
        padding: 10rpx 0;  
        flex-direction: row;  
        flex-wrap: nowrap;  
    }  
    .controls-top{  
        /* #ifndef APP-PLUS-NVUE */  
        display: flex;  
        /* #endif */  
        position: absolute;  
        background-image: linear-gradient(to top , rgba(0,0,0,0) , rgba(0,0,0,0.8));  
        height: 80rpx;  
        /* transform: translateY(-80rpx); */  
        top: 0;  
        flex-direction: row;  
        justify-content: space-between;  
        align-items: center;  
        padding: 0 80rpx 0 60rpx;  
    }  
    .back-image{  
        width: 44rpx;  
        height: 44rpx;  
        padding: 18rpx 36rpx;  
        /* #ifndef APP-PLUS-NVUE */  
        box-sizing: content-box;  
        /* #endif */  
    }  
    .VerticalScreenReturns{  
        position: absolute;  
        width: 44rpx;  
        height: 44rpx;  
        /* #ifndef APP-PLUS-NVUE */  
        display: flex;  
        /* #endif*/  
        left: 24rpx;  
        top: 0;  
        padding: 18rpx 12rpx;  
        z-index: 2;  
    }  
    .back-button {  
        width: 30px;  
        height: 30px;  
        align-items: center;  
        justify-content: center;  
        margin-top: 25px;  
        margin-left: 15px;  
        z-index: 2;  
        position: absolute;  
    }  
    .back-icon {  
        width: 20px;  
        height: 20px;  
    }  
    .purchase{  
        position: absolute;  
        left: 0;  
        right: 0;  
        bottom: 0;  
        top: 0;  
        text-align: center;  
        /* #ifndef APP-PLUS-NVUE */  
        display: flex;  
        /* #endif */  
        align-items: center;  
        justify-content: center;  
    }  
    .pur_text{  
        background-color: #6b6bff;  
        color: #fff;  
        padding: 20rpx 30rpx;  
        border-radius: 8rpx;  
        font-size: 28rpx;  
    }  
    .btnbox{  
        position: absolute;  
        /* #ifndef APP-PLUS-NVUE */  
        display: flex;  
        /* #endif */  
        height: 40px;  
        width: 100%;  
        top: 0;  
        flex-direction: row;  
        justify-content: space-between;  
        align-items: center;  
        padding: 0 40px 0 30px;  
    }  
    .top-left{  
        flex-direction: row;  
        align-items: center;  
        font-size: 12px;  
        color: #fff;  
    }  
</style>  

操作步骤:

点击进入页面

预期结果:

能控制video

实际结果:

并不能控制video

bug描述:

在subnvue里放入video中获取createVideoContext后并不能控制video

2020-08-21 10:42 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com (作者) - 前端小菜鸡,www.superchester.cn

有没有人呀

1***@qq.com

1***@qq.com (作者) - 前端小菜鸡,www.superchester.cn

沉贴咯

六七四十二

六七四十二

楼主有想出处理办法吗?同遇到这个问题了
试过另一篇帖子的方法:https://ask.dcloud.net.cn/article/37837
但是用ref也无法获取到

l***@163.com

l***@163.com

遇到同样的问题

该问题目前已经被锁定, 无法添加新回复