<template>
    <view class="content" >
        <zxVideo :url="urls" :isSpeed="isSpeed" :showCasting="showCasting" :lockButton="lockButton"></zxVideo>
    </view>
</template>

<script>
    import zxVideo from '@/components/zx-video/zx-video.vue';
    export default {
        components: {
            zxVideo
        },
        data() {
            return {
                urls:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4',
                //是否打开倍速功能
                isSpeed:true,
                 //是否显示投屏按钮
                showCasting:true,
                //是否显示锁屏按钮
                lockButton:true
            }
        },
        onLoad(option) {
           
        },
        onShow() {
        },
        methods: {
            
        }
    }
</script>

<style>
    page {
        width: 100%;
        height: auto;
    }
    .content {
        position: relative;
        width: 750rpx;
        height: auto;
        min-height: 100vh;
        margin: 0;
        padding: 0;
        background-color: #fff;
        
    }
    .top-video {
        width: 100%;
        height: 422rpx;
    }
    .mvdetail {
        width: 100%;
        padding: 50rpx 40rpx 30rpx;
        box-sizing: border-box;
        
    }
    .mvdetail-name {
        float: left;
        width: 100%;
            font-size: 32rpx;
            font-weight: 700;
            text-align: left;
            color: #333;
            text-overflow: ellipsis;
    }
    .mvdetail-tag {
        float: left;
        width: 100%;
            font-size: 24rpx;
            font-weight: 400;
            text-align: left;
            color: #6cb5ff;
            margin-top: 10rpx;
    }
    .mvdetail-tag-item {
        margin-right: 20rpx;
    }
    .mvdetail-desc {
        float: left;
        width: 100%;
        font-size: 24rpx;
            font-weight: 400;
            text-align: left;
            color: #666;
            margin-top: 30rpx;
                padding-bottom: 24rpx;
    }
    .mvdetail-btn {
        float: left;
        width: 100%;
    }
    .share-item {
        width: 134rpx;
        height: 46rpx;
        border: 2rpx solid #d2d2d2;
        border-radius: 24rpx;
        padding: 0 18rpx;
        box-sizing: border-box;
    }
    .share-item-img {
        float: left;
        width: 26rpx;
        margin-top: 8rpx;
    }
    .share-item-title {
        float: left;
        font-size: 24rpx;
            font-weight: 400;
            color: #666;
            line-height: 1;
            margin: 10rpx 0 0 16rpx;
    }
    
    .video-heizith-menu {
        position: absolute;
        right: 30rpx;
        bottom: 20%;
        z-index: 998;
        font-size: 20rpx;
        width: 52rpx;
        height: 40rpx;
        text-align: center;
        line-height: 38rpx;
        border: 1rpx solid #fff;
        border-radius: 8rpx;
        color: #fff;
    }
    
    .modal {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999;
    }
    .modal-content {
        position: absolute;
        left: 46rpx;
        bottom: 20%;
        z-index: 9999;
        
    }
    .modal-content-txt {
        text-align: left;
        padding-bottom: 20rpx;
        color: #fff;
        font-size: 18rpx;
        z-index: 9999;
    }
        
    .speed-option {
        float: left;
        width: 72rpx;
        height: 72rpx;
        text-align: center;
        line-height: 68rpx;
        font-size: 22rpx;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 4rpx;
        margin-right: 10rpx;
        z-index: 9999;
        
        
    }
    .speed-option.active {
        /* border-bottom: 2rpx solid #fd750b; */
        color: #fd750b;
    }
    
</style>
