Vue 使用 video 标签实现视频播放

Bertha 。 2023-02-14 00:29 21阅读 0赞

> 项目需求：动态显示视频滚动条、禁止视频下载、播放时每5s更新当前时长、每10分钟暂停视频显示提示。  
> 之前做视频播放时基本都是使用 vue-video-player 组件，其原因为 封装功能齐全、播放源兼容性好等。  
> 通过这次项目需求，也深入的学习了 video 标签的属性及方法。具体在这里跟大家分享一下。

###### 具体使用方法如下 ######

<template>
      
      <div id="common-video" class="h-100">
        <div :class="{ isShow: control }" class="h-100">
          <video
            ref="myVideo"
            :poster="poster"
            :src="src"
            :controls="controls"
            oncontextmenu="return false"
            @timeupdate="timeupdate"
            controlslist="nodownload"
            class="video-box"
          ></video>
          <img
            src="@/assets/images/playbtn.png"
            alt=""
            @click="operateVideo"
            class="pointer operate-btn"
            :class="{ 'fade-out': videoState }"
          />
        </div>
      </div>
    </template>
    
    <script>
    export default { 
      name: "CommonVideo",
      data() { 
        return { 
          videoState: false, // 视频播放状态
          // 学时
          studyTime: { 
            currentTime: 0, // 当前已学时长
            duration: 0 // 总时长
          },
          timer: { }, // 定时器
          pauseTimer: { } // 暂停定时器
        };
      },
      /** * @param poster 展示图 * @param src 视频资源 * @param controls 是否显示控件 * @param control 控件控制 * @param videoData 视频基础数据 */
      props: { 
        poster: { 
          type: String,
          required: false,
          default: ""
        },
        src: { 
          type: String,
          required: true
        },
        controls: { 
          type: Boolean,
          required: false,
          default: true
        },
        control: { 
          type: Boolean,
          required: false,
          default: false
        },
        videoData: { 
          type: Object,
          required: true
        }
      },
      mounted() { 
        // 监听视频播放
        this.$refs.myVideo.addEventListener("play", () => { 
          console.log("video is playing");
          this.openTimer();
        });
        // 监听视频暂停
        this.$refs.myVideo.addEventListener("pause", () => { 
          console.log("video is stop");
          this.closeTimer();
        });
      },
      methods: { 
        // 开启定时器
        openTimer() { 
          this.timer = setInterval(() => { 
            this.$emit("videoStudyTime", this.studyTime);
          }, 5000);
        },
        // 关闭定时器
        closeTimer() { 
          clearInterval(this.timer);
          this.$emit("videoStudyTime", this.studyTime);
        },
        // 开启暂停定时器
        openPauseTimer() { 
          this.pauseTimer = setInterval(() => { 
            this.hintOperate();
          }, 600000);
        },
        // 关闭暂停定时器
        closePauseTimer() { 
          clearInterval(this.pauseTimer);
        },
        // 提示操作
        hintOperate() { 
          this.operateVideo();
          this.$alert("请点击确认继续学习", "提示", { 
            confirmButtonText: "确定",
            confirmButtonClass: "hint-btn",
            showClose: false,
            callback: action => { 
              this.$refs.myVideo.currentTime = this.videoData.currentTime;
              this.operateVideo();
              this.openPauseTimer();
            }
          });
        },
        // 获取当前播放位置
        timeupdate(e) { 
          this.studyTime.currentTime = e.target.currentTime;
          this.studyTime.duration = e.target.duration ? e.target.duration : 0;
        },
        // 操作视频播放、暂停
        operateVideo() { 
          if (!this.src) { 
            this.$message({  message: "暂无视频资源，请查看其他视频！" });
            return false;
          }
          if (this.$refs.myVideo.paused) { 
            this.$refs.myVideo.play();
            this.videoState = true;
          } else { 
            this.$refs.myVideo.pause();
            this.videoState = false;
          }
        }
      },
      watch: { 
        // 监听操作
        videoData(val, oldVal) { 
          const {  currentTime, duration } = val;
          if (currentTime && duration && currentTime < duration) { 
            this.hintOperate();
          }
        }
      }
    };
    </script>
    
    <style lang="less">
    #common-video { 
      position: relative;
      .video-box { 
        box-sizing: border-box;
        border: 0;
        display: block;
        width: 100%;
        height: 100%;
        outline: none !important;
      }
      .isShow { 
        //进度条
        video::-webkit-media-controls-timeline { 
          display: none;
        }
      }
      video::-webkit-media-controls-play-button { 
        visibility: hidden;
      }
      .operate-btn { 
        display: block;
        width: 60px;
        height: 60px;
        position: absolute;
        top: calc(50% - 30px);
        left: calc(50% - 30px);
      }
      .operate-btn:hover { 
        opacity: 0.8;
      }
      .fade-out { 
        opacity: 0;
      }
    }
    </style>

> 注：
> 
> 1.  使用 isShow 属性配合 css 样式动态展示视频滚动条
> 2.  使用 video 标签的 οncοntextmenu=“return false” 属性来实现禁止下载
> 3.  使用 video 标签的 @timeupdate=“timeupdate” 方法来时间视频播放进度监听
> 4.  使用 vue 的 ref 属性为 video 标签绑定监听事件，来实现其他功能，如时长统计、延迟提示、动态显示图标播放按钮等功能。