常量提取,优化视频模块布局

 src/api/fileManage.js

@@ -16,6 +16,17 @@
}

/**
 * 自定义文件上传
 */
export function myFileInfoUpload (parameter) {
  return axios({
    url: '/outside/sysFileInfo/upload',
    method: 'post',
    data: parameter
  })
}

/**
 * 下载文件
 *
 * @author yubaoshan

 src/components/group/MyVideo.vue

@@ -1,9 +1,9 @@
<template>
    <div class="myModal">
        <a-modal v-model="visible" title="" :footer="null" :mask="false" :maskClosable="false" :placement="placement"
        <a-modal v-model="visible" title="" :footer="null" :mask="false" :maskClosable="true"
            :bodyStyle="{'overflow':'overlay','maxHeight': '550px'}">
            <div>11</div>

            <div>{{this.placement}}</div>
            <videoPlayBox></videoPlayBox>
        </a-modal>
    </div>

@@ -13,17 +13,21 @@
    import {
        history
    } from '../../api/blogArticleComment.js'

    import videoPlayBox from "../mini/box15-videoPlayBox.vue"
    export default {
        components: {
            videoPlayBox
        },
        data() {
            return {
                visible: false,
                placement: "bottom"
                placement: "fbottom"
            }
        },
        beforeMount() {},
        methods: {
            showModal() {
            showModal(param) {
                this.placement = param.id
                this.visible = true;
            },
            handleCancel(e) {
@@ -34,7 +38,6 @@
    }
</script>
<style scoped>

    a {
        color: black;
    }

 src/components/group/articleListOld.vue

 src/components/group/articleListScorll.vue

@@ -70,6 +70,12 @@
            typeId: function(newValue, oldValue) {
                this.busy = true;
                this.$message.info('loading', 0.3);
				
                //有条件不刷新
                if (newValue == undefined && oldValue != "") {
                    return
                }

                this.onChange(1);
            },
        },

 src/components/group/tempBoxActicle.v

File was deleted

 src/components/group/tempFormCheck.vue

File was deleted

 src/components/group/tempFriendBox.vue

File was deleted

 src/components/group/tempScroll.vue

File was deleted

 src/components/layouts/baseLayout.vue

@@ -12,7 +12,7 @@
        <a-layout-footer>
            <AplayerBox />
            <tagFooter />
            <MyVideo ref="MyVideo"  />
            <MyVideo ref="MyVideo" />
        </a-layout-footer>

        <a-back-top>
@@ -40,8 +40,8 @@
            }
        },
        methods: {
            showMyVideo() {
                this.$refs.MyVideo.showModal();
            showMyVideo(param) {
                this.$refs.MyVideo.showModal(param);
            },
            // 下载文件
            down: function() {

 src/components/mini/box-new-article.vue

@@ -4,8 +4,12 @@
            <div class="miniTag" v-if="isTop==1">置顶</div>
            <div class="post_cover left_radius" v-if="index%2==0">

                <a :href="jumpURL" target="_blank" class="no-underline" v-if="articleFileType==5"
                    @click="showMsg(articleFileType,jumpURL)">
                <router-link :to="{path:'/platform'}" :title="title" v-if="articleFileType==myConstant.fileTypeVideo">
                    <div class="block left_radius"></div>
                    <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
                </router-link>
                <a :href="jumpURL" target="_blank" class="no-underline"
                    v-else-if="articleFileType==myConstant.fileTypeShort" @click="showMsg(articleFileType,jumpURL)">
                    <div class="block left_radius"></div>
                    <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
                </a>
@@ -16,27 +20,22 @@
            </div>

            <div class="post_cover right_radius" v-else>
                <a :href="jumpURL" target="_blank" class="no-underline" v-if="articleFileType==5"
                    @click="showMsg(articleFileType,jumpURL)">
                <router-link :to="{path:'/platform'}" :title="title" v-if="articleFileType==myConstant.fileTypeVideo">
                    <div class="block left_radius"></div>
                    <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
                </router-link>
                <a :href="jumpURL" target="_blank" class="no-underline"
                    v-else-if="articleFileType==myConstant.fileTypeShort" @click="showMsg(articleFileType,jumpURL)">
                    <div class="block left_radius"></div>
                    <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
                </a>
                <router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title" v-else>
                    <div class="block right_radius"></div>
                    <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
                    <!-- <img class="post_bg" src="https://unpkg.zhimg.com/ahzo@1.0.3/blogpic/1.jpg" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" :alt="title"> -->
                </router-link>
            </div>

            <div class="recent-post-info">

                <!-- <a :href="jumpURL" target="_blank" class="article-title" v-if="articleFileType==5"
                    @click="showMsg(articleFileType,jumpURL)">
                    <a-icon type="lock" style="color:rgba(0,0,0,.25)" v-if="authStatus==3" />
                    <a-icon type="stop" style="color:rgba(0,0,0,.25)" v-if="authStatus==2" />
                    {{title}}
                    <a-badge :count="1" dot v-if="isAnyUpdate==1" title="最近有更新"></a-badge>
                </a> -->

                <router-link :to="{path:'/mdDetail',query:{id:id,articleFileType:articleFileType}}"
                    class="article-title">
@@ -58,7 +57,7 @@
                        <a-icon type="book" />
                        <router-link :to="{path:'/articleList',query:{typeId:articleTypeId}}"
                            class="article-meta__categories"> {{articleTypeName}}</router-link>
                        <span v-if="articleFileType==5">
                        <span v-if="articleFileType==myConstant.fileTypeShort">
                            <span v-if="jumpURL !=null && jumpURL!=''">
                                <span class="article-meta__separator" style="margin: 0px 3px ;">|</span>
                                <span class="post-meta-date">
@@ -73,6 +72,17 @@
                                    <a-icon type="thunderbolt" />碎碎念
                                </span>
                            </span>
                        </span>

                        <span v-if="articleFileType==myConstant.fileTypeVideo">
                            <span v-if="jumpURL !=null && jumpURL!=''">
                                <span class="article-meta__separator" style="margin: 0px 3px ;">|</span>
                                <span class="post-meta-date">
                                    <a-icon type="video-camera" />
                                    <a :href="jumpURL" target="_blank" class="no-underline"> 视频 </a>
                                </span>
                            </span>

                        </span>
                        <!-- <a class="article-meta__categories" href="#"> {{tag}}</a> -->
                    </span>
@@ -90,10 +100,13 @@
        NotificationOutlined
    } from '@ant-design/icons-vue';

    import myConstant from "../../config/myConstant.js"


    export default {
        methods: {
            showMsg(articleFileType, jumpURL) {
                if (articleFileType == 5 && (jumpURL == null || jumpURL == "")) {
                if (articleFileType == myConstant.fileTypeShort && (jumpURL == null || jumpURL == "")) {
                    this.$message.info('这只是一句碎碎念,没有更多内容啦', 3);
                    return
                }
@@ -148,6 +161,7 @@
        },
        data() {
            return {
                myConstant: myConstant,
                img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/1.jpg\"",
            }
        }

 src/components/mini/box10-add.vue

@@ -21,17 +21,11 @@
                </span>
            </a-form-model-item>


            <a-form-model-item label="日志文件" v-show="!form.online">
                <!-- <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    :default-file-list="form.blogFileList">
                    <a-button>
                        <a-icon type="upload" /> 限 markdown/html
                    </a-button>
                </a-upload> -->

                <a-upload :customRequest="customRequest" name="file" :showUploadList="true" @change="handleChange"
                    :default-file-list="form.blogFileList" :beforeUpload="beforeUpload">
                    :default-file-list="form.blogFileList" :beforeUpload="beforeUpload"
                    :data="{'fileType':fileTypeMarkDown}">

                    <a-button>
                        <a-icon type="upload" />限 markdown/html
@@ -69,13 +63,16 @@
                <a-form-model-item label=" 日志类型">
                    <a-select v-model="form.blogType" mode="default" placeholder=""
                        :getPopupContainer="getCalendarContainer()">
                        <a-select-option   value="1">
                        <a-select-option value="1">
                            markdown
                        </a-select-option>
                        <a-select-option   value="2">
                        <a-select-option value="2">
                            html
                        </a-select-option>
                        <a-select-option   value="5">
                        <a-select-option value="3">
                            video
                        </a-select-option>
                        <a-select-option value="5">
                            fast(闪念)
                        </a-select-option>
                    </a-select>
@@ -106,16 +103,9 @@


                <a-form-model-item label="封面">
                    <!-- <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture"
                        :default-file-list="form.coverFileList" class="upload-list-inline">
                        <a-button>
                            <a-icon type="upload" /> jpg/png/jpeg..
                        </a-button>
                    </a-upload> -->

                    <a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture"
                        @change="handleChangeCoverFile"
                        :default-file-list="form.coverFileList">
                        @change="handleChangeCoverFile" :default-file-list="form.coverFileList" 
                        :beforeUpload="beforeUploadCover" :data="{'fileType':fileTypeCover}">
                        <a-button>
                            <a-icon type="upload" />jpg/png/jpeg..
                        </a-button>
@@ -188,13 +178,15 @@
<script>
    import moment from "moment";
    import {
        sysFileInfoUpload
        sysFileInfoUpload,
        myFileInfoUpload
    } from '../../api/fileManage.js';

    import {
        queryBlogArticleType
    } from '../../api/blogArticleType.js'

    import myConstant from "../../config/myConstant.js"

    export default {
        beforeMount() {
@@ -222,6 +214,8 @@
            };

            return {
                fileTypeMarkDown: myConstant.fileTypeMarkDown,
                fileTypeCover: myConstant.fileTypeCover,
                blogArticleType: [],
                tags: [],
                inputVisible: false,
@@ -244,7 +238,7 @@
                    publishDate: "",
                    lock: false,
                    top: false,
                    sliderValue:50,
                    sliderValue: 50,
                    auth: 1,
                    password: "",
                    fileId: null,
@@ -295,6 +289,13 @@
            };
        },
        methods: {

            beforeUploadCover(file, fileList) {
                if (this.form.coverFileList.length > 1) {
                    this.$message.error('这里最多上传一个文件');
                    return false;
                }
            },
            beforeUpload(file, fileList) {
                return new Promise((resolve, reject) => {
                    if (this.form.fileId != null) {
@@ -345,7 +346,9 @@
            customRequest(option) {
                const formData = new FormData()
                formData.append('file', option.file)
                sysFileInfoUpload(formData).then((res) => {
                formData.append('fileType', option.data.fileType)
                formData.append('authCode', this.form.secret)
                myFileInfoUpload(formData).then((res) => {
                    if (res.success) {
                        this.$message.success('上传成功')


 src/components/mini/box14-video.vue

@@ -1,248 +1,291 @@
<style lang="less" scoped>
    .videoBoxList {
        display: flex;
        // justify-content: space-evenly;
        flex-wrap: wrap;
        // align-content:flex-start;
        min-height: 700px;
        align-items: stretch;
    }

    .myVideo {
        position: relative;
        // width: 220px;
        // height: 140px;
        width: 300px;
        height: 180px;
        background-color: #565656;
        border-radius: 10px;
        margin: 10px;
        display: flex;

        .face {
            z-index: 1;
        }

        img {
            max-width: 100%;
        }
    }


    .myVideo:hover {
        .mark {
            background-color: #000;
            display: initial;
        }

        .player-video-state {
            // display: initial;
        }
    }




    .dplayer {
        width: 500px;
    }

    .mark {
        opacity: 0.45;
        width: 100%;
        height: 100%;
        position: absolute;
        display: none;
    }

    .player-video-state {
        // position: absolute;
        left: 43%;
        top: 35%;
        width: 50px;
        height: 50px;
        display: none;
    }
</style>

<template>
    <div>
        <div class="videoBoxList">
            <div class="myVideo" v-for=" (temp,index) in ['test1','test2','test3','test4','test5']">
                <div :id="temp" :ref="temp" class="dplayer"></div>
                <!-- <div class="mark" ></div> -->
                <!-- <img src="qq.png"> -->
                <!-- 视频 -->
                <div class="player-video-state">
                    <span class="bp-svgicon">
                        <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink">
                            <defs>
                                <path id="pid-1-svgo-a" d="M0 0h80v80H0z"></path>
                                <path
                                    d="M52.546 8.014a3.998 3.998 0 014.222 3.077c.104.446.093.808.039 1.138a2.74 2.74 0 01-.312.881c-.073.132-.16.254-.246.376l-.257.366-.521.73c-.7.969-1.415 1.926-2.154 2.866l-.015.02a240.945 240.945 0 015.986.341l1.643.123.822.066.41.034.206.018.103.008.115.012c1.266.116 2.516.45 3.677.975a11.663 11.663 0 013.166 2.114c.931.87 1.719 1.895 2.321 3.022a11.595 11.595 0 011.224 3.613c.03.157.046.316.068.474l.015.119.013.112.022.206.085.822.159 1.646c.1 1.098.19 2.198.27 3.298.315 4.4.463 8.829.36 13.255a166.489 166.489 0 01-.843 13.213c-.012.127-.034.297-.053.454a7.589 7.589 0 01-.072.475l-.04.237-.05.236a11.762 11.762 0 01-.74 2.287 11.755 11.755 0 01-5.118 5.57 11.705 11.705 0 01-3.623 1.263c-.158.024-.316.052-.475.072l-.477.053-.821.071-1.644.134c-1.096.086-2.192.16-3.288.23a260.08 260.08 0 01-6.578.325c-8.772.324-17.546.22-26.313-.302a242.458 242.458 0 01-3.287-.22l-1.643-.129-.822-.069-.41-.035-.206-.018c-.068-.006-.133-.01-.218-.02a11.566 11.566 0 01-3.7-.992 11.732 11.732 0 01-5.497-5.178 11.73 11.73 0 01-1.215-3.627c-.024-.158-.051-.316-.067-.475l-.026-.238-.013-.119-.01-.103-.07-.823-.132-1.648a190.637 190.637 0 01-.22-3.298c-.256-4.399-.358-8.817-.258-13.233.099-4.412.372-8.811.788-13.197a11.65 11.65 0 013.039-6.835 11.585 11.585 0 016.572-3.563c.157-.023.312-.051.47-.07l.47-.05.82-.07 1.643-.13a228.493 228.493 0 016.647-.405l-.041-.05a88.145 88.145 0 01-2.154-2.867l-.52-.73-.258-.366c-.086-.122-.173-.244-.246-.376a2.74 2.74 0 01-.312-.881 2.808 2.808 0 01.04-1.138 3.998 3.998 0 014.22-3.077 2.8 2.8 0 011.093.313c.294.155.538.347.742.568.102.11.19.23.28.35l.27.359.532.72a88.059 88.059 0 012.06 2.936 73.036 73.036 0 011.929 3.03c.187.313.373.628.556.945 2.724-.047 5.447-.056 8.17-.038.748.006 1.496.015 2.244.026.18-.313.364-.624.549-.934a73.281 73.281 0 011.93-3.03 88.737 88.737 0 012.059-2.935l.533-.72.268-.359c.09-.12.179-.24.281-.35a2.8 2.8 0 011.834-.881zM30.13 34.631a4 4 0 00-.418 1.42 91.157 91.157 0 00-.446 9.128c0 2.828.121 5.656.364 8.483l.11 1.212a4 4 0 005.858 3.143c2.82-1.498 5.55-3.033 8.193-4.606a177.41 177.41 0 005.896-3.666l1.434-.942a4 4 0 00.047-6.632 137.703 137.703 0 00-7.377-4.708 146.88 146.88 0 00-6.879-3.849l-1.4-.725a4 4 0 00-5.382 1.742z"
                                    id="pid-1-svgo-d"></path>
                                <filter x="-15.4%" y="-16.3%" width="130.9%" height="132.5%"
                                    filterUnits="objectBoundingBox" id="pid-1-svgo-c">
                                    <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
                                    <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1">
                                    </feGaussianBlur>
                                    <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"
                                        in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
                                    <feOffset in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
                                    <feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter2"
                                        result="shadowBlurOuter2">
                                    </feGaussianBlur>
                                    <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
                                        in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
                                    <feMerge>
                                        <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                                        <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
                                    </feMerge>
                                </filter>
                            </defs>
                            <g fill="none" fill-rule="evenodd" opacity=".8">
                                <mask id="pid-1-svgo-b" fill="#fff">
                                    <use xlink:href="#pid-1-svgo-a"></use>
                                </mask>
                                <g mask="url(#pid-1-svgo-b)">
                                    <use fill="#000" filter="url(#pid-1-svgo-c)" xlink:href="#pid-1-svgo-d"></use>
                                    <use fill="#FFF" xlink:href="#pid-1-svgo-d"></use>
                                </g>
                            </g>
                        </svg>
                    </span>
                </div>
            </div>
        <div class="mySecretSamll" v-if="data==null|| data.length==0">
            <p>
                <a-icon type="delete" /> 空空如也..
            </p>
        </div>
        <div class="gridClass">
            <div class="entry-preview" v-for="item in data">
                <div class="thumbnail_box" @click="showMyVideo(item.id)">
                    <div class="thumbnail">
                        <img :src="item.coverFileURL" alt="" loading="lazy" :onerror="img404">
                    </div>
                </div>
                <div class="entry-post">
                    <div class="entry-header">
                        <h5 class="entry-title">
                            <a href="#" rel="bookmark">{{item.title}}</a>
                        </h5>
                        <div class="post_content">
                            {{item.introduce}}
                        </div>
                    </div>
                    <div class="entry-meta">
                        <div class="post-categories">
                            <span class="tag vcard">
                                <a-icon type="book" />
                                <a href="#" rel="category tag"> {{item.articleTypeName}}</a>
                            </span>
                            <!-- <span class="tag-list">
                                <a href="#" rel="tag">影评</a>
                                <a href="#" rel="tag">电影</a>
                                <a href="#" rel="tag">蜘蛛侠</a>
                            </span> -->
                        </div>
                        <div class="post-on">
                            <span class="entry-date">
                                <a-icon type="calendar" />
                                <a href="#"  rel="bookmark">
                                    {{item.publishDate}}
                                </a>
                            </span>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <a-row type="flex" justify="center">
            <div>
                <a-pagination @change="onChange" :showQuickJumper="true" :size="page.size" v-model="page.current"
                    :defaultPageSize="page.defaultPageSize" :pageSize="page.pageSize" :total="page.total" />
            </div>
        </a-row>
    </div>
</template>

<script>
    import Hls from 'hls.js'
    import DPlayer from 'dplayer'
    import {
        queryBlogArticleList
    } from '../../api/blogArticle.js'

    import myConstant from "../../config/myConstant.js"
	
    export default {
        data() {
            return {
                dp: null,
                video: {},
                video1: {},
                video2: {},
            }
        },
        methods: {
            myPlay() {
                this.$message.info("start play..")
            },
            loadVideo(videoInfo, index) {
                this.dp = new DPlayer({
                    element: document.getElementById(index),
                    //logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
                    // hotkey: true, // 是否支持热键，调节音量，播放，暂停等
                    mutex: false, //  防止同时播放多个用户，在该用户开始播放时暂停其他用户
                    theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
                    loop: false, // 是否自动循环
                    lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
                    // screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
                    preload: "auto", // 自动预加载
                    volume: 0.1, // 初始化音量
                    playbackSpeed: [2, 1, 0.5], //可选的播放速度，可自定义
                    contextmenu: [
                        //  自定义上下文菜单
                        // 右键菜单
                        {
                            text: "b站",
                            link: "https://www.bilibili.com"
                        },
                        {
                            text: "选项二",
                            click: player => {
                                console.log(player);
                            }
                        }
                    ],
                    highlight: [
                        //进度条上的自定义时间标记
                        // 进度条时间点高亮
                        {
                            text: "10M",
                            time: 60
                        },
                        {
                            text: "20M",
                            time: 120
                        }
                    ],
                    video: {
                        pic: videoInfo.img, // 视频封面
                        url: videoInfo.url,
                        type: videoInfo.type,
                        customType: {
                            customHls: function(video, player) {
                                const hls = new Hls()
                                hls.loadSource(video.src)
                                hls.attachMedia(video)
                            }
                        }
                    }
                })
                page: {
                    size: "small",
                    total: 1,
                    pageSize: 6,
                    current: 1,
                    defaultPageSize: 6
                },
                data: [],
                img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/idea_beijing.jpg\"",
            }
        },
        mounted() {
            this.video1 = {
                img: "http://t.inleft.com/share/media_photo/faye_video.png",
                url: "http://t.inleft.com/share/myVideo/faye/faye.m3u8",
                type: "customHls"
            this.onChange(this.page.current);
        },
        methods: {
            onChange(current) {
                this.page.current = current;
                queryBlogArticleList({
                    pageNo: current,
                    pageSize: this.page.pageSize,
                    fileType: myConstant.fileTypeVideo
                }).then((res) => {
                    this.page.total = Number(res.data.total)
                    this.page.pageSize = Number(res.data.size);
                    this.data = res.data.records;
                    return res
                })
            },
            showMyVideo(param) {
                this.$emit('showMyVideo', {
                    id: param
                })
            }
            this.video2 = {
                img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
                url: "http://t.inleft.com/share/myVideo/canon/canon.m3u8",
                type: "customHls"
            }
            this.video3 = {
                img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
                url: "http://t.inleft.com/share/mp3/EOPMusic%283%29.mp3",
                type: "normal"
            }
            this.video4 = {
                img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
                url: "http://t.inleft.com/share/mp3/EOPMusic%284%29.mp3",
                type: "normal"
            }
            this.video5 = {
                img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
                url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
                type: "normal"
            }

            // getVideo: ajax request for getting videoInfo
            /*   getVideo().then(res => {
                this.video = res.data.video
                this.laodVideo(this.video)
              }) */
            this.video = {
                //封面
                //img: "https://cn.bing.com/th?id=OHR.MeotoIwa_ZH-CN3126370410_1920x1080.jpg&rf=LaDigue_1920x1080.jpg",
                img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
                // video: "https://vod3.bdzybf3.com/20210509/ZMHA3RpS/1000kb/hls/index.m3u8",
                // video: "http://t.inleft.com/share/ckplayer/ckplayer-master/sample/test/video_tieba.m3u8",
                // video: videoUrl,
                // video: "http://t.inleft.com/share/mp3/inleft-test-20211103-rainbow.mp3",
            }
            this.loadVideo(this.video1, "test1")
            this.loadVideo(this.video2, "test2")
            this.loadVideo(this.video3, "test3")
            this.loadVideo(this.video4, "test4")
            this.loadVideo(this.video5, "test5")

            // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
            // document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
            document.querySelector(".dplayer-mask").remove();
            document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源
            let length = document.querySelectorAll(".dplayer-menu-item").length;
            document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息
            document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息
        }
    }
</script>
<style lang="less">
    @--border-radius: 16px;
    @--s-background: 16px;
    @--animation-mo: margin 1s cubic-bezier(0.62, 0.21, 0.25, 1) 1 backwards, opacity .75s cubic-bezier(0.62, 0.21, 0.25, 1) 1 backwards;

    @font-face {
        font-family: "iconfont";
        /* Project id 2762112 */
        src: url('http://t.inleft.com/share/z%E5%AD%97%E4%BD%93%E5%BA%93/iconfont.woff2') format('woff2');
    }

    .gridClass {
        grid-template-columns: repeat(4, 1fr);
        display: grid;
        clear: both;
        gap: 2rem;
        padding-bottom: 20px;
        // background-color: #666;

        a {
            color: #555;
        }

        .item1 {
            grid-column-start: 1;
            grid-column-end: 3;
        }

        .entry-preview {
            border-radius: @--border-radius;
            background: @--s-background, white;
            animation: @--animation-mo;
            transition: all .5s;
            box-shadow: 0 5px 30px 0 rgba(0, 0, 0, .05);
            // background-color: red;

            display: flex;
        }

        .thumbnail_box {
            width: 50%;
            min-width: 50%;
            left: 0;

            .thumbnail {
                position: relative;
                width: 100%;
                height: 100%;
                border-radius: @--border-radius;
                overflow: hidden;
                background: rgba(0, 0, 0, .05);

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transform: scale(1.1);
                    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
                    border-radius: @--border-radius;
                }
            }
        }

        header {
            display: block;
        }

        .entry-title,
        .post_content {
            margin: 0 0 .5rem 0;
        }

        h5 {
            font-size: 1.05rem;
        }

        .entry-meta,
        .post_content {
            opacity: .6;
        }

        .post_content {

            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            /* autoprefixer: off */
            -webkit-line-clamp: 4;
            /* autoprefixer: on */
        }

        .entry-preview .entry-meta {
            display: flex;
            justify-content: space-between;
            font-size: .5rem;
            padding: .5rem 0 0 0;
            flex-wrap: wrap;
        }

        .vcard {
            margin: 0 1em 0 0;
        }

        .entry-post {
            padding: 1rem;
            transition: all .5s;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            // height: 100%;
            // padding: calc(70% + 1rem) 1rem 1rem 1rem;

        }

        .tag-list a {
            margin: 0 .5em 0 0;
            font-size: 14px;
        }
    }

    .thumbnail_box:hover .thumbnail img {
        transform: scale(1) translate3d(0, 0, 0);
        filter: blur(10px) brightness(.8);
    }

    .thumbnail_box:hover .thumbnail:after {
        width: 100%;
        height: 100%;
        opacity: 1;
    }

    .thumbnail:before {
        content: "\ec2a";
        opacity: .1;
        font-size: 3rem;
    }

    .thumbnail:after {
        width: 70%;
        border: 1px solid rgba(255, 255, 255, .75);
        opacity: 0;
        height: 70%;
        transition: all .5s;
        z-index: 2;
        color: white;
        border-radius: @--border-radius;
        content: "\e627";
        font-size: 1rem;
        text-shadow: 0 1px 5px rgb(0 0 0 / 30%);
    }

    .thumbnail:before,
    .thumbnail:after {
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'iconfont';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
    }

    @media screen and (max-width:1024px) {
        .gridClass {
            grid-row-gap: 2rem;
            grid-column-gap: 0rem;
            grid-template-columns: repeat(1, 1fr);

            .entry-preview {
                display: block;
            }

            .thumbnail_box {
                min-width: 100%;
            }
        }


    }

    @media screen and (min-width:1025px) {
        .gridClass {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>

 src/components/mini/box14-video2.vue

File was deleted

 src/components/mini/box14-video3.vue

New file
@@ -0,0 +1,248 @@
<style lang="less" scoped>
    .videoBoxList {
        display: flex;
        // justify-content: space-evenly;
        flex-wrap: wrap;
        // align-content:flex-start;
        min-height: 700px;
        align-items: stretch;
    }

    .myVideo {
        position: relative;
        // width: 220px;
        // height: 140px;
        width: 300px;
        height: 180px;
        background-color: #565656;
        border-radius: 10px;
        margin: 10px;
        display: flex;

        .face {
            z-index: 1;
        }

        img {
            max-width: 100%;
        }
    }


    .myVideo:hover {
        .mark {
            background-color: #000;
            display: initial;
        }

        .player-video-state {
            // display: initial;
        }
    }




    .dplayer {
        width: 500px;
    }

    .mark {
        opacity: 0.45;
        width: 100%;
        height: 100%;
        position: absolute;
        display: none;
    }

    .player-video-state {
        // position: absolute;
        left: 43%;
        top: 35%;
        width: 50px;
        height: 50px;
        display: none;
    }
</style>

<template>
    <div>
        <div class="videoBoxList">
            <div class="myVideo" v-for=" (temp,index) in ['test1','test2','test3','test4','test5']">
                <div :id="temp" :ref="temp" class="dplayer"></div>
                <!-- <div class="mark" ></div> -->
                <!-- <img src="qq.png"> -->
                <!-- 视频 -->
                <div class="player-video-state">
                    <span class="bp-svgicon">
                        <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink">
                            <defs>
                                <path id="pid-1-svgo-a" d="M0 0h80v80H0z"></path>
                                <path
                                    d="M52.546 8.014a3.998 3.998 0 014.222 3.077c.104.446.093.808.039 1.138a2.74 2.74 0 01-.312.881c-.073.132-.16.254-.246.376l-.257.366-.521.73c-.7.969-1.415 1.926-2.154 2.866l-.015.02a240.945 240.945 0 015.986.341l1.643.123.822.066.41.034.206.018.103.008.115.012c1.266.116 2.516.45 3.677.975a11.663 11.663 0 013.166 2.114c.931.87 1.719 1.895 2.321 3.022a11.595 11.595 0 011.224 3.613c.03.157.046.316.068.474l.015.119.013.112.022.206.085.822.159 1.646c.1 1.098.19 2.198.27 3.298.315 4.4.463 8.829.36 13.255a166.489 166.489 0 01-.843 13.213c-.012.127-.034.297-.053.454a7.589 7.589 0 01-.072.475l-.04.237-.05.236a11.762 11.762 0 01-.74 2.287 11.755 11.755 0 01-5.118 5.57 11.705 11.705 0 01-3.623 1.263c-.158.024-.316.052-.475.072l-.477.053-.821.071-1.644.134c-1.096.086-2.192.16-3.288.23a260.08 260.08 0 01-6.578.325c-8.772.324-17.546.22-26.313-.302a242.458 242.458 0 01-3.287-.22l-1.643-.129-.822-.069-.41-.035-.206-.018c-.068-.006-.133-.01-.218-.02a11.566 11.566 0 01-3.7-.992 11.732 11.732 0 01-5.497-5.178 11.73 11.73 0 01-1.215-3.627c-.024-.158-.051-.316-.067-.475l-.026-.238-.013-.119-.01-.103-.07-.823-.132-1.648a190.637 190.637 0 01-.22-3.298c-.256-4.399-.358-8.817-.258-13.233.099-4.412.372-8.811.788-13.197a11.65 11.65 0 013.039-6.835 11.585 11.585 0 016.572-3.563c.157-.023.312-.051.47-.07l.47-.05.82-.07 1.643-.13a228.493 228.493 0 016.647-.405l-.041-.05a88.145 88.145 0 01-2.154-2.867l-.52-.73-.258-.366c-.086-.122-.173-.244-.246-.376a2.74 2.74 0 01-.312-.881 2.808 2.808 0 01.04-1.138 3.998 3.998 0 014.22-3.077 2.8 2.8 0 011.093.313c.294.155.538.347.742.568.102.11.19.23.28.35l.27.359.532.72a88.059 88.059 0 012.06 2.936 73.036 73.036 0 011.929 3.03c.187.313.373.628.556.945 2.724-.047 5.447-.056 8.17-.038.748.006 1.496.015 2.244.026.18-.313.364-.624.549-.934a73.281 73.281 0 011.93-3.03 88.737 88.737 0 012.059-2.935l.533-.72.268-.359c.09-.12.179-.24.281-.35a2.8 2.8 0 011.834-.881zM30.13 34.631a4 4 0 00-.418 1.42 91.157 91.157 0 00-.446 9.128c0 2.828.121 5.656.364 8.483l.11 1.212a4 4 0 005.858 3.143c2.82-1.498 5.55-3.033 8.193-4.606a177.41 177.41 0 005.896-3.666l1.434-.942a4 4 0 00.047-6.632 137.703 137.703 0 00-7.377-4.708 146.88 146.88 0 00-6.879-3.849l-1.4-.725a4 4 0 00-5.382 1.742z"
                                    id="pid-1-svgo-d"></path>
                                <filter x="-15.4%" y="-16.3%" width="130.9%" height="132.5%"
                                    filterUnits="objectBoundingBox" id="pid-1-svgo-c">
                                    <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
                                    <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1">
                                    </feGaussianBlur>
                                    <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"
                                        in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
                                    <feOffset in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
                                    <feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter2"
                                        result="shadowBlurOuter2">
                                    </feGaussianBlur>
                                    <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
                                        in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
                                    <feMerge>
                                        <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                                        <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
                                    </feMerge>
                                </filter>
                            </defs>
                            <g fill="none" fill-rule="evenodd" opacity=".8">
                                <mask id="pid-1-svgo-b" fill="#fff">
                                    <use xlink:href="#pid-1-svgo-a"></use>
                                </mask>
                                <g mask="url(#pid-1-svgo-b)">
                                    <use fill="#000" filter="url(#pid-1-svgo-c)" xlink:href="#pid-1-svgo-d"></use>
                                    <use fill="#FFF" xlink:href="#pid-1-svgo-d"></use>
                                </g>
                            </g>
                        </svg>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Hls from 'hls.js'
    import DPlayer from 'dplayer'

    export default {
        data() {
            return {
                dp: null,
                video: {},
                video1: {},
                video2: {},
            }
        },
        methods: {
            myPlay() {
                this.$message.info("start play..")
            },
            loadVideo(videoInfo, index) {
                this.dp = new DPlayer({
                    element: document.getElementById(index),
                    //logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
                    // hotkey: true, // 是否支持热键，调节音量，播放，暂停等
                    mutex: false, //  防止同时播放多个用户，在该用户开始播放时暂停其他用户
                    theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
                    loop: false, // 是否自动循环
                    lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
                    // screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
                    preload: "auto", // 自动预加载
                    volume: 0.1, // 初始化音量
                    playbackSpeed: [2, 1, 0.5], //可选的播放速度，可自定义
                    contextmenu: [
                        //  自定义上下文菜单
                        // 右键菜单
                        {
                            text: "b站",
                            link: "https://www.bilibili.com"
                        },
                        {
                            text: "选项二",
                            click: player => {
                                console.log(player);
                            }
                        }
                    ],
                    highlight: [
                        //进度条上的自定义时间标记
                        // 进度条时间点高亮
                        {
                            text: "10M",
                            time: 60
                        },
                        {
                            text: "20M",
                            time: 120
                        }
                    ],
                    video: {
                        pic: videoInfo.img, // 视频封面
                        url: videoInfo.url,
                        type: videoInfo.type,
                        customType: {
                            customHls: function(video, player) {
                                const hls = new Hls()
                                hls.loadSource(video.src)
                                hls.attachMedia(video)
                            }
                        }
                    }
                })
            }
        },
        mounted() {
            this.video1 = {
                img: "http://t.inleft.com/share/media_photo/faye_video.png",
                url: "http://t.inleft.com/share/myVideo/faye/faye.m3u8",
                type: "customHls"
            }
            this.video2 = {
                img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
                url: "http://t.inleft.com/share/myVideo/canon/canon.m3u8",
                type: "customHls"
            }
            this.video3 = {
                img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
                url: "http://t.inleft.com/share/mp3/EOPMusic%283%29.mp3",
                type: "normal"
            }
            this.video4 = {
                img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
                url: "http://t.inleft.com/share/mp3/EOPMusic%284%29.mp3",
                type: "normal"
            }
            this.video5 = {
                img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
                url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
                type: "normal"
            }

            // getVideo: ajax request for getting videoInfo
            /*   getVideo().then(res => {
                this.video = res.data.video
                this.laodVideo(this.video)
              }) */
            this.video = {
                //封面
                //img: "https://cn.bing.com/th?id=OHR.MeotoIwa_ZH-CN3126370410_1920x1080.jpg&rf=LaDigue_1920x1080.jpg",
                img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
                // video: "https://vod3.bdzybf3.com/20210509/ZMHA3RpS/1000kb/hls/index.m3u8",
                // video: "http://t.inleft.com/share/ckplayer/ckplayer-master/sample/test/video_tieba.m3u8",
                // video: videoUrl,
                // video: "http://t.inleft.com/share/mp3/inleft-test-20211103-rainbow.mp3",
            }
            this.loadVideo(this.video1, "test1")
            this.loadVideo(this.video2, "test2")
            this.loadVideo(this.video3, "test3")
            this.loadVideo(this.video4, "test4")
            this.loadVideo(this.video5, "test5")

            // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
            // document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
            document.querySelector(".dplayer-mask").remove();
            document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源
            let length = document.querySelectorAll(".dplayer-menu-item").length;
            document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息
            document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息
        }
    }
</script>

 src/components/mini/box15-videoPlayBox.vue

New file
@@ -0,0 +1,188 @@
<template>
    <div>
        <div class="myVideo">
            <div id="videoPlay" ref="test1" class="dplayer"></div>
            <!-- <div class="mark" ></div> -->
            <!-- 视频 -->
            <div class="player-video-state">
                <span class="bp-svgicon">
                    <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink">
                        <defs>
                            <path id="pid-1-svgo-a" d="M0 0h80v80H0z"></path>
                            <path
                                d="M52.546 8.014a3.998 3.998 0 014.222 3.077c.104.446.093.808.039 1.138a2.74 2.74 0 01-.312.881c-.073.132-.16.254-.246.376l-.257.366-.521.73c-.7.969-1.415 1.926-2.154 2.866l-.015.02a240.945 240.945 0 015.986.341l1.643.123.822.066.41.034.206.018.103.008.115.012c1.266.116 2.516.45 3.677.975a11.663 11.663 0 013.166 2.114c.931.87 1.719 1.895 2.321 3.022a11.595 11.595 0 011.224 3.613c.03.157.046.316.068.474l.015.119.013.112.022.206.085.822.159 1.646c.1 1.098.19 2.198.27 3.298.315 4.4.463 8.829.36 13.255a166.489 166.489 0 01-.843 13.213c-.012.127-.034.297-.053.454a7.589 7.589 0 01-.072.475l-.04.237-.05.236a11.762 11.762 0 01-.74 2.287 11.755 11.755 0 01-5.118 5.57 11.705 11.705 0 01-3.623 1.263c-.158.024-.316.052-.475.072l-.477.053-.821.071-1.644.134c-1.096.086-2.192.16-3.288.23a260.08 260.08 0 01-6.578.325c-8.772.324-17.546.22-26.313-.302a242.458 242.458 0 01-3.287-.22l-1.643-.129-.822-.069-.41-.035-.206-.018c-.068-.006-.133-.01-.218-.02a11.566 11.566 0 01-3.7-.992 11.732 11.732 0 01-5.497-5.178 11.73 11.73 0 01-1.215-3.627c-.024-.158-.051-.316-.067-.475l-.026-.238-.013-.119-.01-.103-.07-.823-.132-1.648a190.637 190.637 0 01-.22-3.298c-.256-4.399-.358-8.817-.258-13.233.099-4.412.372-8.811.788-13.197a11.65 11.65 0 013.039-6.835 11.585 11.585 0 016.572-3.563c.157-.023.312-.051.47-.07l.47-.05.82-.07 1.643-.13a228.493 228.493 0 016.647-.405l-.041-.05a88.145 88.145 0 01-2.154-2.867l-.52-.73-.258-.366c-.086-.122-.173-.244-.246-.376a2.74 2.74 0 01-.312-.881 2.808 2.808 0 01.04-1.138 3.998 3.998 0 014.22-3.077 2.8 2.8 0 011.093.313c.294.155.538.347.742.568.102.11.19.23.28.35l.27.359.532.72a88.059 88.059 0 012.06 2.936 73.036 73.036 0 011.929 3.03c.187.313.373.628.556.945 2.724-.047 5.447-.056 8.17-.038.748.006 1.496.015 2.244.026.18-.313.364-.624.549-.934a73.281 73.281 0 011.93-3.03 88.737 88.737 0 012.059-2.935l.533-.72.268-.359c.09-.12.179-.24.281-.35a2.8 2.8 0 011.834-.881zM30.13 34.631a4 4 0 00-.418 1.42 91.157 91.157 0 00-.446 9.128c0 2.828.121 5.656.364 8.483l.11 1.212a4 4 0 005.858 3.143c2.82-1.498 5.55-3.033 8.193-4.606a177.41 177.41 0 005.896-3.666l1.434-.942a4 4 0 00.047-6.632 137.703 137.703 0 00-7.377-4.708 146.88 146.88 0 00-6.879-3.849l-1.4-.725a4 4 0 00-5.382 1.742z"
                                id="pid-1-svgo-d"></path>
                            <filter x="-15.4%" y="-16.3%" width="130.9%" height="132.5%" filterUnits="objectBoundingBox"
                                id="pid-1-svgo-c">
                                <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
                                <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1">
                                </feGaussianBlur>
                                <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" in="shadowBlurOuter1"
                                    result="shadowMatrixOuter1"></feColorMatrix>
                                <feOffset in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
                                <feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter2" result="shadowBlurOuter2">
                                </feGaussianBlur>
                                <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" in="shadowBlurOuter2"
                                    result="shadowMatrixOuter2"></feColorMatrix>
                                <feMerge>
                                    <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                                    <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
                                </feMerge>
                            </filter>
                        </defs>
                        <g fill="none" fill-rule="evenodd" opacity=".8">
                            <mask id="pid-1-svgo-b" fill="#fff">
                                <use xlink:href="#pid-1-svgo-a"></use>
                            </mask>
                            <g mask="url(#pid-1-svgo-b)">
                                <use fill="#000" filter="url(#pid-1-svgo-c)" xlink:href="#pid-1-svgo-d"></use>
                                <use fill="#FFF" xlink:href="#pid-1-svgo-d"></use>
                            </g>
                        </g>
                    </svg>
                </span>
            </div>
        </div>
    </div>
</template>

<script>
    import Hls from 'hls.js'
    import DPlayer from 'dplayer'

    export default {
        data() {
            return {
                dp: null,
                video: {},
            }
        },
        methods: {
            myPlay() {
                this.$message.info("start play..")
            },
            loadVideo(videoInfo) {
                this.dp = new DPlayer({
                    element: document.getElementById("videoPlay"),
                    //logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
                    // hotkey: true, // 是否支持热键，调节音量，播放，暂停等
                    mutex: false, //  防止同时播放多个用户，在该用户开始播放时暂停其他用户
                    theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
                    loop: false, // 是否自动循环
                    lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
                    // screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
                    preload: "auto", // 自动预加载
                    volume: 0.1, // 初始化音量
                    playbackSpeed: [2, 1, 0.5], //可选的播放速度，可自定义
                    contextmenu: [
                        //  自定义上下文菜单
                        //右键菜单
                        {
                            text: "b站",
                            link: "https://www.bilibili.com"
                        },
                        // {
                        //     text: "选项二",
                        //     click: player => {
                        //         console.log(player);
                        //     }
                        // }
                    ],
                    highlight: [
                        //进度条上的自定义时间标记
                        // 进度条时间点高亮
                        {
                            text: "10M",
                            time: 60
                        },
                        {
                            text: "20M",
                            time: 120
                        }
                    ],
                    video: {
                        pic: videoInfo.img, // 视频封面
                        url: videoInfo.url,
                        type: videoInfo.type,
                        customType: {
                            customHls: function(video, player) {
                                const hls = new Hls()
                                hls.loadSource(video.src)
                                hls.attachMedia(video)
                            }
                        }
                    }
                })
            }
        },
        mounted() {

            this.video = {
                img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
                url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
                type: "normal"
            }
		
            this.loadVideo(this.video)

            // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
            // document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
            document.querySelector(".dplayer-mask").remove();
            document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源
            let length = document.querySelectorAll(".dplayer-menu-item").length;
            document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息
            document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息
        }
    }
</script>
<style lang="less" scoped>
    .myVideo {
        position: relative;
        // width: 220px;
        // height: 140px;
        width: 300px;
        height: 180px;
        background-color: #565656;
        border-radius: 10px;
        margin: 10px;
        display: flex;


    }


    .myVideo:hover {
        .mark {
            background-color: #000;
            display: initial;
        }

        .player-video-state {
            // display: initial;
        }
    }


    .dplayer {
        width: 500px;
    }

    .mark {
        opacity: 0.45;
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #000;
        display: none;
    }

    .player-video-state {
        position: absolute;
        left: 43%;
        top: 35%;
        width: 50px;
        height: 50px;
        display: none;
    }
</style>

 src/components/mini/mdDetail.vue

@@ -7,8 +7,8 @@
        </div>

        <div v-if="showMsg && !myLock">
            <div class="mySecretSamll" v-if="articleFileType==5">

            <div class="mySecretSamll" v-if="articleFileType==myConstant.fileTypeShort">
                    <p>碎碎念只有那么一点了,但是下面依旧可以碎碎念</p>
            </div>
            <div class="mySecret" v-else>
                <h1>怎样才能让你看到我呢</h1>
@@ -34,9 +34,7 @@
                <vue-markdown :source="source"></vue-markdown>
            </div>
        </div>
        <div class="articleInfoMiniData">


        <div class="articleInfoMiniData" >
            <div class="smallOption" @click="articleOptionHandle('dislike')">
                <a-icon type="dislike" style="margin-top: 2px;" />
            </div>
@@ -76,7 +74,8 @@
    import comment from "../mini/box12-comment.vue"

    import axios from 'axios'

    import myConstant from "../../config/myConstant.js"
	
    export default {
        components: {
            VueMarkdown,
@@ -84,10 +83,11 @@
        },
        data() {
            return {
                myConstant:myConstant,
                articelMeta: "",
                isAllowedComment: 1,
                articleId: "",
                articleFileType: 1,
                articleFileType: myConstant.fileTypeMarkDown,
                source: "",
                showMsg: false,
                myLock: false,
@@ -131,7 +131,7 @@
                this.showMsg = true;
                this.errorMsg = "加载中..";

                if (this.articleFileType == 5) {
                if (this.articleFileType == myConstant.fileTypeShort) {
                    this.errorMsg = "没有更多啦..";
                    return
                }

 src/config/myConstant.js

New file
@@ -0,0 +1,10 @@
//常量
const myConstant = {
    fileTypeMarkDown: 1,
    fileTypeHtml: 2,
    fileTypeVideo: 3,
    fileTypeMp3: 4,
    fileTypeShort: 5,
    fileTypeCover: 9,
}
export default myConstant;