视频模块添加播放历史

 src/components/mini/box14-video.vue

@@ -18,7 +18,7 @@
                            <!-- <router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title">
                                {{item.title}}
                            </router-link> -->
                                {{item.title}}
                            {{item.title}}
                        </h5>
                        <div class="post_content">
                            {{item.introduce}}
@@ -124,6 +124,7 @@
        gap: 2rem;
        padding-bottom: 20px;
        // background-color: #666;
        user-select: none;

        a {
            color: #555;

 src/components/mini/box15-videoPlayBox.vue

@@ -1,7 +1,7 @@
<template>
    <div>
        <div>
            正在播放: <span> {{defalutTitle}} </span>
            正在播放: <span> {{playingVideoData.title}} </span>
        </div>
        <div class="myVideo">
            <div id="videoPlay" ref="myVdeoPlay"></div>
@@ -11,18 +11,33 @@
                音量 :
                <a-slider v-model="volumeInit" :default-value="0.1" :step="0.1" :max="1" @change="changeVolume" />
            </div>
            <a-collapse>
                <!-- v-if="playHistory.length>1" -->
                <a-collapse-panel key="playList" header="播放记录">
                    <div class="playItem" v-for="(item,index) in playHistory">
                        {{item.title}}
                        <a-icon v-if="index==0" type="youtube" class="playIcon" />
            <a-collapse activeKey="playHistory">
                <a-collapse-panel key="playHistory" header="播放记录">
                    <div v-for="(item,index) in playHistory">
                        <div v-if="index==0">
                            <a-tooltip placement="bottomRight" title="播放/暂停">
                                <div @click="togglePlay" class="playItem">
                                    {{item.title}}
                                    <a-icon type="youtube" class="playIcon" />
                                </div>
                            </a-tooltip>
                        </div>
                        <div v-else>
                            <div @click="swichPlay(item.id)" class="playItem">
                                <a-tooltip placement="bottomRight" title="切换播放">
                                    <div>
                                        {{item.title}}
                                    </div>
                                </a-tooltip>
                            </div>
                        </div>
                    </div>
                </a-collapse-panel>
            </a-collapse>
        </div>
    </div>
</template>


<script>
    import Hls from 'hls.js'
@@ -31,58 +46,101 @@
    export default {
        data() {
            return {
                defalutImg: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
                defalutTitle: "",
                dp: null,
                video: {},
                firstLoad: true,
                playHistory: [],
                playRecordIds: [],
                volumeInit: 0.1,
                isPlaying: false,
                playHistory: [],
                playHistoryId: {},
                swichLock: false,
                playingVideoData: {
                    img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
                    url: "",
                    type: "normal",
                    title: "",
                    id: ""
                },

            }
        },
        mounted() {
            //弹窗初始化后先不加载视频,等待手动播放
            this.init();
            var _this = this;

            //调整音量
            _this.$message.success("加载完成,请注意音量是否合适..")

            this.dp.volume(this.volumeInit, true, false);

            this.dp.on('pause', function() {
                _this.$message.info("停止播放")
                this.isPlaying = false;
            });

            this.dp.on('play', function() {
                _this.$message.info("开始播放..")
                this.isPlaying = true;
            });
        },
        methods: {
            togglePlay() {
                this.dp.toggle();
                this.isPlaying = !this.isPlaying;
            },
            changeVolume(value) {
                this.dp.volume(value, true, false);
            },
            changePlay(videoData) {
                console.log(111);
                this.defalutTitle = videoData.title;
                if (this.playHistoryId[videoData.id] != null) {
                    this.playHistory = this.playHistory.filter(item => item.id == videoData.id);
                    this.playHistory.unshift(videoData)
            //切换视频源
            swichPlay(videoId) {
                if (this.swichLock) {
                    this.$message.info("切换太快啦,缓一缓..", 5)
                    return
                } else {
                    this.playHistoryId[videoData.id] = videoData;
                    this.playHistory.unshift(videoData)
                }

                // 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"
                // }
                if (videoId == this.playingVideoData.id) {
                    this.$message.info("同一个视频..", 1)
                    return
                }
                let tempData = this.playHistory.filter(item => item.id == videoId)[0]

                this.loadVideo(videoData)
                this.$message.info("切换视频源..", 1)
                this.swichLock = !this.swichLock;

                // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
                // document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
                this.startPlay(tempData)

                setTimeout(() => {
                    this.swichLock = !this.swichLock;
                }, 5000);

                // 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(); // 去掉作者信息
            },
            loadVideo(videoInfo) {
                //通知父组件更换评论信息
                this.$emit("swichPlay", tempData)

            },
            //调整播放记录
            adjustOrder(videoData) {
                if (this.playRecordIds.findIndex(id => id == videoData.id) == -1) {
                    //新纪录
                    this.playRecordIds.push(videoData.id)
                    this.playHistory.unshift(videoData)
                } else {
                    //旧记录
                    this.playHistory = this.playHistory.filter(item => item.id != videoData.id);
                    this.playHistory.unshift(videoData)
                }
            },
            //加载播放
            startPlay(videoData) {

                this.adjustOrder(videoData)

                this.playingVideoData = videoData

                this.isPlaying = false;
                this.dp.switchVideo(this.playingVideoData, null)


            },
            //播放器初始化
            init() {
                this.dp = new DPlayer({
                    element: document.getElementById("videoPlay"),
@@ -116,7 +174,8 @@
                    video: {
                        pic: this.defalutImg, // 视频封面
                        // url: videoInfo.url,
                        // type: videoInfo.type,
                        //url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
                        type: "normal",
                        customType: {
                            customHls: function(video, player) {
                                const hls = new Hls()
@@ -126,6 +185,15 @@
                        }
                    }
                })

                // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
                // 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(); // 去掉作者信息
            },
        }

@@ -142,12 +210,13 @@
    }

    .playItem:hover {
        transform: scale(1.1) translate3d(0, 0, 0);
        //transform: scale(1.1) translate3d(0, 0, 0);
    }

    .playItem:active {
        transform: scale(0.85);
        transform: scale(0.75) translate3d(0, 0, 0);
    }


    .playIcon {
        transform: scale(1.3);
@@ -163,19 +232,13 @@
        background-color: #565656;
        border-radius: 10px;
        margin: 20px 0px;
        display: flex;
        display: grid;
    }

    .myVideo /deep/ .dplayer-video {
        height: auto;
        // border-radius: 16px;
    }

    .myVideo /deep/ .dplayer {
        border-radius: 5px;
    }

    .myVideo /deep/ video {
        object-fit: cover;
    }
	
</style>

 src/components/mini/box16-videoDetail.vue

@@ -1,12 +1,12 @@
<template>
    <div>
        <div class="boxMain">
            <videoPlayBox ref="videoPlayBox"></videoPlayBox>
        <div class="boxMain ">
            <videoPlayBox ref="videoPlayBox" @swichPlay="swichPlay"></videoPlayBox>
        </div>
        <div style="padding: 20px 20px 5px;margin-bottom: 20px;" class="myShadow">
        <div style="padding: 20px 20px 5px;margin-bottom: 20px;" class="myShadow fadeInLeft">
            <pre>{{introduce}}</pre>
        </div>
        <div class="articleComment">
        <div class="articleComment fadeInRight">
            <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" :foldReply="true" />
        </div>
    </div>
@@ -59,11 +59,16 @@
                    url: "",
                    type: "normal",
                    title: "",
                    introduce: "",
                    id: ""
                }
            }
        },
        methods: {
            swichPlay(videoData) {
                this.introduce = videoData.introduce;
                this.$refs.myComment.updateCommentList(videoData.id);
            },
            showVideo(item) {
                //防止重复加载
                this.lastArticleId = this.articleId;
@@ -78,6 +83,10 @@
                this.loadData();
            },
            loadData() {

                if (this.$refs.videoPlayBox.isPlaying) {
                    this.$message.info("上个视频正在播放中")
                }

                if (this.myLock) {
                    this.$message.info("正在努力加载中..", 3)
@@ -113,6 +122,7 @@
                    this.videoData.url = res.data.articleFileURL;
                    this.videoData.img = res.data.coverFileURL;
                    this.videoData.title = res.data.title;
                    this.videoData.introduce = res.data.introduce;
                    this.videoData.id = res.data.id;


@@ -126,7 +136,8 @@

                    this.myLock = !this.myLock;
                    if (this.lastArticleId != this.articleId) {
                        _this.$refs.videoPlayBox.changePlay(this.videoData)
                        let tempParam = JSON.parse(JSON.stringify(this.videoData))
                        _this.$refs.videoPlayBox.startPlay(tempParam)
                    }
                })

@@ -145,6 +156,7 @@
    }

    .boxMain {
        user-select: none;
        display: flex;
        justify-content: center;
        padding: 5px 20px;

 src/components/swichLabel/main1-home.vue

@@ -27,7 +27,7 @@

                <a-col v-bind="colApiMain">
                    <a-col v-bind="colMini" :style="{'position':'absolute','right':'5px'}">
                        <a-affix :offset-top="550">
                        <a-affix :offset-top="500">
                            <a-button @click="showDrawer" style="padding:0px 10px">
                                <a-icon type="left-circle" />
                            </a-button>