Dplayer测试

 package.json

@@ -14,6 +14,8 @@
        "axios": "^0.24.0",
        "babel-plugin-import": "^1.13.3",
        "core-js": "^2.6.5",
        "dplayer": "^1.26.0",
        "hls.js": "^1.1.5",
        "jquery": "^3.6.0",
        "js-md5": "^0.7.3",
        "jsdom": "^18.1.1",

 src/components/fixed/footer.vue

@@ -23,7 +23,6 @@
    document.write(unescape(
        "%3Cspan id='cnzz_stat_icon_1276380514'%3E%3C/span%3E%3Cscript src='https://s23.cnzz.com/z_stat.php%3Fid%3D1276380514%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"
    ));

    export default {
        data() {
            return {

 src/components/fixed/header.vue

@@ -3,9 +3,9 @@
        <a-col v-bind="showSmall">
            <div class="menu">
                <router-link to="/">Home</router-link>
                <router-link to="/main2">乐谱搜索</router-link>
                <router-link to="/comment">碎碎念</router-link>
                <router-link to="/link">友人帐</router-link>
                <router-link to="/platform">月台</router-link>
                <router-link to="/login">登录</router-link>
                <!-- <router-link to="/comment">测试页</router-link> -->
            </div>

 src/components/mini/box14-video.vue

@@ -1,109 +1,230 @@
<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="test_wow" v-for="(temp,index) in [1,2,1,1,1,1]">

                <section class="wow animate__slideInUp test_wow" data-wow-delay="0.8s" data-wow-duration="0.8s">
                temp,index
                    </section>

        <div class="videoBoxList">
            <div class="myVideo" v-for=" (temp,index) in ['test1','test2','test3']">
                <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 {

        name: 'Home',

        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, // 初始化音量
                    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: 'customHls',
                        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/idea_beijing.jpg",
                url: "http://t.inleft.com/share/myVideo/faye/faye.m3u8"
            }
            this.video2 = {
                img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
                url: "http://t.inleft.com/share/myVideo/canon/canon.m3u8"
            }

        },
            // 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")

        mounted() {

            new this.$wow.WOW().init()

            // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
            // 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 scoped>
    .test_wow {

        position: relative;

        width: 1000px;

        height: 400px;

        /* background: #212121; */

        margin: 0 auto;

    }

    .test_wow1 {

        position: relative;

        width: 1000px;

        height: 400px;

        background: #741919;

        margin: 0 auto;

    }

    .test_wow2 {

        position: relative;

        width: 1000px;

        height: 400px;

        background: #2b0f44;

        margin: 0 auto;

    }

    .test_wow3 {

        position: relative;

        width: 1000px;

        height: 400px;

        background: #558614;

        margin: 0 auto;

    }

    .test_wow4 {

        position: relative;

        width: 1000px;

        height: 400px;

        background: #440707;

        margin: 0 auto;

    }
</style>

 src/components/mini/box7-search.vue

@@ -13,6 +13,7 @@
                </div>
                <hr>
                <span>{{sentence}}</span>
                <!-- <span>之所以叫月台,是希望,能在这里出现的视频会越来越多,熙熙囔囔</span> -->
            </div>
        </div>
    </div>

 src/components/mini/tagInfo.vue

@@ -50,7 +50,7 @@
                <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" />
                <h3 class="layui-timeline-title">2022-03-03</h3>
                <span>
                    <router-link to="/comment">碎碎念</router-link> 整合完成
                    <router-link to="/comment">碎碎念</router-link>
                </span>
                <p class="myTip">虽然没啥用,可万一有人想给我留言呢☺☺️</p>
            </a-timeline-item>
@@ -120,7 +120,7 @@
                <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" />
                <h3 class="layui-timeline-title">2018-12-21</h3>
                <span>拿下域名:inleft.com</span>
                <p>阿里云1号机 尝鲜</p>
                <p>阿里云初代机 启动</p>
            </a-timeline-item>



 src/components/swichLabel/main2-music-search.vue

@@ -5,8 +5,9 @@
                <box7 :searchType="searchType" class="fade"></box7>
            </a-col>
            <a-col v-bind="colApiMain" class="holdHeight">
                <box8></box8>
                <!-- <box8></box8> -->
                <!-- <boxLeft></boxLeft> -->
                <myVideo></myVideo>
            </a-col>

        </a-row>
@@ -16,6 +17,7 @@
<script>
    import box7 from "../mini/box7-search.vue"
    import box8 from "../mini/box8-panal.vue"
    import myVideo from "../mini/box14-video.vue"
    import boxLeft from "../group/boxLeft.vue"
    
    export default {
@@ -23,6 +25,7 @@
            box7,
            box8,
            boxLeft,
            myVideo,
        },

        data() {
@@ -54,28 +57,28 @@

                colApiMain: {
                    xs: {
                        span: 24,
                        offset: 0,
                        span: 23,
                        offset: 1,
                    },
                    sm: {
                        span: 22,
                        offset: 1,
                        offset: 2,
                    },
                    md: {
                        span: 22,
                        offset: 1,
                        span: 19,
                        offset: 5,
                    },
                    lg: {
                        span: 22,
                        offset: 1,
                        offset: 2,
                    },
                    xl: {
                        span: 15,
                        offset: 1,
                        offset: 2,
                    },
                    xxl: {
                        span: 15,
                        offset: 1,
                        offset: 2,
                    },
                }
            }

 src/config/router.config.js

@@ -3,7 +3,7 @@
import articleList from '../components/group/articleListScorll.vue'

import main1 from '../components/swichLabel/main1-home.vue'
import main2 from '../components/swichLabel/main2-music-search.vue'
import platform from '../components/swichLabel/main2-music-search.vue'
import main3 from '../components/swichLabel/main3-show.vue'
import link from '../components/swichLabel/main4-link.vue'
import login from '../components/swichLabel/main5-login.vue'
@@ -77,8 +77,8 @@
            },

            {
                path: '/main2',
                component: main2,
                path: '/platform',
                component: platform,
            },
            {
                path: '/main3',