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>