src/components/mini/box15-videoPlayBox.vue

@@ -7,6 +7,7 @@
         <div id="videoPlay" ref="myVdeoPlay"></div>
      </div>
      <div style="border-radius: 0 0 4px 4px;">

         <div style="padding: 10px 0px;">
            音量 :
            <a-slider v-model="volumeInit" :default-value="0.1" :step="0.1" :max="1" @change="changeVolume" />
@@ -16,6 +17,7 @@
            {{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">
@@ -77,7 +79,7 @@
         var _this = this;

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

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

@@ -102,6 +104,10 @@

      },
      methods: {
         pauseMyVideo() {
            this.dp.pause();
            this.isPlaying = false;
         },
         togglePlay() {
            this.dp.toggle();
            this.isPlaying = !this.isPlaying;
@@ -153,6 +159,11 @@
         },
         //加载播放
         startPlay(videoData) {
            if (videoData == null || videoData == undefined) {
               this.$message.error("无效资源..")
               return
            }

            //重要!!防止hls类型视频在切换后不停在后台缓存
            if (this.hls != null) {
               this.hls.destroy();
@@ -169,9 +180,8 @@
               this.hls = new Hls();
            }

            setTimeout(() => {
               this.dp.switchVideo(this.playingVideoData)
            }, 500);
            this.dp.switchVideo(this.playingVideoData)

         },
         //播放器初始化
         init() {
@@ -196,7 +206,6 @@
                  },

               ],

               highlight: [
                  //进度条上的自定义时间标记
                  // 进度条时间点高亮
@@ -245,6 +254,14 @@
      position: relative;
   }

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

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