video 手动 播放 全屏

       <video
          ref="videoPlayer"
          id="my-video"
          preload="meta"
          height="200px"
          width="300px"
          data-setup="{}"
          autoplay
          controls
        >

          <source src="@/assets/cs.mp4" type="video/mp4" />
        </video>
        <button @click="playVideo">播放</button>
        <button @click="pauseVideo">暂停</button>
        <button @click="toggleFullScreen">全屏</button>

    toggleFullScreen() {
      let video = this.$refs.videoPlayer;
      if (video.requestFullscreen) {
        video.requestFullscreen().catch((err) => {
          console.error(err);
        });
      } else if (video.mozRequestFullScreen) {
        /* Firefox */
        video.mozRequestFullScreen().catch((err) => {
          console.error(err);
        });
      } else if (video.webkitRequestFullscreen) {
        /* Chrome, Safari & Opera */
        video.webkitRequestFullscreen().catch((err) => {
          console.error(err);
        });
      } else if (video.msRequestFullscreen) {
        /* IE/Edge */
        video.msRequestFullscreen().catch((err) => {
          console.error(err);
        });
      }
    },
    playVideo() {
      console.log(this.$refs.videoPlayer);

      this.$refs.videoPlayer.play();
    },
    pauseVideo() {
      this.$refs.videoPlayer.pause();
    },

监听

 mounted() {
    //this.getDataFn()
    var video = document.getElementById("my-video");
    var last = 0;
    //当目前的播放位置已更改时
    video.ontimeupdate = function () {
      var current = video.currentTime;
      if (current - last > 2) {
        //此处是限制跳过几秒 可调整
        video.currentTime = last;
      } else {
        last = current;
      }
    };
    video.onended = function () {
      console.log("视频播放完成");
    };
  },