uniapp-【cover-view】【cover-image】

1. 可以覆盖的原生组件：map、video、textarea、canvas
2. 支持的事件：click
3. 不支持的 CSS

• position: fixed
• opacity
• overflow
• padding
• linebreak
• white-space

注意：nvue的cover-view不在上述限制中，它仅支持且全部支持nvue的所有css

1. App端 cover-image 使用本地图像的话，打包前需要设置资源为释放模式，在manifest文件内app-plus新增runmode节点，设置值为liberate。

cover-view

属性名	类型	默认值	说明
scroll-top	number/string		设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效

cover-image

属性名	类型	默认值	说明
src	String		图标路径。支持本地路径、网络路径。不支持 base64 格式。
@load	eventhandle		图片加载成功时触发
@error	eventhandle		图片加载失败时触发

<template>
    <view class="page">
        <video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="disable" 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">
            <cover-view class="controls-title">简单的自定义 controls</cover-view>
            <cover-image class="controls-play img" @click="play" src="/static/play.png"></cover-image>
            <cover-image class="controls-pause img" @click="pause" src="/static/pause.png"></cover-image>
        </video>
    </view>
</template>
<script>
    export default {
        data() {
            return {}
        },
        mounted() {
            this.videoCtx = uni.createVideoContext('demoVideo')
        },
        methods: {
            play(event) {
                this.videoCtx.play();
                uni.showToast({
                    title: '开始播放',
                    icon: 'none'
                });
            },
            pause(event) {
                this.videoCtx.pause();
                uni.showToast({
                    title: '暂停播放',
                    icon: 'none'
                });
            }
        }
    }
</script>
<style>
    .page {
        display: flex;
        justify-content: center;
    }

    .video {
        position: relative;
    }

    cover-view,
    cover-image {
        display: inline-block;
    }

    .img {
        position: absolute;
        width: 100rpx;
        height: 100rpx;
        top: 50%;
        margin-top: -50rpx;
    }

    .controls-play {
        left: 50rpx;
    }

    .controls-pause {
        right: 50rpx;
    }

    .controls-title {
        width: 100%;
        text-align: center;
        color: #FFFFFF;
    }
</style>