src/components/mini/box15-videoPlayBox.vue

@@ -1,16 +1,23 @@
<template>
   <div>
      <div>
      <div v-if="!this.$attrs.showTar">
         正在播放: <span> {{playingVideoData.title}} </span>
      </div>
      <div class="myVideo">
      <div class="myVideo fade">
         <div id="videoPlay" ref="myVdeoPlay"></div>
      </div>
      <div style="border-radius: 0 0 4px 4px;">
      <div style="border-radius: 0 0 4px 4px;" v-if="!this.$attrs.showTar">

         <div style="padding: 10px 0px;">
            音量 :
            <a-slider v-model="volumeInit" :default-value="0.1" :step="0.1" :max="1" @change="changeVolume" />
         </div>
         <div style="padding: 10px 0px;">
            播放进度 : {{Math.floor(currentTime/60)}}:{{Math.floor(currentTime%60)}} /
            {{Math.floor(duration/60)}}:{{Math.floor(duration%60)}}
            <a-slider v-model="currentTime" :max="duration" @afterChange="changeTime" />
         </div>

         <a-collapse activeKey="playHistory">
            <a-collapse-panel key="playHistory" header="播放记录">
               <div v-for="(item,index) in playHistory">
@@ -18,7 +25,9 @@
                     <a-tooltip placement="bottomRight" title="播放/暂停">
                        <div @click="togglePlay" class="playItem">
                           {{item.title}}
                           <a-icon type="youtube" class="playIcon" />
                           <span v-if="!isPlaying " class="myTip">(已暂停)</span>
                           <a-icon type="youtube" class="playIcon "
                              v-bind:class="{ activeElement: isPlaying }" />
                        </div>
                     </a-tooltip>
                  </div>
@@ -52,6 +61,8 @@
            volumeInit: 0.1,
            isPlaying: false,
            swichLock: false,
            currentTime: 0,
            duration: 0,
            playingVideoData: {
               img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
               url: "",
@@ -59,7 +70,7 @@
               title: "",
               id: ""
            },

            hls: null,
         }
      },
      mounted() {
@@ -68,27 +79,44 @@
         var _this = this;

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

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

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

         this.dp.on('play', function() {
            _this.$message.info("开始播放..")
            this.isPlaying = true;
            _this.isPlaying = true;
            _this.duration = _this.dp.video.duration;
            _this.currentTime = _this.dp.video.currentTime;
         });
         this.dp.on('timeupdate', function() {
            //_this.$message.info("进度..")
            _this.currentTime = _this.dp.video.currentTime;
         });
         this.dp.on('volumechange', function() {
            _this.volumeInit = _this.dp.video.volume;
         });

      },
      methods: {
         pauseMyVideo() {
            this.dp.pause();
            this.isPlaying = false;
         },
         togglePlay() {
            this.dp.toggle();
            this.isPlaying = !this.isPlaying;
         },
         changeVolume(value) {
            this.dp.volume(value, true, false);
         },
         changeTime(time) {
            this.dp.seek(time)
         },
         //切换视频源
         swichPlay(videoId) {
@@ -106,11 +134,12 @@
            this.$message.info("切换视频源..", 1)
            this.swichLock = !this.swichLock;


            this.startPlay(tempData)

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

            //通知父组件更换评论信息
            this.$emit("swichPlay", tempData)
@@ -130,18 +159,40 @@
         },
         //加载播放
         startPlay(videoData) {
            if (videoData == null || videoData == undefined) {
               this.$message.error("无效资源..")
               return
            }
				
            if (videoData.url != null && videoData.urlL != "" && videoData.url.endsWith("m3u8")) {
               videoData.type = "customHls";
            } else {
               videoData.type = "normal";
            }

				
            //重要!!防止hls类型视频在切换后不停在后台缓存
            if (this.hls != null) {
               this.hls.destroy();
            }

            this.adjustOrder(videoData)

            this.playingVideoData = videoData

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

            //重要!!防止hls类型视频在切换后不停在后台缓存
            if (videoData.type == "customHls") {
               this.hls = new Hls();
            }

            this.dp.switchVideo(this.playingVideoData)

         },
         //播放器初始化
         init() {
            var _this = this;
            this.dp = new DPlayer({
               element: document.getElementById("videoPlay"),
               //logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
@@ -152,7 +203,7 @@
               lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
               // screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
               preload: "metadata", // 自动预加载 'none', 'metadata', 'auto'
               volume: this.volumeInit, // 初始化音量
               volume: _this.volumeInit, // 初始化音量
               playbackSpeed: [2, 1, 0.5], //可选的播放速度，可自定义
               contextmenu: [
                  //右键菜单
@@ -162,7 +213,6 @@
                  },

               ],

               highlight: [
                  //进度条上的自定义时间标记
                  // 进度条时间点高亮
@@ -172,15 +222,17 @@
                  // },
               ],
               video: {
                  pic: this.defalutImg, // 视频封面
                  pic: _this.defalutImg, // 视频封面
                  // url: videoInfo.url,
                  //url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
                  type: "normal",
                  customType: {
                     customHls: function(video, player) {
                        const hls = new Hls()
                        hls.loadSource(video.src)
                        hls.attachMedia(video)
                        //const hls = new Hls()
                        if (_this.hls != null) {
                           _this.hls.loadSource(video.src)
                           _this.hls.attachMedia(video)
                        }
                     }
                  }
               }
@@ -205,8 +257,16 @@
      padding: 10px;
      border-radius: 5px;
      margin: 10px;
      transition: all .5s;
      transition: all .3s;
      position: relative;
   }

   .mark {
      border-radius: 14px;
      background: #00000073;
      width: 100%;
      height: 100%;
      pointer-events: none;
   }

   .playItem:hover {
@@ -214,7 +274,8 @@
   }

   .playItem:active {
      transform: scale(0.75) translate3d(0, 0, 0);
      // transform: scale(0.75) translate3d(0, 0, 0);
      box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff;
   }


@@ -227,7 +288,7 @@

   .myVideo {
      position: relative;
      width: 300px;
      width: 315px;
      height: 180px;
      background-color: #565656;
      border-radius: 10px;
@@ -240,5 +301,28 @@
      border-radius: 5px;
   }

	
   .activeElement {
      -webkit-animation: free_download 1s linear alternate infinite;
      animation: free_download 1s linear alternate infinite;
   }

   @-webkit-keyframes free_download {
      0% {
         -webkit-transform: scale(1);
      }

      100% {
         -webkit-transform: scale(1.2);
      }
   }

   @keyframes free_download {
      0% {
         transform: scale(1);
      }

      100% {
         transform: scale(1.2);
      }
   }
</style>