videoIndex.vue

<template xmlns:align-items="http://www.w3.org/1999/xhtml">
    <div>
        <el-drawer
                :visible.sync="drawer"
                :with-header="false"
                direction="ltr"
                size="250px"
                title="我是标题">
            <Sidebar></Sidebar>
        </el-drawer>
        <Handder></Handder>

        <button class="btn" @click="drawer=true">
            <i class="el-icon-caret-right"></i>
        </button>


        <div class="idxs">
            <div style="margin-top: 10px">
                <el-row :gutter="10">
                    <el-col :span="16">
                        <div>
                            <h1 class="title">这是标题!!!</h1>
                        </div>
                        <div>
                            <span><i class="el-icon-video-play"></i>播放总数</span>
                            <span style="margin-left: 20px"><i class="el-icon-date"></i>弹幕数量</span>
                            <span style="margin-left: 20px"><i class="el-icon-timer"></i>2023-6-10</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div style="margin-left: 120px">
                            <el-card styly="width: 250px;height: 20px">
                                <el-row>
                                    <el-col :span="8">
                                        <el-popover
                                            placement="top-start"
                                            title="标题"
                                            width="200"
                                            trigger="hover"
                                            content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                                            <el-button slot="reference"> <el-avatar icon="el-icon-user-solid" style="width: 40px;height: 40px"></el-avatar></el-button>
                                        </el-popover>
                                    </el-col>
                                    <el-col :span="16">
                                        <div>作者名字</div>
                                        <div style="margin-top: 10px">  <el-button type="primary" round>关注</el-button></div>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <div>
                <el-row :gutter="0">
                    <el-col :span="18">
                        <div>
                            <div id="dplayer" style="height: 585px;width: 1040px"></div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div>
                            <el-card style="width: 300px">

                            </el-card>
                        </div>
                    </el-col>
                </el-row>
            </div>


            <el-card>
                <div style="height: 50px">
                    <p>视频简介</p>
                </div>
            </el-card>

            <div style="margin-top: 20px">
                <hr>
                <el-row :gutter="10">
                    <el-col :span="2">
                        <div>
                          <a-icon type="dingding" />
                          <a-icon type="like" theme="twoTone" />
                          <span><a-icon type="dislike" theme="twoTone" /></span>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div>
                            <el-button circle class="button" icon="el-icon-edit" type="primary"><span>132</span>
                            </el-button>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div>
                            <el-button circle class="button" icon="el-icon-edit" type="primary"><span>12</span>
                            </el-button>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div>
                            <el-button circle class="button" icon="el-icon-edit" type="primary"><span>322</span>
                            </el-button>
                        </div>
                    </el-col>
                    <el-col :span="18">
                        <div></div>
                    </el-col>
                </el-row>
            </div>
        </div>


    </div>
</template>

<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
import DPlayer from 'dplayer';

export default {
    name: "videoIndex",
    components: {Handder, Sidebar},

    data() {
        return {
            dp: "",
            drawer: false
        };
    },

    created() {
    },

    mounted() {
        this.dp = new DPlayer({
            //播放器的一些参数
            container: document.getElementById('dplayer'),
            video: {
                quality: [ // 指定视频清晰度选项
                    {
                        name: '超清', // 清晰度名称
                        url: 'http://youbili-test.oss-cn-beijing.aliyuncs.com/TestVideo-1080P.mp4', // 视频源地址
                        type: 'mp4' // 视频类型
                    },
                    {
                        name: '高清',
                        url: 'http://youbili-test.oss-cn-beijing.aliyuncs.com/2023-05-20%2018-05-48.mp4',
                        type: 'mp4'
                    },
                    {
                        name: '标清',
                        url: 'http://youbili-test.oss-cn-beijing.aliyuncs.com/TestVideo-360P.mp4',
                        type: 'mp4'
                    }
                ],
                defaultQuality: 0, // 指定默认清晰度索引，从0开始
            },
            danmaku: { // 指定弹幕功能选项
                id: 'demo', // 弹幕id，用于区分不同视频的弹幕
                api: 'https://api.prprpr.me/dplayer/', // 弹幕源地址
                user: 'Bing', // 弹幕发送者名称
                bottom: '15%', // 弹幕距离底部的距离
                unlimited: true, // 是否允许无限滚动弹幕
            },
            autoplay: false, //是否自动播放
            theme: '#FADFA3', //主题色
            loop: false, //视频是否循环播放
            lang: 'zh-cn',
            screenshot: false, //是否开启截图
            hotkey: true, //是否开启热键
            preload: 'auto', //视频是否预加载
            volume: 0.7, //默认音量
            mutex: true, //阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
        });
    },

    methods: {}
};
</script>

<style scoped>
@media screen and (min-width: 1970px) {
    .idxs {
        margin: 60px auto;
        width: calc(100% - 290px);
        max-width: 1570px;
        min-width: 1200px;
    }
}

@media screen and (max-width: 1969px) {
    .idxs {
        /*width: 1270px;*/
        /*min-width: 1000px;*/
        /*margin-top: 60px;*/
        /*margin-left: 270px;*/
        /*padding: 40px;*/
        width: calc(100% - 290px);
        max-width: 1570px;
        min-width: 1200px;
        margin: 60px auto;
    }
}

.btn {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 80px;
    width: 40px;
    text-align: center;
    line-height: 80px;
    cursor: pointer;
    background-color: skyblue;
    color: #fff;
    font-size: 30px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.btn:hover {
    background-color: steelblue;
}

.button {
    margin-top: 10px;
    margin-left: 5px;
}

.title {
    font-family: "Microsoft YaHei", Arial, sans-serif;
    font-size: 36px;
    font-weight: bold;
}

</style>