vue视频试看前三分钟（未完善）

记录工作中遇到的一些小需求

需求：视频只能试看三分钟，三分钟后视频需要（上传截图审核通过后才可播放[未完成]）。

未完善的点：用户可以通过鼠标右键复制该视频保存到本地。

<template>
  <div>
    <video ref="videoPlayer" @timeupdate="handleTimeUpdate" @ended="handleVideoEnded"
      src="视频地址"
      controls height="500px"></video>
    <button @click="isLocked = !isLocked">{{isLocked?'锁定视频':'解锁视频'}}</button>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>上传截图审核通过后即可播放</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>  
    
  <script>
export default {
  data() {
    return {
      isLocked: true,// 可代表后端返回该视频是否已经解锁
      maxViewTime: 180, // 三分钟（秒）
      dialogVisible: false,
    };
  },
  watch: {
    isLocked(){
        this.$refs.videoPlayer.currentTime = 0;
    },
    dialogVisible(newVal) {
      if (newVal === false) {
        // 对话框已关闭
        console.log("Dialog is closed");
        // 在这里执行你需要的操作
        this.$refs.videoPlayer.currentTime = 0;
        this.$refs.videoPlayer.pause();
      }
    },
  },
  methods: {
    handleTimeUpdate(event) {
      if (event.target.currentTime >= this.maxViewTime && !this.isLocked) {
        document.exitFullscreen()//退出全屏
        // this.isLocked = true;
        this.$refs.videoPlayer.pause();
        // 这里可以添加弹窗提示用户转发
        this.dialogVisible = true;
      }
    },
    handleVideoEnded() {
      // 视频结束时的处理
    },
    unlockVideo() {
      // 用户完成转发后的处理逻辑
      // 例如，从服务器验证转发状态，并重置isLocked
      this.isLocked = false;
      // 可以重新加载视频或跳转到视频的某个时间点
      this.$refs.videoPlayer.currentTime = 0;
      this.$refs.videoPlayer.play();
    },
    handleClose(done) {
      done();
    },
  },
};
</script>