zfyhaha
zfyhaha
  • 发布:2020-07-22 17:52
  • 更新:2020-07-25 10:50
  • 阅读:1199

【报Bug】2.8.1 nvue界面中cover-view 无法覆盖video

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 2.8.1

手机系统: iOS

手机系统版本号: iOS 13.0

手机厂商: 苹果

手机机型: ios

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

nvue界面

<template>  
    <div>  
        <video id='video1' class="video" src="https://vdept.bdstatic.com/6e474b344d6e414c42734258385a6632/4372374e74387452/eb5f0aaf26c61ca2fb3fad28649207e14b2e0e118de4f6e68228c27510277d44e16ff72f6b8cd7db5717a3a56d94bf2cb1815a50f86a8b43451d75ee4a87daf7.mp4?auth_key=1595480349-0-0-00f1f554b3d12827bbaa870b1feafb59" autoplay="false" duration="" controls="true" :danmu-list="list"  
            danmu-btn="true" enable-danmu="true" :loop="true" muted="true" initial-time="" direction="-90"  
            show-mute-btn="true" @play="onstart" @pause="onpause" @ended="onfinish" @error="onfail" @waiting="waiting"  
            @timeupdate="timeupdate" @fullscreenchange="fullscreenchange">  

            <cover-view class="cover">  
                <h1>hahahahahha</h1>  
                <h1>hahahahahha</h1>  
                <h1>hahahahahha</h1>  
                <h1>hahahahahha</h1>  
                <h1>hahahahahha</h1>  
                <h1>hahahahahha</h1>   
            </cover-view>  
            </video>  
        <button class="btn" @click="play">播放</button>  
        <button class="btn" @click="pause">暂停</button>  
        <button class="btn" @click="seek">跳转到指定位置</button>  
        <button class="btn" @click="stop">停止</button>  
        <button class="btn" @click="fullScreen">全屏</button>  
        <button class="btn" @click="exitFullScreen">退出全屏</button>  
        <button class="btn" @click="playbackRate">设置倍速</button>  
        <button class="btn" @click="sendDanmu">发送弹幕</button>  
    </div>  
</template>  

<script>  
    export default {  
        data: {  
            src: "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v",  
            fil: true,  
            list: [{  
                text: '哈哈哈',  
                color: '#FF0000',  
                time: 2  
            }]  
        },  
        onReady() {  
            this.context = uni.createVideoContext("video1", this);  
        },  
        methods: {  
            onstart(e) {  
                console.log("onstart:" + JSON.stringify(e));  
            },  
            onpause(e) {  
                console.log("onpause:" + JSON.stringify(e));  
            },  
            onfinish(e) {  
                console.log("onfinish:" + JSON.stringify(e));  
            },  
            onfail(e) {  
                console.log("onfail:" + JSON.stringify(e));  
            },  
            fullscreenchange(e) {  
                console.log("fullscreenchange:" + JSON.stringify(e));  
            },  
            waiting(e) {  
                console.log("waiting:" + JSON.stringify(e));  
            },  
            timeupdate(e) {  
                console.log("timeupdate:" + JSON.stringify(e));  
            },  

            play() {  
                this.context.play();  
            },  
            pause() {  
                this.context.pause();  
            },  
            seek() {  
                this.context.seek(20);  
            },  
            stop() {  
                this.context.stop();  
            },  
            fullScreen() {  
                this.context.requestFullScreen({  
                    direction: 90  
                });  
            },  
            exitFullScreen() {  
                this.context.exitFullScreen();  
            },  
            sendDanmu() {  
                this.context.sendDanmu({  
                    text: '哈哈哈',  
                    color: '#FF0000'  
                });  
            },  
            playbackRate() {  
                this.context.playbackRate(2);  
            }  
        }  
    }  
</script>  

<style>  
    .video {  
        width: 750rpx;  
        height: 400rpx;  
        background-color: #808080;  
    }  

    .btn {  
        margin-top: 5px;  
        margin-bottom: 5px;  
        ;  
    }  
    .cover{  
        position: absolute;  

    }  
</style>  

操作步骤:

nvue界面中cover-view 无法覆盖video

预期结果:

覆盖video

实际结果:

nvue界面中cover-view 无法覆盖video

bug描述:

nvue界面中cover-view 无法覆盖video

2020-07-22 17:52 负责人:无 分享
已邀请:
CLP

CLP

无法覆盖什么意思?有视频吗? 提供个demo来测试

  • zfyhaha (作者)

    代码已贴

    2020-07-24 09:40

  • CLP

    回复 zfyhaha: 之前的版本有问题吗

    2020-07-24 11:13

  • zfyhaha (作者)

    回复 CLP: 之前的没问题 2.8+的有问题

    2020-07-24 14:43

zfyhaha

zfyhaha (作者)

nvue界面

<template>  
    <div>  
        <video id='video1' class="video" src="https://vdept.bdstatic.com/6e474b344d6e414c42734258385a6632/4372374e74387452/eb5f0aaf26c61ca2fb3fad28649207e14b2e0e118de4f6e68228c27510277d44e16ff72f6b8cd7db5717a3a56d94bf2cb1815a50f86a8b43451d75ee4a87daf7.mp4?auth_key=1595480349-0-0-00f1f554b3d12827bbaa870b1feafb59" autoplay="false" duration="" controls="true" :danmu-list="list"  
            danmu-btn="true" enable-danmu="true" :loop="true" muted="true" initial-time="" direction="-90"  
            show-mute-btn="true" @play="onstart" @pause="onpause" @ended="onfinish" @error="onfail" @waiting="waiting"  
            @timeupdate="timeupdate" @fullscreenchange="fullscreenchange">  

            <cover-view class="cover">  
                <h1>hahahahahha</h1>  
                <h1>hahahahahha</h1>  
                <h1>hahahahahha</h1>  
                <h1>hahahahahha</h1>  
                <h1>hahahahahha</h1>  
                <h1>hahahahahha</h1>   
            </cover-view>  
            </video>  
        <button class="btn" @click="play">播放</button>  
        <button class="btn" @click="pause">暂停</button>  
        <button class="btn" @click="seek">跳转到指定位置</button>  
        <button class="btn" @click="stop">停止</button>  
        <button class="btn" @click="fullScreen">全屏</button>  
        <button class="btn" @click="exitFullScreen">退出全屏</button>  
        <button class="btn" @click="playbackRate">设置倍速</button>  
        <button class="btn" @click="sendDanmu">发送弹幕</button>  
    </div>  
</template>  

<script>  
    export default {  
        data: {  
            src: "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/第1讲(uni-app产品介绍)- DCloud官方视频教程@20181126-lite.m4v",  
            fil: true,  
            list: [{  
                text: '哈哈哈',  
                color: '#FF0000',  
                time: 2  
            }]  
        },  
        onReady() {  
            this.context = uni.createVideoContext("video1", this);  
        },  
        methods: {  
            onstart(e) {  
                console.log("onstart:"   JSON.stringify(e));  
            },  
            onpause(e) {  
                console.log("onpause:"   JSON.stringify(e));  
            },  
            onfinish(e) {  
                console.log("onfinish:"   JSON.stringify(e));  
            },  
            onfail(e) {  
                console.log("onfail:"   JSON.stringify(e));  
            },  
            fullscreenchange(e) {  
                console.log("fullscreenchange:"   JSON.stringify(e));  
            },  
            waiting(e) {  
                console.log("waiting:"   JSON.stringify(e));  
            },  
            timeupdate(e) {  
                console.log("timeupdate:"   JSON.stringify(e));  
            },  

            play() {  
                this.context.play();  
            },  
            pause() {  
                this.context.pause();  
            },  
            seek() {  
                this.context.seek(20);  
            },  
            stop() {  
                this.context.stop();  
            },  
            fullScreen() {  
                this.context.requestFullScreen({  
                    direction: 90  
                });  
            },  
            exitFullScreen() {  
                this.context.exitFullScreen();  
            },  
            sendDanmu() {  
                this.context.sendDanmu({  
                    text: '哈哈哈',  
                    color: '#FF0000'  
                });  
            },  
            playbackRate() {  
                this.context.playbackRate(2);  
            }  
        }  
    }  
</script>  

<style>  
    .video {  
        width: 750rpx;  
        height: 400rpx;  
        background-color: #808080;  
    }  

    .btn {  
        margin-top: 5px;  
        margin-bottom: 5px;  
        ;  
    }  
    .cover{  
        position: absolute;  

    }  
</style>  
DCloud_uniAD_HDX

DCloud_uniAD_HDX

HBuilderX 2.8.2+ alpha 已修复

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