vue3 video 视频播放时禁止拖动进度条

一、需求背景

视频第一次观看不支持快进，已观看过的内容重复观看支持快进。

视频页面：有视频当前状态，未观看的视频为待学习状态，观看完一次都是已完成的状态。

二、解决思路

根据需求，首先前端需要拿到一个状态进行判断，用户是否是第一次观看视频，如果是第一次观看视频，则不允许拖动进度条；已观看过的视频则正常拖动，不作限制。

三、解决方法

1.可以看到后端数据中有个学习状态learnStatus 字段， 0 代表未学习状态，2代表观看完成一次的已完成状态，作为能拖动进度条的判断依据：

2.html中，与视频标签同级可以加一个view，用来遮挡住进度条：

 <div class="video">
           <Video
              :id="'video' + jumpNum"
              :src="videoUrl"
              controls
              showPlay
              class="videoStyle"
              width="100%"
              height="550"
              @play="handlePlay(jumpNum)"
              @pause="onPause(index)"
            ></Video>
<!--视频第一次观看不支持快进，已观看过的内容重复观看支持快进。-->
            <div v-if="curLearnStatus <= '1'" class="cover"></div> 
          </div>

<!--视频第一次观看不支持快进，已观看过的内容重复观看支持快进。-->
            <div v-if="curLearnStatus <= '1'" class="cover"></div> 

3.在css 中加入样式

.video {
  width: 100%;
  position: relative;
  .cover {
    position: absolute;
    bottom: 4px;
    width: 100%;
    height: 5%;
    background-color: rgba(255, 255, 255, 0.007);
    // margin-left: 100px;
    z-index: 99;
  }
}

四、效果

可以先将上面的背景色改一下颜色（改为红色），看下效果：学习中和待学习会出现遮挡，不能快进。

“已完成”状态的视频不会出现遮挡条

四、其他

使用cover-view

    <div class="video">
            <Video
              :id="'video' + jumpNum"
              :src="videoUrl"
              controls
              showPlay
              class="videoStyle"
              width="100%"
              height="550"
              @play="handlePlay(jumpNum)"
              @pause="onPause(index)"
            ></Video>
            <cover-view v-if="curLearnStatus <= '1'" class="cover"></cover-view>
            <!-- <div v-if="curLearnStatus <= '1'" class="cover"></div> -->
          </div>

但是cove-view 的宽度好像是针对全屏。

五、未解决问题

视频全屏状态下的禁止拖动还未解决。。。。